Civica.
Design System · v0.1 · April 2026
00 · Foundation

An editorial civic atlas.

Warm newsprint paper, inky type, a cinnabar accent for anything live. Dark mode is the same vocabulary under a starless sky.

Civica is an interactive civic-education atlas: one world map, every chamber, every bill. The system is built on four moves — a warm paper field, ink-black structure, a single signal color, and a hairline rule. Dark mode inverts the field, keeps the ink, and warms the signal.

No gradients. No drop shadows (except the occasional blocky offset). Color is reserved for meaning, not decoration.

01 · Color

Paper, ink, cinnabar.

Every token is defined in both themes. Signals hold the same role across modes.

Surface — paper & ink

--paper
Base field. Everything sits on it.
--paper-2
Quiet hover & zebra.
--paper-3
Well / mini-map ground.
--ink
Body type, rules, heavy UI.
--ink-2
Secondary type, soft buttons.
--muted
Captions, eyebrows, meta.
--rule
Hairlines, borders.
--rule-2
Graticules, dashed rules.

Signal

--accent
oklch(58% 0.14 35) · cinnabar
The one live color: selection, CTAs, eyebrows.
--accent-soft
accent @ 92% L
Pinned banners, accent wash.
--success
olive · oklch(55% 0.12 145)
Passed · yes votes · stable.
--warn
amber · oklch(65% 0.14 75)
In committee · deadline near.
--danger
brick · oklch(52% 0.18 25)
Failed · nay votes · contested.
--info
slate · oklch(52% 0.10 240)
Procedural · abstentions.

Map

--ocean
Water & atlas ground.
--land
Featured countries.
--land-dim
Non-featured countries.
--land-selected
accent
Current country.

Both modes, side by side

Light — default
paper
paper-2
paper-3
ink
accent
Dark
paper
paper-2
paper-3
ink
accent
02 · Type

Fraunces, Inter, Mono.

A contemporary serif for voice. A precise sans for data. A mono for labels and codes.
Display / H1Every chamber.Fraunces · 400 · 72/0.95 · -3%
H2 / SectionParliament, live.Fraunces · 400 · 40 · -2%
H3 / SubheadThe ChamberFraunces · 400 · 22
Dek / LedeA semi-presidential republic in Western Europe.Fraunces · italic · 17
BodyHover any seat to meet the member. Hold Shift and click two countries to compare them side-by-side.Inter · 400 · 14/1.55
Caption577 seats · elected by two-round systemInter · 400 · 12
EyebrowWelcome · AtlasMono · 10 · 16% track
Meta / CodeFRA · 48.8° N, 2.3° E · GMT+1Mono · 11
03 · Spacing & Shape

Tight grid, hard edges.

A 4-pt scale, near-zero radii, and blocky offset shadows for anything that wants to float.

Scale

--s-12
--s-24
--s-38
--s-412
--s-516
--s-624
--s-732
--s-848
--s-964

Radii

r-0 · 0
r-1 · 2px
r-2 · 6px

Elevation

flat
shadow-hard
shadow-hard-lg
04 · Components

The building blocks.

Patterns used across Atlas, Chamber, and Compare.

Buttons

Chips / Filters

Search input

⌕⌘K

Tabs

Country hover card

FRA

France

Semi-PresidentialEurope
Paris · 68M$3.0T
Click to enter chamber ↗

Status badges

PassedIn committeeFailedProceduralDraft

Party seats

National Rally · 89
Renaissance · 171
Ecologists · 23
Socialists · 66
Independent · 12

Mini hemicycle

Country masthead

FRA · Western Europe

France

A semi-presidential republic of 68 million.
LeaderPres. L. Dubois
GovSemi-Presidential
CapitalParis
Pop68M
GDP$3.0T
05 · Voice

Clear, civic, dry.

Like a textbook written by a journalist. Factual, spare, a little warm.
Do

“France is a semi-presidential republic. The President and Prime Minister share executive power.”

Don't

“Dive into France's fascinating governmental landscape, where dual executives share the stage in an exciting political dance!”

Civica Design System · v0.1April 2026