Zum Hauptinhalt springen
Design-System v1

Visuelle Sprache

Tokens, Komponenten und Patterns der Keil-Website. Diese Seite ist noindex und dient als Brand-Review-Vorlage.

12
Brand-Farben
14
Typo-Tokens
9
Status-Stufen
11
Use-Case-Props
§2 Farben

Brand-Palette

Vier Token-Familien als Single Source of Truth in src/styles/tokens.css. Tailwind-Klassen referenzieren jede Farbe via rgb(var(--color-X-rgb) / <alpha-value>) für Opacity-Modifier.

Primary

Marken-Hintergrund: Header, Footer, dunkle Sektionen.

primary

#0f2b46

var(--color-primary)

Header, Footer, Hero-dark

weiß: 14.44:1 AAA

primary.light

#1a3d5c

var(--color-primary-light)

Sub-Sektionen, Mid-Stop

weiß: 11.25:1 AAA

primary.dark

#091e33

var(--color-primary-dark)

Top-Bar, Mobile-Menü

weiß: 16.87:1 AAA

Accent

Logo-Familie aus Variante C — Marken-Akzent in drei Stufen.

accent

#006288

var(--color-accent)

CTAs, Section-Labels, Body-Links

weiß: 6.77:1 AA

accent.mid

#5290b5

var(--color-accent-mid)

Akzentlinien, sekundäre Highlights

AA-Large only — nur Headlines

accent.light

#4fadc9

var(--color-accent-light)

Akzent auf primary-Grund

auf primary: 5.61:1 AA

accent.dark

#004e6b

var(--color-accent-dark)

Hover auf accent

weiß: 9.12:1 AAA

Surface

Helle Sektions-Hintergründe, alternierend mit Weiß.

surface

#f8fafc

var(--color-surface)

Standard-Hellsektion

surface.warm

#f1f5f9

var(--color-surface-warm)

Über-uns-Sektion

Text

Drei Stufen für Body, Sekundärtext und Headlines.

txt

#334155

var(--color-txt)

Standard-Body

auf weiß: 10.35:1 AAA

txt.light

#64748b

var(--color-txt-light)

Sekundärtext

auf weiß: 4.76:1 AA

txt.dark

#0f172a

var(--color-txt-dark)

Headlines auf hell

auf weiß: 17.85:1 AAA

§3 Status

Status-Farben mit WCAG-Hinweis

Tailwind-Standard (green-600/700, red-500/700, amber-600/700). Bewusste Entscheidung — Keil hat keine markeneigenen Status-Farben. Die .dark-Subtöne sind die WCAG-AA-konformen Versionen für CTAs / Pills mit weißer Schrift.

Vollständige Kontrast-Tabelle: 02-findings.md §2.1.2.

success

DEFAULT für Indicator-Dots / Borders. .dark für Pills/CTAs mit weißer Schrift.

success

#059669

Live-Indicator-Dot

weiß: 3.77:1 AA-Large

success.dark

#15803d

CTA / Pill mit weißer Schrift

weiß: 5.02:1 AA

danger

DEFAULT für Akzent-Borders. .dark für CTAs (Header-Fernwartung-Button nutzt bereits red-700).

danger

#ef4444

Akzent-Border, Fernwartung-Indicator

weiß: 3.76:1 AA-Large

danger.dark

#b91c1c

CTA / Pill mit weißer Schrift

weiß: 6.47:1 AA

warn

DEFAULT für Hinweis-Borders. .dark für Pills mit dunklem Text auf bg-warn/10 (siehe Pain-Solutions-Eyebrow).

warn

#d97706

Border / Indicator

weiß: 3.19:1 AA-Large

warn.dark

#b45309

Eyebrow auf bg-warn/10 (WCAG-Fix Etappe 4d)

weiß: 5.02:1 AA

field

Digiholz-Theme — eigener Akzent-Token. .light für Pill-Hintergrund, .dark für Pill-Text.

field

#16a34a

Digiholz-Akzent

weiß: 3.30:1 AA-Large

field.light

#dcfce7

Pill-Hintergrund

auf field-dark: 4.57:1 AA

field.dark

#15803d

CTA / Pill mit weißer Schrift

weiß: 5.02:1 AA

§4 Typografie

Schriftskala

14 Tokens für Headlines, Body, Buttons und Mikro-Texte. Inter Variable als Sans, JetBrains Mono Variable für Mono-Akzente. Responsives Pattern: text-h?-sm md:text-h?.

Ihre IT. Unser Handwerk.
text-h1 2.75rem (44px) lh 1.1 / w 800
Ihre IT. Unser Handwerk.
text-h1-sm 2rem (32px) lh 1.15 / w 800
Ihre IT. Unser Handwerk.
text-h2 2.125rem (34px) lh 1.15 / w 700
Ihre IT. Unser Handwerk.
text-h2-sm 1.625rem (26px) lh 1.2 / w 700
Ihre IT. Unser Handwerk.
text-h3 1.25rem (20px) lh 1.3 / w 700
Ihre IT. Unser Handwerk.
text-h3-sm 1.125rem (18px) lh 1.35 / w 700
Ihre IT. Unser Handwerk.
text-h4 1.125rem (18px) lh 1.35 / w 600
Ihre IT. Unser Handwerk.
text-h4-sm 1rem (16px) lh 1.4 / w 600
IT made in Germany — bewährte Lösungen für Mittelstand und Handwerk.
text-body-lg 1.125rem (18px) lh 1.7
IT made in Germany — bewährte Lösungen für Mittelstand und Handwerk.
text-body 1rem (16px) lh 1.7
IT made in Germany — bewährte Lösungen für Mittelstand und Handwerk.
text-small 0.875rem (14px) lh 1.5
IT-SERVICE BREMEN
text-btn 1rem (16px) lh 1 / w 600
IT-SERVICE BREMEN
text-label 0.75rem (12px) lh 1 / w 600 / ls .2em
IT-SERVICE BREMEN
text-tiny 0.625rem (10px) lh 1

