# Tracearr Brand Style Guide

## 1. Core Brand Concept

Tracearr's visual identity reflects: - **Security** --- controlled
access, protection, enforcement - **Visibility** --- tracing sessions,
device intel, location anomalies - **Modern simplicity** --- clean
geometry, minimal noise, premium feel - **Tech-forward aesthetic** ---
gradients, subtle glow, deep contrast

------------------------------------------------------------------------

## 2. Logo System

### Primary Logo (Horizontal)

Shield icon left + "TRACEARR" wordmark.

### Icon-Only Logo

Shield monogram with stylized T-path + radar arcs.

### Safe Spacing & Minimum Size

-   Clearspace around the logo = height of the dot at the bottom of the
    shield.
-   Minimum display:
    -   Icon only: **24×24 px**
    -   Full logo: **140 px width**

### Backgrounds

-   Solid dark or solid light backgrounds recommended.
-   Avoid busy imagery behind the logo.

------------------------------------------------------------------------

## 3. Color Palette

### 3.1 Primary Colors

  Name             Hex         RGB            Usage
  ---------------- ----------- -------------- ----------------------
  **Cyan Core**    `#18D1E7`   24, 209, 231   Logo, buttons, links
  **Cyan Deep**    `#0EAFC8`   14, 175, 200   Gradients, hover
  **Cyan Dark**    `#0A7C96`   10, 124, 150   Shadows, outlines
  **Blue Core**    `#0B1A2E`   11, 26, 46     Main dark background
  **Blue Steel**   `#162840`   22, 40, 64     Panels, cards
  **Blue Soft**    `#1E3A5C`   30, 58, 92     Hover, selection

------------------------------------------------------------------------

## 4. Light & Dark Mode Palettes

### 4.1 Dark Mode (Primary)

**Backgrounds**
- `#050A12` (deepest dark - main background)
- `#0B1A2E` (Blue Core - cards)
- `#162840` (Blue Steel - panels, popovers)

**Text**
- `#FFFFFF` (Primary)
- `#9FAFC0` (Muted - ~65% lightness)

**Borders**
- `#162840` (Blue Steel)

**Brand Accent** - `#18D1E7` (Cyan Core)

------------------------------------------------------------------------

### 4.2 Light Mode

**Backgrounds**
- `#F5F7FA` (cool gray - main background)
- `#FFFFFF` (pure white - cards, sidebar)
- `#E8ECF1` (secondary - hover states)

**Text**
- `#0B1A2E` (Blue Core - primary text)
- `#5A6A7A` (muted text)

**Borders**
- `#CED4DC` (subtle but visible)

**Brand Accent** - `#0A98AD` (darker cyan for light mode readability)

**Key Differences from Dark Mode:**
- Primary buttons use white text on darker cyan (`#0A98AD`)
- Focus rings use the darker cyan
- Chart colors adjusted for contrast on light backgrounds

------------------------------------------------------------------------

## 5. Typography

**Primary Font:** Inter\
Weights: - 700 (Bold) - 500 (Medium) - 400 (Regular) - 300 (Light)

Fallback stack:

    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif

------------------------------------------------------------------------

## 6. UI Elements

### Buttons

**Primary Button** - Background: `#18D1E7` - Hover: `#0EAFC8` - Text
Color: `#0B1A2E` - Radius: 8--10px

**Secondary Button** - Border: `#18D1E7` - Text: `#18D1E7` - Hover:
`rgba(24,209,231,0.08)`

------------------------------------------------------------------------

## 7. Iconography

-   Stroke width: 1.75--2px\
-   Rounded corners\
-   No filled icons except for critical warnings

Colors: - Default: `#8FA3B5` - Active: `#18D1E7` - Danger: `#FF4C4C`

------------------------------------------------------------------------

## 8. Shadows & Effects

-   Logo glow: `0px 0px 14px rgba(24,209,231,0.22)`
-   Dark mode panel shadow: `0px 4px 12px rgba(0,0,0,0.35)`

------------------------------------------------------------------------

## 9. Brand Tone

Tracearr should feel: - Authoritative but friendly\
- Technical but approachable\
- Privacy-conscious\
- Clear, concise, no fluff