ITK Aarhus design system

A shared design system for the digital products ITK builds for Aarhus Kommune's staff and collaborators — one palette, one type stack, one set of primitives, so every product looks and behaves consistently.

01 — Foundations

01 · Foundations

Colors

A blue primary and a coral secondary, each on a full 50→900 scale, plus state colours and a neutral scale.

Aa 123

Inter · Newsreader

01 · Foundations

Typography

One display family, a 10-step scale, Danish æøå-ready. Mono for technical detail.

01 · Foundations

Spacing & elevation

Nine-step 4 px spacing, five-step radii, three-step shadow. Calm, rhythmic, never cramped.

02 — Brand

02 · Brand

Logo & endorsement

The Aarhus Kommune endorsement mark, the product emblem, clear space and usage rules.

Vilde Teknologier på Dokk1

03 · Components

UI components

Buttons, tags, inputs, cards, callouts, stats, navigation. Small set, broad coverage.

Et eksempel på systemet i brug

04 · Examples

Applied examples

Five reference pages — website landing, content and about, plus an app dashboard and data tables.

03 — Principles

001

One direction for every product.

Every tool ITK builds for Aarhus Kommune — for staff and collaborators alike — draws from the same tokens, so products feel like one family even when teams differ.

002

Built for the work.

These are tools people use to get their job done. Clarity, density, and obvious affordances beat decoration. Danish-first copy, accessible by default.

003

Use the token, not the value.

Colours, type, spacing, and elevation are defined once and reused. Reach for the named token so the system stays consistent and easy to evolve.

Design System · github.com/itk-dev/itkaarhus-design-system