Initial Upload

docs/style-guide.md

@@ -0,0 +1,141 @@
+# 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