DESIGN · /AIGOV

Design tokens.

Every design decision used on /aigov, documented in one place. Single source of truth alongside DESIGN.md (which describes the main cancemi.de site) and src/i18n/aigov.ts (which holds every visible string in EN/DE).

01 · ACCENT PALETTES

Three accents. Two themes.

The accent system cycles through three pairings. Each accent has a distinct dark-mode and light-mode hex, and (for cool accents) a faintly tinted light-mode background that prevents the cool–warm temperature clash.

Amber DEFAULT · WARM

Dark · accent #F5A524

Light · accent #D97706

Light bg #FBFCFD · neutral

Purple COOL · INTELLECT

Dark · accent #A78BFA

Light · accent #7C3AED

Light bg #FBFCFD · neutral

Teal COOL · STRATEGIC

Dark · accent #2DD4BF

Light · accent #0F766E

Light bg #EEF5F2 · faint mint

02 · SURFACES

Surface scale.

Background, panel, and panel-soft form the layered surface system. Border tokens at 8 % and 4 % ink define the hairlines.

--bg · dark #0B1118

--panel · dark #0F1822

--panel-soft · dark #131C28

--panel · light #FFFFFF

03 · TYPOGRAPHY

Two voices.

Hanken Grotesk carries every headline, body, and label. JetBrains Mono is reserved for eyebrows, dates, and metadata — the typographic signature that signals the technical register.

Hero · h1 Hanken Grotesk · 500
104 / 0.95 / -0.04em

Power is nothing without control.

Section · h2 Hanken Grotesk · 500
76 / 1.0 / -0.03em

Three lanes of work.

Card · h3 Hanken Grotesk · 500
19 / 1.22 / -0.015em

Most AI failures are governance failures wearing a tech costume.

Body Hanken Grotesk · 400
17 / 1.6

An independent practice for European enterprises navigating the EU AI Act.

Eyebrow JetBrains Mono · 400
11 / 0.22em / accent

EU AI Act · Article 6 enforcement · 02.08.2026

Mono · meta JetBrains Mono · 400
11–13 / 0.04–0.18em

Cologne, DE · EN/DE/IT · 02.08.2026

04 · SPACING

Layout rhythm.

Section padding is fluid (clamp-based). Component gaps use discrete steps. Radius is intentionally minimal — corners stay sharp except on circular CTA disks.

section · Xclamp 24–64

section · Yclamp 80–140

cards gap48px

row · pad32px

chip · gap10px

radius · default0px (sharp)

radius · button4px

radius · CTA disk50%

05 · COMPONENTS

Live samples.

Render-true previews of components used on /aigov.

Begin a 90-minute diagnostic →

Hero CTA

Memorandum

Most AI failures are governance failures wearing a tech costume.

Insight card

06 · MAINTAIN

Where to edit.

When the design needs to change, change it here — not on the page.

Page markup & tokens src/pages/aigov.astro

This design page src/pages/aigov/design.astro

Imprint (DE/EN) src/pages/aigov/impressum.astro

Translations (EN + DE) src/i18n/aigov.ts

Main-site design doctrine DESIGN.md

Toggle dev mode ?dev=1 · Ctrl+Shift+D