11 · Anwendung

Design-Tokens

Die Marke als benannte Variablen — direkt in Code übernehmbar, eindeutig referenzierbar. Ein Wert ändern, und alles zieht nach.

So werden Tokens genutzt

Im Web als CSS-Custom-Properties auf :root. In Office als zentral hinterlegte Designfarben & Formatvorlagen mit denselben Werten.

/* ICOS Design Tokens — Auszug */
:root {
  /* Marke */
  --icos-blue:        #1E4975;
  --icos-orange:      #FF940A;
  --icos-ink:         #191919;

  /* Status */
  --icos-success:     #1E8E57;
  --icos-error:       #D23B2E;

  /* Typo */
  --icos-font:        "Open Sans", Arial, sans-serif;

  /* Form & Tiefe */
  --icos-radius:      14px;
  --icos-shadow:      0 4px 16px rgba(25,45,77,.07);
}

Farb-Tokens

Marke & Status

--icos-blue#1E4975

--icos-orange#FF940A

--icos-ink#191919

--icos-success#1E8E57

--icos-error#D23B2E

--icos-blue-10#E9EDF1

Die vollständigen Skalen (Blau / Orange / Grau, je 100 → 10 %) stehen im Kapitel Farbe. Token-Schema: --icos-{farbe}-{stufe}.

Typografie-Tokens

Token	Wert	Einsatz
--font-sans	"Open Sans", Arial	alle Texte
--fs-display	42–72 px / 700	Hero
--fs-h1	32–48 px / 700	Seitentitel
--fs-h2	24–32 px / 700	Abschnitt
--fs-body	17 px / 400 · LH 1.6	Fließtext
--fs-sm	15 px	sekundär

Abstände

4-px-Raster — ein konsistenter Rhythmus für Abstände und Layout.

1 · 4

2 · 8

4 · 16

5 · 24

6 · 32

7 · 48

8 · 64

Radien & Schatten

Eckenradien

pill

Schatten

base

Token → Office-Mapping

Damit Web und Office identisch aussehen: dieselben Werte als Designfarben und Formatvorlagen hinterlegen.

Token	Web (CSS)	Office (Design / Vorlage)
Primär	--icos-blue	Designfarbe „Akzent 1" = #1E4975
Akzent	--icos-orange	Designfarbe „Akzent 2" = #FF940A
Text	--icos-ink	Designfarbe „Text 1" = #191919
Schrift	--font-sans	Designschrift = Arial
Überschrift	h1 / h2	Formatvorlage „Überschrift 1/2" in Blau
Tabellenkopf	--icos-blue	Tabellenformat „ICOS" · Kopf Blau

Ein konsistentes System — bereit, immer wieder sauber abgeleitet zu werden.

ICOS Brand & Style Guide · v2.0 · 5. Juni 2026