Composition Rules

Alle Seiten nutzen einen hellen Hintergrund (ce-zinc-50 / #FBFBFC). Content wird in weißen Cards (#FFFFFF) oder direkt auf der Surface platziert.

--ce-surface-muted

Dezenter Hintergrund für Code-Blöcke und gedämpfte Flächen. Light: #F3F3F3 (ce-zinc-100), Dark: #313337 (ce-zinc-800).

--ce-surface-subtle

Leicht abgesetzte Flächen wie Tabellen-Header und Hover-States. Light: #EDEEEF (ce-zinc-200), Dark: #313337 (ce-zinc-800).

Überschriften, Badges und Logo-Reihen werden direkt auf der Surface platziert — ohne Card-Container. Erzeugt Ruhe und visuelle Hierarchie. Typisch für Hero-Sections, Marken-Logos und große Headlines.

Hero-Titel

Pressura 42–54px / 500. Direkt auf Surface, kein Card-Wrapper. Großzügiges Padding (py-16 px-8) statt Card-Rahmen.

Badge / Label

Pressura Mono 12px / uppercase, tracking-wider. Kleine Tags über der Headline.

Logo-Reihe

Marken-Logos als Flat-Grid ohne Cards. opacity-60 default, hover:opacity-100.

Content wird in weißen Cards mit abgerundeten Ecken (16px), Border und Shadow organisiert — auf dem hellgrauen Seitenhintergrund. Hover verdoppelt die Shadow-Opacity.

Card Spec

background: --ce-surface-card. border: 1px solid --ce-border-default. border-radius: 16px. shadow: 0 8px 36px rgba(0,0,0,0.08) light / 0.24 dark. shadow:hover: 0.16 light / 0.36 dark. transition: 300ms ease (box-shadow).

Alle Buttons verwenden Pressura Mono. Im selben Kontext (Header, Card, Footer) haben alle Buttons dieselbe visuelle Höhe. Abweichungen (z.B. Icon-only) sind explizit dokumentiert.

Primary Default

Pressura Mono 15px / 500, py-2.5 px-5, rounded-[8px], ~40px Höhe. bg: --ce-surface-invert. Hover: --ce-surface-invert-hover. Focus: 2px outline offset 2px. Active: scale(0.98). Disabled: bg surface-muted, text text-muted.

Primary Small / Outline Small

Pressura Mono 15px / 500, py-1.5 px-3, rounded-[8px], ~32px Höhe. Header-Buttons und Footer-Pills nutzen Small. Outline-Variante: border --ce-border-strong, transparent bg, text: --ce-text-secondary.

Primary Compact / Outline Compact

Pressura Mono 12px / 500, py-1 px-2.5, rounded-[6px], ~24px Höhe. Für enge Kontexte wie Filter-Tags.

Einzige Icon-Bibliothek: Remixicon. Keine anderen Libraries, keine Emoji. Default-Stil: line (nicht fill). Ausnahme: Social-Icons (Facebook = fill). Farbe: currentColor (erbt Textfarbe).

SVG-Einbindung

viewBox="0 0 24 24" fill="currentColor" width="[size]" height="[size]". Keine stroke-Icons, immer fill mit currentColor. Größen: 14px (inline/USP), 16px (Buttons), 18px (Footer Social), 24px (Mobile Nav).

4px Base Grid. Alle Abstände sind Vielfache von 4px. Skala: xs(4) sm(8) md(12) base(16) lg(20) xl(24) 2xl(32) 3xl(48) 4xl(64). Tailwind-Mapping: gap-1 bis gap-16, p-1 bis p-16.

Kontexte

xs(4): Icon-Abstand minimal. sm(8): Button-Icon-Gap. md(12): Eng verbundene Elemente. base(16): Standard-Padding Mobile, Card kompakt. lg(20): Card-Padding Standard. xl(24): Header-Padding Desktop. 2xl(32): Section-Trennung. 3xl(48): Große Sections. 4xl(64): Abstand zwischen Section-Blöcken.

Drei Font-Familien, klar getrennt: Pressura (Headings, Navigation, Display), Pressura Mono (Buttons, Labels, UI, Preise), Inter (Body, Beschreibungen, Fließtext).

Pressura

Page Title H1: 54px/500 (mob: 28px). Subtitle: 28px/300 (mob: 19px). Section H2: 24px/500. Card Title H3: 18px/500. Card Title Small: 16px/500. Nav Link: 15px/300. Footer Heading: 16px/500.

Pressura Mono

Button/UI: 15px/500. Button Outline/Small: 13px/400. Label/Caption: 12px/400. Brand Badge: 11px/400, uppercase, tracking-wider. Preis: 14px/400. Copyright: 12px/400.

Inter

Body: 16px/400, line-height 24px. Body Small: 14px/400, line-height 22px. Footer Link: 14px/400, line-height 28px.

Alle Farben werden über semantische Tokens referenziert, nie über Palette-Werte (ce-zinc-*) direkt. Die Tokens tauschen im Dark Mode automatisch ihre Werte.

Mobile-first. Zwei Haupt-Breakpoints (md, xl) plus Container Queries für Grids. Kein lg-Breakpoint im aktuellen Design.

Mobile (< 768px)

Header 56px, Logo h-16px, Hamburger-Menu, Footer 2-col Grid, px-4.

md (≥ 768px)

Header 80px, Logo w-190px, Desktop-Nav sichtbar, Footer 3-col Grid, px-6/px-8.

xl (≥ 1280px)

Footer 6-col Grid (4 Links + Contact col-span-2). Max-widths: Header 1140px, Footer 1200px.

Content-Container nutzen mx-auto mit max-width. Padding ist kontextabhängig: Header px-4/px-6, Footer px-6/px-8, Cards p-4/p-5, Section-Abstand mb-16 (64px).

Border-Radius

6px: Compact Buttons, Nav-Hover. 8px (--radius-sm): Buttons, Contact Pills, Code-Blöcke. 12px: Cards in Showcases. 16px (--radius-lg): Bento Cards, Spec-Tabellen. 9999px (--radius-full): Badges, runde Elemente.

Dark Mode wird via .dark-Klasse auf <html> aktiviert. Alle semantischen Tokens tauschen ihre Werte. Kein Element darf Palette-Werte direkt verwenden.

Besondere Elemente

Bilder: Keine Invertierung. Logos/Icons (monochrom): --ce-logo-filter: none → invert(1). Shadows: Erhöhte Opacity (0.08 → 0.24 card, 0.16 → 0.36 hover). Layout: Keine invertierten Sektionen — --ce-surface-invert nur für Buttons und Tags. Formulare: bg → surface-muted, text → text-heading. Code-Blöcke: bg → surface-card.

Regel

Alle Buttons in einer Zeile (Header, Card-Footer, Form-Actions) nutzen dieselbe Size-Variante. Wenn einer Default ist, sind alle Default. Kein Mix von Default und Compact im selben Kontext.

Default (~40px)

Font 15px/500, padding py-2.5 px-5, radius 8px. Fuer primaere Aktionen (Add to Cart, Submit).

Small (~32px)

Font 15px/500, padding py-1.5 px-3, radius 8px. Fuer Header- und Card-Aktionen.

Compact (~24px)

Font 12px/500, padding py-1 px-2.5, radius 6px. Fuer Inline-Aktionen und Tag-aehnliche Buttons.

Bibliothek

Einzige Quelle: Remixicon (remixicon.com). Keine anderen Libraries, keine Emoji, keine eigenen SVG-Pfade. Default-Stil: line (nicht fill). Ausnahme: Social-Icons (Facebook = fill).

Groessen

14px: Inline Text, USP Bar Items. 16px: Buttons. 18px: Footer Social Icons. 24px: Mobile Navigation Hamburger/Close.

SVG

Immer viewBox="0 0 24 24" fill="currentColor". Farbe erbt vom Parent via currentColor.

Erlaubte Werte

xs=4, sm=8, md=12, base=16, lg=20, xl=24, 2xl=32, 3xl=48, 4xl=64. Keine anderen Werte — nie 5, 7, 10, 15, 18, 22, 30px.

Konsistenz-Regel

Innerhalb einer Komponente: konsistente Stufen. Nicht 8px Gap hier und 12px Gap daneben ohne Grund. Wenn gap-sm (8px), dann durchgehend — oder bewusst eine Stufe hoeher/niedriger.

--ce-shadow-card

Light: 0px 8px 36px rgba(0,0,0,0.08). Dark: 0px 8px 36px rgba(0,0,0,0.24). Cards Default-Shadow.

--ce-shadow-card-hover

Light: 0px 8px 36px rgba(0,0,0,0.16). Dark: 0px 8px 36px rgba(0,0,0,0.36). Cards Hover-Shadow.

--ce-shadow-elevated

Light: 0px 0px 31px rgba(183,183,183,0.5). Dark: 0px 0px 31px rgba(0,0,0,0.4). Erhöhte Elemente.

Standard-Transition: 200ms. Alle interaktiven Elemente nutzen transition-colors oder transition-all. Keine abweichenden Timings ohne expliziten Grund.

Kontext-Zuordnung

Buttons, Links, Nav: transition-colors 200ms. Cards (Shadow): transition-shadow 200ms. Active Press: transform scale(0.98) 200ms. Sidebar Collapse: transition-transform 200ms.