Aurora gradient
Our hero ribbon. Used as a 2px top-rule on every magazine surface, a soft vertical wash for hero bands, and a 0.6-opacity accent for premium CTAs.
Source palette
Three sources, three signatures. We never reuse these tints for anything that isn't the data source itself — that's how users learn the colour language at a glance.
Search Console — blue
Analytics — orange
Bing / Webmaster — teal-blue
Core surfaces
Every component pulls from these. Click any chip to copy the token name or its computed HSL.
Brand & status
Primary aurora-blue leads CTAs and AI surfaces. Status colours stay calm — no neon — so deltas don't shout over the data.
Typography
Inter across the system. Tight tracking for display, generous leading for prose, tabular numerals for every metric.
Data, beautifully.
Editorial hierarchy
Glarify's voice is calm and confident. We let charts and numbers carry the weight, and our prose stays out of their way — never more than two sentences when one will do.
128,402
Components in context
A snapshot of how the system reads when assembled. Same tokens, same gradient, same calm hierarchy.
GSC clicks
GA4 clicks
Bing clicks
Magazine-grade surfaces
Aurora rule + soft vertical wash + a clean card. This is the recipe we apply to every hero band across the dashboard so the brand language stays unmistakable.
How to use it
Three patterns cover ~90% of the system. Always reach for tokens — never raw hex in components.
<div className="relative">
<div className="absolute inset-x-0 top-0 h-[2px] bg-gradient-aurora" />
<div className="absolute inset-0 bg-gradient-aurora-vert opacity-[0.12]" />
…
</div><div
style={{
background: 'hsl(var(--gsc) / 0.14)',
color: 'hsl(var(--gsc))',
}}
>…</div>background:
color-mix(in srgb,
hsl(var(--ga4)) 85%,
hsl(var(--muted)));