{ "name": "Bridgemaker Design Tokens", "version": "2.1.0", "updated": "2026-07-14", "source": "bridgemaker-website/src/app/globals.css (Stand Juli 2026)", "language": "de", "font": { "sans": "\"Inter\", -apple-system, BlinkMacSystemFont, sans-serif", "display": "\"Inter\", -apple-system, BlinkMacSystemFont, sans-serif", "mono": "\"JetBrains Mono\", \"Menlo\", monospace", "note": "Display = Inter. Kein separates Inter Display (v2-Entscheidung). Mono ausschließlich für echte Code-Darstellung und Platzhalter-Captions — nie für UI-Text (Stand Website 2026-07-16)." }, "type": { "note": "Fluide Stufen via clamp(min, vw, max). Tracking dort in em, fixe Stufen in px. Nur diese Klassen verwenden — nie ad-hoc.", "display-xl": { "size": "clamp(64px, 9vw, 128px)", "weight": 400, "lineHeight": 1.0, "tracking": "-0.03em", "use": "Monumentaler Hero, selten" }, "display-l": { "size": "clamp(52px, 7.5vw, 96px)", "weight": 500, "lineHeight": 1.05, "tracking": "-0.03em", "use": "Große Kampagnen-Statements" }, "display": { "size": "clamp(40px, 5.5vw, 64px)", "weight": 600, "lineHeight": 1.1, "tracking": "-0.03em", "use": "Standard-Hero" }, "h1": { "size": "clamp(32px, 4.2vw, 48px)", "weight": 600, "lineHeight": 1.15, "tracking": "-0.025em", "use": "Seitentitel" }, "h2": { "size": "clamp(26px, 3vw, 32px)", "weight": 600, "lineHeight": 1.25, "tracking": "-0.025em", "use": "Sektions-Headlines, max-w-xl" }, "stat": { "size": "clamp(28px, 3vw, 36px)", "weight": 500, "lineHeight": 1.1, "tracking": "-0.025em", "use": "Kennzahlen" }, "h3": { "size": "24px", "weight": 500, "lineHeight": 1.3, "tracking": "-0.5px", "use": "Zwischenüberschriften" }, "h4": { "size": "20px", "weight": 500, "lineHeight": 1.4, "tracking": "-0.3px", "use": "Karten-Titel" }, "card-title": { "size": "18px", "weight": 600, "lineHeight": 1.45, "tracking": "-0.3px", "use": "Kleine Karten-/Box-Headlines" }, "h5": { "size": "16px", "weight": 500, "lineHeight": 1.45, "tracking": "-0.2px", "use": "Kleine Überschriften" }, "body-l": { "size": "18px", "weight": 400, "lineHeight": 1.55, "use": "Lead-Absätze, max-w-2xl" }, "body": { "size": "16px", "weight": 400, "lineHeight": 1.6, "use": "Fließtext" }, "nav": { "size": "15px", "weight": 500, "lineHeight": 1.4, "use": "Nav-Links & Nav-CTA" }, "small": { "size": "14px", "weight": 400, "lineHeight": 1.5, "use": "Meta, sekundäre UI" }, "caption": { "size": "12px", "weight": 400, "lineHeight": 1.4, "use": "Labels, Zeitstempel" }, "eyebrow": { "size": "12px", "weight": 500, "lineHeight": 1.4, "tracking": "0.10em", "transform": "uppercase", "use": "Kicker über Headlines" }, "micro": { "size": "10px", "weight": 400, "lineHeight": 1.4, "use": "Kleinstinformationen" } }, "color": { "purple": { "base": { "value": "#6B4A94", "role": "primary" }, "deep-plum": { "value": "#4A2D6B" }, "lavender": { "value": "#9070B8" }, "soft-purple": { "value": "#C4B1DC" }, "purple-tint": { "value": "#EDE3F5" }, "lavender-dark": { "value": "#AF94D2", "role": "on-dark primary — nie rohes Purple auf Dunkel" } }, "berry": { "base": { "value": "#B84A6F", "role": "accent" }, "deep-berry": { "value": "#8A3050" }, "dusty-rose": { "value": "#D4809A" }, "rose-tint": { "value": "#F5E0E8" } }, "teal": { "base": { "value": "#3A9E97", "role": "secondary" }, "deep-teal": { "value": "#1D6B66" }, "soft-teal": { "value": "#7EC4BE" }, "teal-tint": { "value": "#E0F2F0" } }, "neutral": { "charcoal": { "value": "#1C1C1E", "role": "Vordergrund" }, "dark": { "value": "#3D3D3A" }, "mid": { "value": "#6B6B65", "role": "Sekundärtext" }, "soft": { "value": "#A8A69E", "role": "Fließtext auf Dunkel" }, "light": { "value": "#918F87", "role": "Eyebrows" }, "off-white": { "value": "#F5F1EB", "role": "Grundton der Seite" }, "white": { "value": "#FFFFFF", "role": "Sektionsfläche im Flächenrhythmus" } }, "surface": { "stone": { "value": "#E8E5DF", "role": "Default" }, "mauve": { "value": "#E3E0E8", "role": "Purple-getönte Sektion" }, "sage": { "value": "#DDE4E0", "role": "Tech/Security" }, "sand": { "value": "#E5E0D8", "role": "Ventures" }, "mid-stone": { "value": "#C5C0B8", "role": "Rand-/Trennlinien-Wert" }, "dark": { "value": "#333330", "role": "Dunkler Block in heller Seite" } } }, "space": { "1": 4, "2": 8, "3": 12, "4": 16, "5": 20, "6": 24, "8": 32, "10": 40, "12": 48, "16": 64, "20": 80, "24": 96, "30": 120, "note": "8px-Raster, 4px als halbe Stufe. Sektionen: py 96px." }, "radius": { "sm": 8, "md": 12, "lg": 16, "xl": 20, "2xl": 28, "pill": 999, "note": "md = Inputs (nie Pill), xl = Karten/Bilder, pill = Buttons/Chips, immer." }, "shadow": { "xs": "0 1px 2px rgba(28,28,30,0.04)", "sm": "0 2px 8px rgba(28,28,30,0.05)", "md": "0 6px 24px rgba(28,28,30,0.08)", "lg": "0 16px 48px rgba(28,28,30,0.12)", "pop": "0 18px 44px -18px rgba(28,28,30,0.45)", "card-clean": "inset 0 0 0 1px rgba(28,28,30,0.06), 0 1px 2px rgba(28,28,30,0.03), 0 10px 24px -18px rgba(28,28,30,0.10)", "card-elevated": "inset 0 0 0 1px rgba(28,28,30,0.06), 0 1px 2px rgba(28,28,30,0.04), 0 10px 24px -18px rgba(28,28,30,0.12)", "note": "Karten sitzen auf der Seite, sie fliegen nicht. pop = max. eine Featured-Box pro Seite." }, "border": { "hairline": "1px solid rgba(28,28,30,0.06)", "subtle": "1px solid #C5C0B8", "strong": "1.5px solid #6B4A94", "usage": { "subtle": "Default für Trennlinien, Umriss-Boxen, Tabellenlinien.", "hairline": "Nur weiche innere Unterteilungen; Karten tragen ihre Haarlinie als Inset-Ring im Schatten-Rezept, nicht als border.", "strong": "Fokusringe, aktive Umrisse, Sekundär-Button-Kontur." } }, "motion": { "duration": { "fast": "150ms", "base": "240ms", "slow": "400ms" }, "ease": { "out": "cubic-bezier(0.22, 1, 0.36, 1)", "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)", "note": "Swaps & Ambient-Loops: Keyword ease-in-out. Spring nur für verspielte Mikro-Interaktionen." }, "kasaneDrift": { "standard": "14s", "bold": "9s" }, "rules": [ "Höchstens ein Motion-Moment pro Sektion.", "prefers-reduced-motion ist Pflicht.", "Kein Scroll-Jacking." ] }, "container": { "max": 1200, "padMobile": 16, "padDesktop": 32, "sectionPadY": 96 }, "print": { "file": "print-tokens.css", "layerNote": "Layer auf tokens.css — lädt NACH tokens.css. Gilt für DIN A4 Hochformat (Broschüren, Bookazines, Reports).", "validatedBy": "Bookazine v1, Druck: Pinguin Druck Berlin (2026)", "format": { "pageW": "210mm", "pageH": "297mm", "bleedEdge": "2mm" }, "margins": { "x": "16mm", "top": "14mm", "bottom": "18mm" }, "grid": { "cols": 12, "gutter": "4mm", "liveW": "178mm", "liveH": "265mm" }, "baseline": "14pt", "gaps": { "numeralHead": "18mm", "eyebrowHead": "12mm", "headBody": "7mm", "module": "14mm", "section": "22mm" }, "rules": { "schrift": "Display-Grade im Print in Inter Display (--font-display-Override im Layer; Webfont-Name 'InterDisplay' via rsms.me/inter, lokal 'Inter Display', Fallback Inter). Body/UI Inter; Folio, Running Header und TOC-Nummern ebenfalls Inter — Mono nur für Code-Darstellung und Platzhalter-Captions (seit 2026-07-16).", "einheiten": "Format & Spacing in mm, Typografie in pt — nie px im Print.", "linien": "Hairline physisch 0.4pt, Standard 0.6pt — nicht 1px.", "kasane": "Im Druck die pp-kasane-Varianten mit +15 % Sättigung nutzen (Naturpapier dämpft) — Bildschirm-Rezepte nie unverändert drucken.", "abstaende": "Die zwei häufigsten Print-Fehler: Großziffer→Headline 18mm, Eyebrow→Headline 12mm." } }, "gradients": { "note": "Rezepte in tokens.css. Systematik: Familienfarben als radiale Ellipsen über Basis; ein Thema = eine Farbwelt.", "kasane-hero": "Light-Kasane für Seiten-Heroes", "kasane-cta": "Dark-Kasane für dunkle CTA-Flächen und Mobile-Menü", "contact-cta": "Triade auf Deep-Plum, Abschluss-CTA", "commercial-os": "Sattes Farbband für weiße Typo (Featured/Produkt)", "kasane-plum": "Vollfarbige Plum-Moment-Fläche", "kasane-band-sage/mauve": "Weiche Kapitelbänder, laufen in Off-White aus", "hebel-*": "Themen-Karten-Visuals (kundenschnittstelle/vertrieb/neue-felder/ventures)", "hebel-wash-*": "Offene full-bleed Farbbänder", "case-visual-1..6": "Rotierende Branchen-Tonalitäten", "case-*": "Case-Karten pro Hebel", "stimme-plum/teal": "Dunkle Zitat-Karten (mit grain-photo-screen)", "yt-thumb-*, youtube-preview": "Media-Platzhalter auf dunklen Karten", "stripes-diagonal": "Grafische Streifen-Platzhalter" }, "rules": { "flaechen": "Off-White (#F5F1EB) ist der Grundton (body). Reines Weiß ist Sektionsfläche im Flächenrhythmus (Weiß ↔ Off-White ↔ Surfaces), Abgrenzung über border-surface-stone-Haarlinien. Ganze Seiten in sterilem Weiß: nein.", "logo": "Haupt-Markenpräsenz immer die Wortmarke (im 64px-Header 20px hoch, weiße Variante auf Dunkel). B—M-Monogramm nur Favicon/App-Icon/Avatar/Foto-Stempel — nie im Header.", "buttons": "Nur Pill (border-radius 999px). Hover = Füllungswechsel innerhalb der Markenfamilie (Charcoal→Deep-Plum, hell→Soft-Purple), nie nach Schwarz.", "cards": "Karten sitzen: Inset-Haarlinie + nahe Elevation (card-clean/card-elevated). Verlinkte Karten liften auf Hover (-4px + shadow-md). Farbige Akzent-Kanten (border-left-Callouts) sind verboten.", "formulare": "Outline-Inputs: radius-md (nie Pill), Ruhezustand transparent, weiß erst bei Fokus (+ Purple-Rand und -Ring). Labels über dem Feld.", "typografie": "Nur type-*-Klassen, nie ad-hoc. Große Stufen fluide via clamp. Größer = leichter.", "glass": "Glas nur, wo etwas zu frosten ist (Gradient/Bild dahinter). Glas-Karten und Inhalte darunter: kein filter/blend-mode (Compositing-Falle). Tailwind v4 strippt handgeschriebenes backdrop-filter — Utilities am Element nutzen.", "links": "Hover-Unterstreichung nur bei reinen Textlinks. Nie auf Buttons, Karten-Links, Nav.", "kasane": "Nur Hero-/Moment-Sektionen, max. eine pro Seite. Nie hinter Fließtext.", "onDark": "Auf Charcoal: Headlines off-white, Fließtext soft, Links/Sekundär-Buttons lavender-dark — nie rohes Purple.", "raster": "8px-Raster verbindlich (4px halbe Stufe). Headlines max-w-xl, Leads max-w-2xl, 1200px-Container.", "emoji": "Nicht als Bildersatz oder in Headlines.", "illustrationen": "Nie SVG-Illustrationen erfinden. Platzhalter-Blöcke nutzen und echte Assets anfordern.", "unklarheit": "Wenn unklar: FRAGEN. Nie improvisieren." } }