Foundations

Design Tokens — die Grundlage aller Komponenten. Klicken Sie auf ein Token, um es zu kopieren.

CSS

/* DGN Design Tokens — vollständig */

:root {
  /* Brand */
  --color-brand-primary: #232470;
  --color-brand-primary-dark: #1a1b55;
  --color-brand-primary-light: #3d3f9a;
  --color-brand-accent: #0ba1e2;
  --color-brand-accent-light: #e0f4fc;

  /* Neutrals */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  /* Semantic */
  --color-success: #16a34a;
  --color-warning: #eab308;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Category */
  --color-category-1: #bc744b;
  --color-category-2: #ba3b46;
  --color-category-3: #865f62;
  --color-category-4: #6b7a8f;
  --color-category-5: #ca8437;
  --color-category-6: #606c38;
  --color-category-7: #006992;
  --color-category-8: #bca24b;
  --color-category-9: #907954;
  --color-category-10: #718c65;
  --color-category-11: #3b1450;
  --color-category-12: #004346;
  --color-category-13: #987284;
  --color-category-14: #397e69;
}

/* Typography */
:root {
  /* Poppins is loaded via @repo/ui/fonts (next/font/local) — self-hosted,
     no Google Fonts CDN. --font-poppins is injected on <html>. */
  --font-family-base: var(--font-poppins), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-size-4xl: 2.25rem;
  --font-size-3xl: 1.875rem;
  --font-size-2xl: 1.5rem;
  --font-size-xl: 1.25rem;
  --font-size-lg: 1.125rem;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* Spacing */
:root {
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
}

/* Shadows */
:root {
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Border Radius */
:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

Markenfarben

Offizielle DGN-Farben und ihre Varianten.

Primary

Primary Dark

Primary Light

Accent

Accent Light

CSS

:root {
  --color-brand-primary: #232470;
  --color-brand-primary-dark: #1a1b55;
  --color-brand-primary-light: #3d3f9a;
  --color-brand-accent: #0ba1e2;
  --color-brand-accent-light: #e0f4fc;
}

Neutrale Farben

Slate-Skala für Texte, Hintergründe und Rahmen.

Slate 50

Slate 100

Slate 200

Slate 300

Slate 400

Slate 500

Slate 600

Slate 700

Slate 800

Slate 900

CSS

:root {
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
}

Semantische Farben

Statusfarben für Erfolg, Warnung, Fehler und Information.

Success

Warning

Error

Info

CSS

:root {
  --color-success: #16a34a;
  --color-warning: #eab308;
  --color-error: #ef4444;
  --color-info: #3b82f6;
}

Kategorien-Palette

14-Slot-Palette für inhaltliche Klassifikation — z.B. Leitlinien-Kategorien, künftige Tag-Gruppen. Eine Farbe pro Kategorie, fest per Index zugeordnet.

Wann verwenden: Kategorische Inhaltskennzeichnung — Chips, Badges, Spalten-Marker auf Listen-Items, deren Träger zu einer von wenigen, fix benannten Gruppen gehört (z.B. Leitlinien-Kategorie, später News-Themenfeld).

Nicht verwenden für: Status (→ --color-success / --color-warning / --color-error / --color-info), Markenakzente (→ --color-brand-*), Diagramme (eigene Chart-Palette wenn nötig).

Regeln: Index ist stabil — eine Kategorie behält ihre Farbe über Releases hinweg. Niemals Farben mischen oder über zwei Kategorien teilen. Dark-Mode hat eigene, in Luminanz angehobene Werte.

Category 1

Category 2

Category 3

Category 4

Category 5

Category 6

Category 7

Category 8

Category 9

Category 10

Category 11

Category 12

Category 13

Category 14

CSS

:root {
  --color-category-1: #bc744b;
  --color-category-2: #ba3b46;
  --color-category-3: #865f62;
  --color-category-4: #6b7a8f;
  --color-category-5: #ca8437;
  --color-category-6: #606c38;
  --color-category-7: #006992;
  --color-category-8: #bca24b;
  --color-category-9: #907954;
  --color-category-10: #718c65;
  --color-category-11: #3b1450;
  --color-category-12: #004346;
  --color-category-13: #987284;
  --color-category-14: #397e69;
}

Schrift

Poppins — geometrische Grotesk von Indian Type Foundry, lizenziert unter der SIL Open Font License 1.1. Self-hosted aus packages/ui/src/fonts/poppins/, keine Requests an fonts.googleapis.com zur Laufzeit (DSGVO).

Aa Bb Cc

Regular 400

Regular italic

--font-weight-regular

Medium 500

Medium italic

--font-weight-medium

SemiBold 600

SemiBold italic

--font-weight-semibold

Bold 700

Bold italic

--font-weight-bold

Self-hosted: Font-Dateien liegen im Repo unter packages/ui/src/fonts/poppins/. Geladen via next/font/local aus @repo/ui/fonts, mit font-display: swap und Preload der aktiv genutzten Gewichte.

Varianten: 400 / 500 / 600 / 700, jeweils normal + italic. Subsets latin + latin-ext — deckt deutsche Umlaute, französische Akzente und mittel-/osteuropäische Diakritika ab.

Font wechseln: Alle UI-Komponenten lesen var(--font-family-base), das wiederum var(--font-poppins) referenziert. Zum Wechsel der globalen Schrift: Dateien in src/fonts/poppins/ tauschen und die src-Liste in src/fonts/index.ts anpassen — keine Komponenten- oder Page-Änderungen nötig.

DSGVO: Null externe Schriften-Requests. Auch beim ersten Pageload werden keine IP-Adressen an Google geleakt.

CSS

/* Poppins ist self-hosted in packages/ui/src/fonts/poppins/ und wird per
   next/font/local als --font-poppins auf <html> injiziert. Kein Request an
   fonts.googleapis.com zur Laufzeit (GDPR-konform).

   Importiert wird in jedem App-Layout (apps/web, apps/admin, apps/design):

     import { poppins } from "@repo/ui/fonts"
     // …
     <html lang={locale} className={poppins.variable}>

   Varianten: 400/500/600/700, je normal + italic, Subsets latin + latin-ext.
   Lizenz: SIL Open Font License 1.1 (packages/ui/src/fonts/poppins/OFL.txt).

   Font wechseln: Dateien in src/fonts/poppins/ tauschen und src-Liste in
   src/fonts/index.ts anpassen. Das Token --font-family-base liest
   --font-poppins — Komponenten müssen nicht angefasst werden. */

Typografie

Poppins in 8 Größenstufen und 4 Gewichtungen — konsistente Hierarchie über alle Oberflächen.

Neurologie verstehen

--font-size-4xl2.25rem / 700

Fortbildungsakademie

--font-size-3xl1.875rem / 700

CME-Punkte sammeln

--font-size-2xl1.5rem / 600

Live-Webinare & Webcasts

--font-size-xl1.25rem / 600

Interaktive Lernerfolgskontrolle

--font-size-lg1.125rem / 500

Die DGN Akademie bietet hochwertige Fortbildungen.

--font-size-base1rem / 400

Zertifikate werden automatisch ausgestellt.

--font-size-sm0.875rem / 400

Zuletzt aktualisiert: 08.04.2026

--font-size-xs0.75rem / 400

CSS

:root {
  /* Poppins is loaded via @repo/ui/fonts (next/font/local) — self-hosted,
     no Google Fonts CDN. --font-poppins is injected on <html>. */
  --font-family-base: var(--font-poppins), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-size-4xl: 2.25rem;
  --font-size-3xl: 1.875rem;
  --font-size-2xl: 1.5rem;
  --font-size-xl: 1.25rem;
  --font-size-lg: 1.125rem;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

Abstände

4px-Raster als Grundlage für konsistente Abstände.

--spacing-1

4px

--spacing-2

8px

--spacing-3

12px

--spacing-4

16px

--spacing-5

20px

--spacing-6

24px

--spacing-8

32px

--spacing-10

40px

--spacing-12

48px

--spacing-16

64px

CSS

:root {
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
}

Schatten

Schatten-Abstufungen für Tiefenwirkung.

Small--shadow-sm

Medium--shadow-md

Large--shadow-lg

Extra Large--shadow-xl

CSS

:root {
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

Eckenradien

Konsistente Rundungen für Karten, Buttons und Eingabefelder.

--radius-sm4px

--radius-md8px

--radius-lg12px

--radius-full9999px

CSS

:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}