Color tokens

Brand teal is primary; cyan is the secondary accent.

Teal 500

#007BA6

Cyan 400

#00B5C9

Green 500

#008D3D

Red 500

#E44930

Lime 500

#89BD23

Sage 500

#73BC99

Line icons

SVG sprite at ./icons.svg. Reference with <use href="./icons.svg#name"/>. Sized via CSS, tinted via currentColor.

Typography

Heading 1 — The quick brown fox

Heading 2 — The quick brown fox

Heading 3 — The quick brown fox

Heading 4 — The quick brown fox

Body text — The quick brown fox jumps over the lazy dog. 1234567890.

Small — The quick brown fox jumps over the lazy dog.

Buttons

Variants × sizes. Add btn-sm or btn-lg for sizing.

Badges

Default Primary Success Warning Danger Info

Cards

Default card

Subtle border, no shadow. Good for nested content.

Bordered card

Stronger border for higher contrast.

Elevated card

Shadow, no border — floats off the surface.

With header

Content body between header and footer.

Form fields

Name Use your full name.

Role

Bio

Email Please enter a valid email address.

Disabled

Table

Project	Status	Owner	Budget
Climate Nudging	Active	Team A	120.000 kr
Book Aarhus	Review	Team B	85.000 kr
Opkrævningsoverblik	Draft	Team C	60.000 kr

Alerts

Info: This is an informational callout.

Success: Your changes have been saved.

Warning: This action cannot be undone.

Error: Something went wrong.

Metric cards

Active users

1.248

▲ 12% vs last week

CO₂ saved

42 kg

▲ 8%

Response time

312 ms

▼ 4% (slower)

Sidebar nav

Dashboard

Page content sits next to the sidebar.

Modal

Click to open a demo modal. Press Escape or click the backdrop to close.

Aarhus-inspired surfaces

Pastel backgrounds borrowed from aarhus.dk, usable on sections, cards, and heroes.

Mint

.surface-mint

Cream

.surface-cream

Pale blue

.surface-pale-blue

Pale pink

.surface-pale-pink

Pale aqua

.surface-pale-aqua

Coral

.surface-coral

Pill & accent buttons

Pink accent signals the aarhus.dk relation; pill shape softens hierarchy.

Hero banner

Hvad leder du efter?

Find information om kommunens services, borgerinddragelse og aktuelle sager.

Quick-link tiles

Service shortcuts — compact, iconed, with hover lift.

Parkering Zoner, tilladelser, betaling Skole Indskrivning, ferie, SFO Akut hjælp Krisecenter, vagtlæge Borgerinddragelse Høringer og projekter

Charts (Chart.js)

Datasets auto-pick up the ITK palette via chart-theme.js — no per-chart color config.

Sparklines in a table

Project	7-day trend	Total
Visitors		12.408
Bookings		428
Errors		3

Map with pins + heatmap (Leaflet)

Centered on Aarhus city hall. Pins use dsMakePin(); heatmap uses dsHeatmap() with the default teal → pink gradient.