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
Signal
Map
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 · 56/1.02 · -4%
H2 / SectionParliament, live.Fraunces · 400 · 44 · -3%
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
--space-12
--space-24
--space-38
--space-412
--space-516
--space-624
--space-732
--space-848
--space-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
Hemicycle
SAMPLE COUNTRY · LOWER HOUSE
Sample Country · National Assembly
150 seats · hover a seat for the party
Total seats
150
Majority line
76
Largest party
Civic Alliance
Parties
5
All political parties
Editorial primitives
SourceDot
Every data point carries live or frozen provenance.
Pill / Badge
ExceptionalWarningLive
Banner / Alert
Section header
Evidence
Readable structure.
Blog table
| Feature | CIA World Factbook | Civica |
|---|---|---|
| Data freshness | Annual updates | Live from reconciled sources |
| Comparisons | Separate country pages | Side-by-side country views |
| Reader mode | Static reference | Responsive, cited, dark/light |
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!”