v5.0.0

Civic Clarity

Dieter Rams × Braun design system — instrument-panel clarity, honest materials, restrained motion. Less, but better.

Color palette

Orange = action only · Seafoam = content · Aluminum = structure

--cd-orange#E38B42
--cd-seafoam-hi#EAEFE1
--cd-alum-hi#C7C9C0
--cd-text#2F2F2C
--cd-muted#6A6A60

Materials

One dominant material per panel · max 2 layers per component

Seafoam

Cards, panels, content

Aluminum

Frames, scaffolding

Orange metal

CTAs, signals

Components

Pill label Signal

Typography

Satoshi display — headings

Inter body — instrument clarity at 400 weight, +0.02em tracking.

Tech labels at 500 weight · min 4.5:1 body contrast

Do / Don't