Design System

Grundprinzipien, Token-System, Typografie und Layout-Regeln des CP Component Systems.

Design-Prinzipien

Semantisch

HTML-Struktur transportiert Bedeutung. <nav>, <main>, <article>, <section> statt nur <div>. Korrekte Heading-Hierarchie.

Tokenisiert

Alle Farben, Abstande und Größen sind Tokens. Kein Hardcoding. Ein Brand-Wechsel = eine Datei ändern.

Fluid

Typografie und Spacing skalieren mit dem Viewport via clamp(). Keine festen Breakpoint-Sprünge.

Responsive

Container Queries statt Media Queries wo möglich. Components passen sich ihrem Container an, nicht dem Viewport.

Accessible

WCAG 2.1 AA von Anfang an. Focus-Management, Keyboard-Navigation, Screen-Reader-Support in jedem Component.

Anpassbar

Components gehören dem Projekt. Kein Vendor-Lock-in. Shadcn-Philosophie: kopieren, anpassen, besitzen.

Token-System

Farb-Tokens (OKLCH)

Alle Farben nutzen den OKLCH-Farbraum für perceptuell gleichmäßige Farben. Vorteil: Lightness-Änderungen sehen natürlich aus.

@theme {
  /* Syntax: oklch(Lightness Chroma Hue) */
  --color-brand-primary: oklch(62% 0.17 230);      /* Blau */
  --color-brand-primary-hover: oklch(52% 0.17 230); /* Dunkler */
  --color-brand-secondary: oklch(48% 0.18 155);     /* Grün */

  /* Nur Lightness ändern = gleicher Farbton, heller/dunkler */
}

Spacing-Tokens (Fluid)

Abstande skalieren fluid zwischen Mobil und Desktop:

/* Base: clamp(2.25rem, 1rem + 2vw, 4rem) */
--spacing-space-xs: 0.5x Base   /* ~1.125rem - 2rem */
--spacing-space-sm: 1x Base     /* ~2.25rem - 4rem */
--spacing-space-md: 1.5x Base   /* ~3.375rem - 6rem */
--spacing-space-lg: 2x Base     /* ~4.5rem - 8rem */
--spacing-space-xl: 3x Base     /* ~6.75rem - 12rem */
--spacing-space-2xl: 4x Base    /* ~9rem - 16rem */

Content-Grid

Das Layout basiert auf einem Content-Grid mit benannten Breiten-Stufen:

content max 55rem — Fließtext, Formulare

breakout max 68.75rem — Cards, Teaser

wide max 83.125rem — Galerien, breite Grids

ultra-wide max 97.5rem — Sonderfaelle

Grid-System

auto-grid

Flexibel: Spalten passen sich automatisch an die verfügbare Breite an.

<div class="auto-grid" data-cols="3">
  <div>Spalte</div>
  <div>Spalte</div>
  <div>Spalte</div>
</div>

Nutzen für: Cards, Teaser, Feature-Listen

fixed-grid

Exakt: Definierte Spaltenzahl mit Container-Query-Breakpoints.

<div class="fixed-grid" data-cols="3">
  <div>Spalte</div>
  <div>Spalte</div>
  <div>Spalte</div>
</div>

Nutzen für: Praezise Layouts, Statistiken

Typografie

Fluid Typography mit clamp() und optionalem Container-Query-Support:

text-wrap: balance auf Headings (gleichmäßige Zeilenumbrueche)
text-wrap: pretty auf Paragraphen (vermeidet Hurenloser)
hanging-punctuation: first last auf <html> (typografisch korrekte Anführungszeichen)
overflow-wrap: break-word auf allen Headings (keine Überlappung)

Moderne CSS Features

Feature	Status	Verwendung
Container Queries	Aktiv	Grid-Breakpoints, responsive Components
CSS Nesting	Aktiv	Component-interne Styles
OKLCH Farben	Aktiv	Alle Brand-Tokens
@starting-style	Aktiv	Dialog/Lightbox Entry-Animation
:has() Selector	Aktiv	Card Focus-Ring
interpolate-size	Aktiv	Smooth height-Transitionen
Native <dialog>	Aktiv	Dialog, Gallery Lightbox
Native <details>	Aktiv	Accordion
Scroll-Driven Animations	Geplant	Parallax, Progress-Bars
Popover API	Aktiv	CustomSelect, DatePicker, Navigation Dropdowns, Tooltips
Anchor Positioning	Aktiv	Popovers relativ zu Triggern (CustomSelect, DatePicker)