Skip to content

Reference

The design system.

Ink on ivory, one serif for statements and one sans for everything else. No accent colour, no shadows, four-pixel corners.

Brand

The mark

Newsreader §, weight 500

The logo is the wordmark. The mark beside it is the section sign cut from the display face itself — not drawn, because the system has no drawn vocabulary. It is shipped as an outline so the favicon needs no webfont, and it inks itself from currentColor, so it inverts wherever the theme does.

Wordmark · scales with type

OpenLexiOpenLexiOpenLexi

Mark and tile · 48 / 24 / 16

OpenLexi
OpenLexi

Colour

Three themes

data-theme swaps every binding

data-theme="black"

Primary text

Secondary text

Muted text

Disabled text

data-theme="white"

Primary text

Secondary text

Muted text

Disabled text

data-theme="gray"

Primary text

Secondary text

Muted text

Disabled text

Primitives

The warm gray ramp

Hue ~40–60°, never neutral
gray-950-ink#0f0e0d
gray-900#1f1d1a
gray-800#33312c
gray-700#524f49
gray-600#706d66
gray-500#8f8b85
gray-400#adaba5
gray-300#cccac6
gray-200#e5e5e3
gray-100#f2f1f0
gray-50-ivory#fafaf9

Typography

Display ramp

Serif 400, leading 1.05, four responsive stops

text-heading-0 · 112 → 160

Record

text-heading-1 · 48 → 112

Legislation should be legible

text-heading-2 · 36 → 64

Measures in motion

text-heading-3 · 28 → 40

What this measure does

text-heading-4 · 28 → 40 · sans 500

The bridge between display and UI

Italic · true italic cut, not a slant

A law nobody can read

Typography

Body ramp

Sans 400, leading 1.3
text-body-0 · 24

The public record, read plainly.

text-body-1 · 20 · lede

The public record, read plainly.

text-body-2 · 16 · body

The public record, read plainly.

text-body-3 · 14 · the workhorse

The public record, read plainly.

eyebrow · 12 / 500 / +0.08em

Legislative index

strong · capped at 500, never 700

Weight tops out at medium across the system.

Components

Controls

Two sizes, three variants
Primary · 48px (lg) and 32px (default)
Outline · inverts on hover
Text link · arrow slides in on hover and focus
Field · transparent, 1px border, no fill state
Status · hairline and tinted text, plus a glyph and a label
Status: CommitteeStatus: FloorStatus: Enacted
Topic tag · squared, never reads as a control
HousingPrivacy
Meta
Updated 11 Aug 2026
Legislative progress68%
Sponsor
Elias Torres
Last action
10 Aug 2026

Layout

Space and grid

Named steps, redefined per breakpoint
xs7 / 8 / 9 / 10
sm14 / 16 / 18 / 20
md28 / 32 / 36 / 40
lg56 / 64 / 72 / 80
xl112 / 128 / 144 / 160
2xl140 / 160 / 180 / 200

2 / 6 / 12 columns · gutter is half the side padding

Shape and motion

Restraint, enforced

No shadow tokens exist
Radius · 4px controls, 8px media, full for pills
sm · 4lg · 8full
Elevation · background step plus a hairline. Never a shadow.
bg-surface-2
Easing · 300ms is the default for every colour change
ease-out-soft-in · .3 .3 .3 1ease-in-soft-out · .7 0 .7 .7

Every measure, from introduction to enactment.

Search the record

Open data · Clear context

Compiled daily from official records