Eyebrow
Content card with a title that clamps after three lines
Supporting copy in the card body.
Design system
Style guide
The tokens and primitives every template is built from.
Color tokens
--color-ink
--color-ink-soft
--color-ink-faint
--color-ground
--color-ground-soft
--color-line
--color-primary
--color-accent-ink
--color-accent-soft
--color-inverse
Type scale
Display XL — Source Serif 4
Display LG — page titles
Display MD — section titles
Lede — supporting introductions set in Inter at a comfortable measure.
Body — Inter 17px/1.65 for reading text across the site.
Eyebrow — labels & categories
Form elements
Cards
Credential group
Content blocks
Headings, body & inline formats
Content opens with a second-level heading
Body copy at reading rhythm, with links in accent ink, bold, italics, and underlines that sit low and thin.
Lists
- Unordered items with half-line spacing
- Nesting switches to em-dashes
- Keeping hierarchy quiet
- Ordered lists count plainly
- And nest into lower-alpha
- Like this
Quote
“The quote block speaks in the serif voice, held by a thin accent rule.”
Table
| State | Statute | Deadline |
|---|---|---|
| California | CPRA §1798 | Mar 1 |
| Texas | TDPSA §541 | Jul 1 |
Filing deadlines by state, 2027.
Separators
The default separator is a short accent stroke.
The wide style spans the column as a hairline.
Both create quiet pauses rather than hard breaks.
File download
Accordion
Expand more