Brand system v1.0
AIComparisonsHub — Brand & style guide
A premium, trust-first design system inspired by Apple, Notion, Perplexity, G2 and Capterra. Built for clarity, authority and a serious software-review experience.
01 — Identity
Logo & mark
Primary lockup
Mark only
On primary
The mark stacks ascending bars — a comparison chart distilled to its purest form. The wordmark splits at "Hub" to emphasise the platform's role as a meeting point for buyers and tools.
02 — Color
Palette
Primary
Deep navy
--primaryAccent
Signal blue
--primary-glowBackground
Pure white
--backgroundMuted
Surface
--mutedBorder
Hairline
--borderForeground
Body text
--foregroundSuccess
--successWarning
--warningDestructive
--destructiveNavy carries authority; blue is reserved for links, focus rings and accents — never decoration. Success, warning and destructive are used only for status, not personality.
03 — Typography
Inter Tight + Inter
The serious way to compare AI software.
Display / Inter Tight 700 · -0.022em
Independent reviews. Verified pricing.
H2 / Inter Tight 700
Trusted by buyers researching AI tools.
H3 / Inter Tight 600
Body — independent, verified comparisons of AI tools across every category. Built for buyers who need to make the right call.
Body / Inter 400
LABEL · METADATA · BREADCRUMB
Eyebrow / Inter 500 uppercase 0.14em
04 — Buttons
Actions
05 — Search & inputs
Form controls
06 — Filters & chips
Filters
07 — Trust signals
Badges
08 — Cards
Tool card
ChatGPT
Conversational AI
Independent review, verified pricing and full side-by-side comparison.
Midjourney
AI image generation
Independent review, verified pricing and full side-by-side comparison.
Cursor
AI coding assistant
Independent review, verified pricing and full side-by-side comparison.
09 — Comparison table
Comparison row
10 — Navigation
Header pattern
Sticky · backdrop blur · hairline border · 64px height
11 — Surfaces
Elevation & radius
Shadow sm
Cards at rest
Shadow md
Hover / hover lift
Shadow lg
Modals · search bar
Border radius: 0.625rem base · hairline 1px borders preferred over heavy shadows.
12 — Iconography