Typography

The Aurora type system — Space Grotesk display, Inter body, JetBrains Mono numerics — sized entirely from the --ax-text-* scale.

Links
Scale

Type scale

Nine steps from 2xs to 3xl. Token name on the right, rendered size on the left.

Aperture Goods--ax-text-3xl
Quarterly review--ax-text-2xl
Revenue is trending up--ax-text-xl
Northwind Labs dashboard--ax-text-lg
Body copy at the medium step--ax-text-md
Secondary & supporting text--ax-text-sm
Captions, meta & helper lines--ax-text-xs
Eyebrow & overline labels--ax-text-2xs
Families

Typefaces

Three roles, one cohesive voice.

Display · Space Grotesk
Ag 0123
Sans · Inter
Ag 0123
Mono · JetBrains Mono
Ag 0123
Hierarchy

Headings

h2–h6 (the single h1 is the page title above).

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6
Prose

Lead & body

An opening lead line, then default running copy.

Vireo ships nine dashboard editions from one design system, so a Sales view feels identical whether it renders in React, Vue, or Laravel.

Every surface resolves to a role token, which is why all twelve accent presets retheme with no extra CSS. Body copy sits at the medium step with comfortable leading; the lead line above carries slightly more weight and air to anchor the section.

Small print and disclaimers settle at the subtle tier — present, but never competing for attention.

Within a line

Inline elements

Emphasis, marks, code, keys & small-print.

You can use bold, italic, underline and strikethrough for emphasis.

Highlight a phrase with the accent mark, or annotate with AOV.

Reference inline code like renderChart() or a keystroke: press ⌘ K to search.

Show ledger figures in mono: $48,210.00 with a ▲ 12.4% delta.

Use superscript and subscript for footnotes and formulas, and small text for legal lines.

Quotation

Blockquote

An accent edge, larger leading, attributed source.

We replaced four bespoke admin builds with Vireo and shipped the new billing flow in a single sprint — the token system did most of the work.

— Marcus Reyes, Engineering Manager at Northwind Labs
Enumeration

Lists

Unordered, ordered, description & check lists.

Unordered
  • Lazy-loaded chart plugins
  • Twelve accent presets
    • Light & dark per accent
    • RTL mirroring
  • Reduced-motion fallbacks
Ordered
  1. Scaffold the app shell
  2. Drop in the flagship dashboard
  3. Wire the customizer
  4. Ship to ThemeForest
Description
Revenue
Gross sales before refunds.
AOV
Average order value, trailing 30 days.
Churn
Share of customers lost this month.
Checklist
  • Dark mode verified
  • Keyboard navigable
  • RTL audit pending
Monospace

Code block

Pre-formatted, scrollable, mono with a subtle surface.

// Render the Aurora area chart from the shared wrapper
import { renderChart } from '/src/js/plugins/charts.js';

const el = document.getElementById('revenue');
renderChart(el, 'area', series, { height: 320 });