Design Tokens | Herald

Surfaces

--surface-base #F2F3F5 Page background

--surface-raised #FFFFFF Cards, panels

--surface-overlay #FFFFFF Modals, dropdowns

Borders

--border-subtle #E2E5EC · hairline dividers

--border-default #CBD0DC · cards, inputs

--border-hover #A8B0C8 · hover / focus

Text

--text-primary · #1C2033 Headings, body copy, labels

--text-secondary · #5B6280 Supporting text, navigation, captions

--text-tertiary · #8D93A8 Timestamps, metadata, hints

Signal Colors — the accent system

Derived from the product's confidence ratings. These are the site's primary accent palette. Brand blue is not in this group.

Confidence · Green

High confidence

--signal-green-fg: #1A7A4A · text, icons
--signal-green-bg: rgba(26,122,74,0.09) · chip fill

Warning · Amber

Needs review

--signal-amber-fg: #8C5F00 · text, icons
--signal-amber-bg: rgba(140,95,0,0.09) · chip fill

Critical · Red

Incident active

--signal-red-fg: #BF2D3B · text, icons
--signal-red-bg: rgba(191,45,59,0.09) · chip fill

Brand Accent — use sparingly

Interim Direction 3 sage. Appears on the logo mark and primary CTA only. Not an accent color. Do not use for section labels, badges, or decoration.

--brand-logo #4C604A / #DCFED8 Logo mark only

--brand-cta #4C604A / #DCFED8 Primary CTA button

--brand-cta-hover #3D4D3B / #C5EBBF CTA hover state

Book a Demo →

Type Scale — 8 steps, ratio ≈ 1.25

Each step has a paired --lh-* line-height token.

--text-xs0.75 rem · 12 px--lh-xs: 1.4

The quick brown fox. Metadata, overlines, labels.

--text-sm0.875 rem · 14 px--lh-sm: 1.5

The quick brown fox. Captions, secondary UI text.

--text-base1 rem · 16 px--lh-base: 1.625

The quick brown fox. Body copy — the workhorse of the scale.

--text-lg1.125 rem · 18 px--lh-lg: 1.55

The quick brown fox. Large body, lead paragraphs.

--text-xl1.25 rem · 20 px--lh-xl: 1.5

The quick brown fox. Subheadings, card titles.

--text-2xl1.5 rem · 24 px--lh-2xl: 1.4

The quick brown fox. Section subheadings.

--text-3xl1.875 rem · 30 px--lh-3xl: 1.3

The quick brown fox. Section headings.

--text-4xl2.25 rem · 36 px--lh-4xl: 1.2

The quick brown fox. Page headings.

Spacing — 4 px base · --sp-N = N × 4 px

--sp-1

4 px

--sp-2

8 px

--sp-3

12 px

--sp-4

16 px

--sp-5

20 px

--sp-6

24 px

--sp-8

32 px

--sp-10

40 px

--sp-12

48 px

--sp-16

64 px

--sp-20

80 px

--sp-24

96 px

--sp-32

128 px

Border Radii

--radius-sm 4 px · badges, inputs, code blocks

--radius-md 8 px · cards, buttons, dialogs

Motion

Hover each tile to see the transition in action.

--duration-fast 120 ms · hover, toggle

--duration-mid 240 ms · panel, modal

Easing: --ease-default · cubic-bezier(0.4, 0, 0.2, 1)