ITKdev Research

Appearance

Last updated: 24. apr. 2026, 09.29

Project: ITK Dev Design System

Design System ​

A shared, opt-in visual language for ITKdev Research prototypes. Plain CSS

  • design tokens, no build step, no framework.

Opt in

This design system is opt-in. Existing prototypes that match an external product (like deltag-aarhus) or test other palettes (like wcag-contrast-checker) should not include it.

Quick start ​

Add one stylesheet to your mock's HTML, then wrap your UI in a .ds container:

html
<link rel="stylesheet" href="/research-projects/design-system/v1/index.css">

<div class="ds">
  <button class="btn btn-primary">Primary action</button>
</div>

The .ds wrapper scopes every style — nothing leaks to the rest of the page, so you can safely mix this with Tailwind or other frameworks.

What's in it ​

  • Tokens — colors, typography, spacing, radii, shadows.
  • Components — buttons, cards, badges, form inputs, tables, modals, sidebar nav, stat cards, alerts.
  • Usage — how to opt in, versioning, extension guidance.

Live playground ​

Open playground ↗

Every component variant, rendered with the ITK Dev palette on a single scrollable page.

Example pages ​

The same components, assembled into realistic layouts:

Citizen-facing webpage ↗Admin app dashboard ↗

Each example links to the others via a demo nav at the top, so you can compare patterns side-by-side.

Branding ​

The design system uses ITK Dev's teal and cyan as its primary palette, derived from the logo:

  • Teal #007BA6 — primary actions, links, focus rings
  • Cyan #00B5C9 — secondary accent, info states
  • Green #008D3D — success
  • Red #E44930 — danger