Midnight
Primary canvas
#080D18Use for the dark-mode page background and high-contrast brand moments.
SwitchRoute visual identity
SwitchRoute
Brand Kit.
The visual system behind SwitchRoute: a clear route through software choices, expressed with midnight surfaces, a cyan-to-blue-to-violet route mark, readable type, and practical, honest content.
Digital brand reference · Updated October 2026
01 / Identity
One brand, one clear route
SwitchRoute helps people discover AI tools, compare software alternatives, find useful browser utilities, and understand access models before committing to a product.
Brand promise
Find a smarter route to your tools.
Make software choices easier with clear comparisons, source links, and practical context—not hype.
Brand attributes
UsefulClearCuriousIndependentTransparentModern
Confident without exaggeration. Technical without being intimidating.
02 / Logo
The route mark
Two opposing routes represent comparison and a better path forward. Keep the mark crisp, proportional, and surrounded by breathing room.
Preferred / dark
SwitchRoute
Primary placement for dark surfaces and the default website theme.
Reverse / light
SwitchRoute
SwitchRouteUse a dark wordmark on light backgrounds; never place white text on a white surface.
Logo rules
- Preserve proportions and the full gradient.
- Keep clear space around the mark.
- Do not stretch, redraw, or add effects to static logo files.
- Do not use the obsolete “Tech Hacks AI” name as the current wordmark.
03 / Colour
A focused route gradient
Midnight and navy provide calm structure; cyan, blue, and violet distinguish the route mark. Use colour to guide attention, not decorate every element.
Deep Navy
Depth & surfaces
#13294AUse in hero gradients and large background surfaces, not for small text.
Route Blue
Primary accent · dark UI
#60A5FAUse for primary links, focus rings, active states, and key actions on dark surfaces.
Route Cyan
Route gradient start
#22D3EEUse as a supporting accent in the route mark, data visuals, and subtle highlights.
Route Violet
Route gradient end
#8B5CF6Use sparingly as the gradient endpoint for distinctive brand artwork.
Mist
Primary text · dark UI
#F1F5F9Use for important headings and body text against dark surfaces.
Slate
Supporting text · dark UI
#94A3B8Use for descriptions, metadata, secondary labels, and quiet interface text.
Border
Dark UI structure
#29384FUse for card outlines, dividers, input borders, and low-emphasis separation.
Light-theme companions
These values protect readability when the user switches to light mode.
04 / Typography
Inter, with room to breathe
Use Inter across the product. Strong headings guide scanning; regular-weight body text keeps technical detail easy to read.
Display / H148–60px · 800 · tight tracking
Find a smarter route.
Section / H2 · 24–32px · 700
Compare before you commit.
Body · 14–18px · 400
Help people choose useful software with source-backed facts, clear limits, and a straightforward explanation of trade-offs.
Metadata / Eyebrow · 11px · 600 · uppercase
Free-first software discovery
05 / Layout
Spacing & surfaces
Use a consistent 4px spacing base. Prefer calm surfaces, one-pixel borders, and a clear hierarchy over heavy shadows.
4px
4
8px
8
12px
12
16px
16
24px
24
32px
32
48px
48
64px
64
Control · 8–10px radiusCard · 16px radiusFeature · 24px radius
06 / Components
Interface in practice
Actions use the semantic primary token; secondary actions remain outlined. Selected states should be clear without relying on colour alone.
FREE ACCESS
Clear, not over-promising
Explain whether access means a free tier, trial credits, or self-hosted weights.
SOURCE-LINKED
Trust over hype
Send visitors to official product, pricing, and licensing sources.
07 / Voice
Helpful, specific, honest
Prefer
“Compare tools by use case, access limits, and official pricing.”
Avoid
“The world’s #1 tool, unlimited and totally free.”
- • Be direct; define technical terms when needed.
- • Verify pricing, access, licensing, and time-sensitive claims.
- • Label estimates and limitations clearly.
- • Never imply a tool is free or endorsed without evidence.
08 / Accessibility
Clarity is part of the brand
Meet WCAG contrast guidance for text and controls; don’t use muted slate for essential small text on complex gradients.
Keep keyboard focus visible, buttons comfortably tappable, form controls labelled, and icons paired with accessible names when their meaning isn’t obvious.
Keep transitions subtle and honour reduced-motion preferences. Never use colour alone to communicate status.
Target: readable, consistent, calm
Primary text, links, and focus indicators should remain identifiable in both themes.
Brand system files
Use the same system across every surface.
Download the machine-readable colour and typography tokens, then use the same palette in the website, social graphics, presentations, and product imagery.
SwitchRoute · Digital brand referenceBack to SwitchRoute