@democratia/design v1.0.0

Democratia Design System

Complete reference for color tokens, typography, font weights, buttons, border radius, spacing scale, and accessibility patterns.

Colors

Core

Aa

--background

oklch(1 0 0)

--foreground

oklch(0.129 0.042 264.695)

Aa

--card

oklch(1 0 0)

--card-foreground

oklch(0.129 0.042 264.695)

Aa

--popover

oklch(1 0 0)

--popover-foreground

oklch(0.129 0.042 264.695)

Semantic

Aa

--primary

oklch(0.208 0.042 265.755)

--primary-foreground

oklch(0.984 0.003 247.858)

Aa

--secondary

oklch(0.968 0.007 247.896)

--secondary-foreground

oklch(0.208 0.042 265.755)

Aa

--muted

oklch(0.968 0.007 247.896)

--muted-foreground

oklch(0.554 0.046 257.417)

Aa

--accent

oklch(0.968 0.007 247.896)

--accent-foreground

oklch(0.208 0.042 265.755)

Aa

--destructive

oklch(0.577 0.245 27.325)

--destructive-foreground

oklch(0.985 0 0)

Interface

--border

oklch(0.929 0.013 255.508)

--input

oklch(0.929 0.013 255.508)

--ring

oklch(0.704 0.04 256.788)

Chart

--chart-1

oklch(0.646 0.222 41.116)

--chart-2

oklch(0.6 0.118 184.704)

--chart-3

oklch(0.398 0.07 227.392)

--chart-4

oklch(0.828 0.189 84.429)

--chart-5

oklch(0.769 0.188 70.08)

Sidebar

Aa

--sidebar

oklch(0.984 0.003 247.858)

--sidebar-foreground

oklch(0.129 0.042 264.695)

Aa

--sidebar-primary

oklch(0.208 0.042 265.755)

--sidebar-primary-fg

oklch(0.984 0.003 247.858)

Aa

--sidebar-accent

oklch(0.968 0.007 247.896)

--sidebar-accent-fg

oklch(0.208 0.042 265.755)

--sidebar-border

oklch(0.929 0.013 255.508)

--sidebar-ring

oklch(0.704 0.04 256.788)

Typography

Headings

Heading 1

h1 - 2.25rem

Heading 2

h2 - 1.875rem

Heading 3

h3 - 1.5rem

Heading 4

h4 - 1.25rem

Heading 5

h5 - 1.125rem

Heading 6

h6 - 1rem

Body text

Good civic design starts with clarity. When citizens interact with government services, every element - from color contrast to typography - shapes their experience and their trust in public institutions.

A consistent design system ensures that digital civic tools feel cohesive, accessible, and professional. By standardizing tokens for color, spacing, and typography, teams build faster while maintaining quality across all touchpoints.

Inline elements

Links are styled with an underline and --primary color, providing clear affordance.

Use strong for importance and emphasis for stress.

Inline code renders in JetBrains Mono at the current font size.

Code block 

:root {
  --primary: oklch(0.208 0.042 265.755);
  --radius: 0.625rem;
  --font-sans: "Source Sans 3", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

Lists

Unordered

  • Design tokens
  • Component library
  • Accessibility guidelines

Ordered

  1. Define color palette
  2. Set typography scale
  3. Build components

Fonts

Source Sans 3

300

The quick brown fox jumps over the lazy dog

400

The quick brown fox jumps over the lazy dog

600

The quick brown fox jumps over the lazy dog

700

The quick brown fox jumps over the lazy dog

900

The quick brown fox jumps over the lazy dog

400i

The quick brown fox jumps over the lazy dog

JetBrains Mono

400

The quick brown fox jumps over the lazy dog

700

The quick brown fox jumps over the lazy dog

400i

The quick brown fox jumps over the lazy dog

700i

The quick brown fox jumps over the lazy dog

Buttons

Add .btn plus a variant (.btn-primary or .btn-outline) to any button or anchor element.

As button

As link

Primary Outline

Specs

Property Value
padding 0.625rem 1.25rem
font-size 0.875rem
font-weight 600
border-radius var(--radius)

Radius

sm

--radius - 4px

6px

md

--radius - 2px

8px

lg

var(--radius)

10px

xl

--radius + 4px

14px

Spacing

1
0.25rem / 4px
2
0.5rem / 8px
4
1rem / 16px
6
1.5rem / 24px
8
2rem / 32px
12
3rem / 48px
16
4rem / 64px

Focus & Accessibility

All interactive elements use a 2px solid ring on :focus-visible, powered by the --ring token. Tab through the elements below to preview the focus style.

Focus demo

Focusable link

Focus-visible rule 

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

Reduced motion

When the user prefers reduced motion, all animations and transitions are suppressed to near-zero duration. 

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}