Rephl3x
3015f48118
3.8 KiB
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