Rephl3x
3015f48118
Some checks failed
CI / Lint & Typecheck (push) Has been cancelled
CI / Test (routes) (push) Has been cancelled
CI / Test (security) (push) Has been cancelled
CI / Test (services) (push) Has been cancelled
CI / Test (unit) (push) Has been cancelled
CI / Test (integration) (push) Has been cancelled
CI / Test Coverage (push) Has been cancelled
CI / Build (push) Has been cancelled
142 lines
3.8 KiB
Markdown
142 lines
3.8 KiB
Markdown
# 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
|