Responsive-Pattern: Bei Headlines wird auf Mobile der -sm-Token gesetzt, ab md: der Default. Beispiel: text-h1-sm md:text-h1.

§5 Komponenten

Kern-Bausteine

card-light-Familie, Buttons, Pills und Section-Strukturen. Jede Komponente folgt der Token-Skala — nichts ist hartcodiert.

card-light-Familie

card-light

Standard-Karte

bg-white + border-gray-200 + shadow-card-soft + rounded-2xl

card-light --surface

Surface-Variante

Variante mit bg-surface statt weiß

card-light --warm

Warm-Variante

bg-surface-warm — Über-uns-Sektion

Buttons

Status-Buttons: immer .dark-Token, nie DEFAULT mit weißer Schrift (sonst nur AA-Large statt AA-Normal).

Pills / Chips

Standard-Akzent Digiholz-Pill Warn-Pill (WCAG-konform via warn-dark) Success-Pill (Indicator)

FAQ-Item

Single Source of Truth ist src/styles/tokens.css. Tailwind referenziert die CSS-Variablen via rgb(var(--color-X-rgb) / <alpha-value>).
§6 Akzent-Linien

accent-mid (MID-2)

accent.mid = #5290b5 (Logo-Mittelton). Sicher für Akzentlinien, weil kein Text-Kontrast involviert ist.

MID-2.3 — Section-Divider

Schmaler 24×1 px Trennstrich, gradientbasiert mit accent-mid in der Mitte.

MID-2.4 — Eyebrow-Underline

Kernfunktionen

10×2 px Underline unter dem Eyebrow.

MID-2.1 — bereits aktiv (index.astro:178)

12×2 px Linie unter „Informationstechnologie" im IT-Made-in-Germany-Block.

MID-2.5 — Card-Top-Akzent

Hervorgehobene Karte

2 px Top-Border in accent-mid statt accent — sanfter, optisch weniger fordernd.

§7 Use-Case-Properties

Lokale CSS-Variablen

Werte mit semantisch eindeutigem Verwendungsort, die nicht Teil der Brand-Tokens sind. Eigener Namespace, lokal definiert in tokens.css.

Deutschlandflagge

--flag-de-black: #000000

--flag-de-red: #dd0000

--flag-de-gold: #ffcc00

Verwendung: Startseite „IT made in Germany"-Block. Extern normierte Brand-Farben, kein Keil-Bezug.

Digiholz-Surface-Gradient

--digiholz-bg-from: #f0fdf4 (green-50)

--digiholz-bg-to: var(--color-surface)

Field-Theme-spezifischer Hintergrund auf der Digiholz-Service-Seite.

Hardware-Cool-Gradient

--hw-cool-1: var(--color-surface)

--hw-cool-2: #edf2f7

--hw-cool-3: #e2ecf4

--hw-cool-4: #d6e3ef

Dekorative Bluish-Greys, Hardware-Service-Seite.

Field-Eyebrow-On-Primary

Kernfunktionen

--field-eyebrow-on-primary: #4ade80 (green-400)

Inline-Override für Field-Theme-Eyebrow auf primary-Hintergrund. field-light wäre als Akzent zu blass.

Stats-Bar-Emphasis

26.4 Mrd. €
Schäden 2023

--stats-bar-emphasis: #ef4444

40×3 px Linie über stats-bar-item auf der IT-Sicherheits-Seite. Eigene Property statt var(--color-danger), damit semantisch entkoppelt.

§8 Patterns

Konventionen

Die wichtigsten Wiederverwendungs-Regeln. Vollständige Doku in CLAUDE.md Abschnitt „Design-Konventionen".

card-light auf hellen Sektionen

Standard-Karte auf bg-white oder bg-surface nutzt immer:

bg-white border border-gray-200 rounded-2xl shadow-card-soft

Aliase: .card-light, .card-light--surface, .card-light--warm.

Eyebrow-Pattern

Section-Labels über H2-Headlines:

font-mono text-accent text-label uppercase

Auf dunklen Sektionen: text-accent-light (5.61:1 AA).

Responsive Type

Headlines wechseln per Breakpoint:

text-h1-sm md:text-h1

Gilt für H1, H2, H3, H4 jeweils mit -sm-Pendant.

Status-CTAs WCAG-konform

Pills/Buttons mit weißer Schrift auf Status-Hintergrund: immer .dark-Token:

bg-success-dark text-white

DEFAULT-Status-Token nur für Indicator-Dots, Borders oder Großtext.

Akzent-Linien

Section-Trenner und sekundäre Akzente:

bg-accent-mid (sekundär)
bg-accent (primär, voll)

accent-mid ist visuell gedämpfter als accent — passt für Trennlinien, Card-Top-Borders.

Hinweis

Diese Styleguide-Seite konsumiert dieselben Tokens wie alle anderen Seiten. Wenn ein Token in tokens.css geändert wird, ändert sich die Darstellung hier automatisch mit — die Werte sind nicht hartcodiert.