/* ============================================================ marcelalexander.ai — Design System colors_and_type.css "Geen woorden maar daden." This file is the source of truth for color + type tokens. - 5 colors (Crème, Nacht, Terra, Salie, Lei) - Type: Inter for everything. Heavy/Black for display. (Inter is a free Google Fonts substitute for the wordmark's grotesque feel; flag for user if exact match exists.) ============================================================ */ /* ---------- Webfonts ---------- Syne is the brand DISPLAY font (statements, headlines — its diagonal terminals and quirky character are the visible voice). DM Sans is the brand BODY + UI font (humanist grotesque, very legible at small sizes; also the closest match for the static wordmark PNG). JetBrains Mono is the brand mono. All three self-hosted from /fonts. */ /* Syne — display family (400-800 supplied) */ @font-face { font-family: "Syne"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/Syne-Regular.ttf") format("truetype"); } @font-face { font-family: "Syne"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/Syne-Medium.ttf") format("truetype"); } @font-face { font-family: "Syne"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/Syne-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Syne"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/Syne-Bold.ttf") format("truetype"); } @font-face { font-family: "Syne"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/Syne-ExtraBold.ttf") format("truetype"); } /* Syne tops out at 800 — fall back 900 requests to ExtraBold to avoid synthetic bolding */ @font-face { font-family: "Syne"; font-style: normal; font-weight: 900; font-display: swap; src: url("./fonts/Syne-ExtraBold.ttf") format("truetype"); } /* DM Sans — full normal + italic across 100–900 */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100; font-display: swap; src: url("./fonts/DMSans-Thin.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 100; font-display: swap; src: url("./fonts/DMSans-ThinItalic.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 200; font-display: swap; src: url("./fonts/DMSans-ExtraLight.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 200; font-display: swap; src: url("./fonts/DMSans-ExtraLightItalic.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/DMSans-Light.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 300; font-display: swap; src: url("./fonts/DMSans-LightItalic.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/DMSans-Regular.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("./fonts/DMSans-Italic.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/DMSans-Medium.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 500; font-display: swap; src: url("./fonts/DMSans-MediumItalic.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/DMSans-SemiBold.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 600; font-display: swap; src: url("./fonts/DMSans-SemiBoldItalic.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/DMSans-Bold.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("./fonts/DMSans-BoldItalic.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/DMSans-ExtraBold.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 800; font-display: swap; src: url("./fonts/DMSans-ExtraBoldItalic.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url("./fonts/DMSans-Black.ttf") format("truetype"); } @font-face { font-family: "DM Sans"; font-style: italic; font-weight: 900; font-display: swap; src: url("./fonts/DMSans-BlackItalic.ttf") format("truetype"); } /* DM Sans 36pt — optical for big display (h1 / statements). Same family name "DM Sans Display" so designers can opt in explicitly. */ @font-face { font-family: "DM Sans Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/DMSans_36pt-Bold.ttf") format("truetype"); } @font-face { font-family: "DM Sans Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/DMSans_36pt-ExtraBold.ttf") format("truetype"); } @font-face { font-family: "DM Sans Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("./fonts/DMSans_36pt-Black.ttf") format("truetype"); } @font-face { font-family: "DM Sans Display"; font-style: italic; font-weight: 900; font-display: swap; src: url("./fonts/DMSans_36pt-BlackItalic.ttf") format("truetype"); } /* JetBrains Mono — all weights self-hosted */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100; font-display: swap; src: url("./fonts/JetBrainsMono-Thin.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 100; font-display: swap; src: url("./fonts/JetBrainsMono-ThinItalic.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 200; font-display: swap; src: url("./fonts/JetBrainsMono-ExtraLight.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 200; font-display: swap; src: url("./fonts/JetBrainsMono-ExtraLightItalic.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 300; font-display: swap; src: url("./fonts/JetBrainsMono-Light.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 300; font-display: swap; src: url("./fonts/JetBrainsMono-LightItalic.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/JetBrainsMono-Regular.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("./fonts/JetBrainsMono-Italic.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/JetBrainsMono-Medium.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 500; font-display: swap; src: url("./fonts/JetBrainsMono-MediumItalic.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/JetBrainsMono-SemiBold.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 600; font-display: swap; src: url("./fonts/JetBrainsMono-SemiBoldItalic.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/JetBrainsMono-Bold.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 700; font-display: swap; src: url("./fonts/JetBrainsMono-BoldItalic.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 800; font-display: swap; src: url("./fonts/JetBrainsMono-ExtraBold.ttf") format("truetype"); } @font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 800; font-display: swap; src: url("./fonts/JetBrainsMono-ExtraBoldItalic.ttf") format("truetype"); } :root { /* ------------------------------------------------------------ COLORS — exactly 5. Max 3 per composition. Always Crème+Nacht as the base pair. Terra is the lone signal. Salie + Lei are warm/cool complements, only used WHEN Terra is already present. ------------------------------------------------------------ */ /* Brand palette */ --creme: #F2EAD8; /* Eggshell — primary canvas */ --nacht: #1A1A1A; /* Carbon Black — identity layer */ --terra: #D97757; /* Burnt Peach — the one signal */ --salie: #8B9E7E; /* Palm Leaf — warm complement */ --lei: #7A8FA6; /* Slate Grey — cool complement */ /* Tonal extensions (use sparingly; never invent NEW hues) */ --creme-shade: #E8DEC6; /* hairline divider / hover on creme */ --creme-deep: #D9CDB1; /* pressed / muted */ --nacht-soft: #2A2A2A; /* slightly raised black surface */ --nacht-line: #3A3A3A; /* divider on nacht */ --terra-deep: #B85F40; /* terra pressed */ --terra-tint: #ECC2AD; /* terra wash for backgrounds (rare) */ --salie-deep: #6F8262; --lei-deep: #5E7790; /* ------------------------------------------------------------ SEMANTIC TOKENS — light theme (Crème canvas) ------------------------------------------------------------ */ --bg: var(--creme); --bg-elevated: #F8F2E3; /* card / surface lifted off creme */ --bg-sunken: var(--creme-shade); --fg: var(--nacht); /* primary text */ --fg-muted: #4A4744; /* secondary text — warm gray */ --fg-soft: #6B6864; /* tertiary / captions */ --fg-inverted: var(--creme); /* on dark surfaces */ --signal: var(--terra); /* the single accent */ --signal-press: var(--terra-deep); --border: #1A1A1A; /* sharp 1px borders, full nacht */ --border-soft: rgba(26, 26, 26, .12); --rule: rgba(26, 26, 26, .08); --focus-ring: var(--terra); /* ------------------------------------------------------------ SPACING — 4px base, tight-to-generous Dutch-grid scale ------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ------------------------------------------------------------ RADII — overwhelmingly square. Soft curves are rare and small. Nothing pill-shaped except inline tags. ------------------------------------------------------------ */ --radius-0: 0px; /* default — hard edges */ --radius-1: 2px; /* hairline soften */ --radius-2: 4px; /* inputs / small buttons */ --radius-3: 8px; /* cards */ --radius-pill: 999px; /* small inline tags only */ /* ------------------------------------------------------------ BORDERS — explicit, structural. The brand uses lines, not glow. ------------------------------------------------------------ */ --bw-hair: 1px; --bw-rule: 1.5px; --bw-bold: 2px; --bw-frame: 3px; /* ------------------------------------------------------------ SHADOWS — almost none. The brand favors lines + flat color. Use only on lifted overlays (modals, dropdowns). ------------------------------------------------------------ */ --shadow-0: none; --shadow-1: 0 1px 0 rgba(26, 26, 26, .08); --shadow-2: 0 2px 8px rgba(26, 26, 26, .08); --shadow-modal: 0 24px 64px rgba(26, 26, 26, .18); /* ------------------------------------------------------------ MOTION — restrained. Cuts and short fades, never bounces. ------------------------------------------------------------ */ --ease-out: cubic-bezier(.2, .8, .2, 1); /* @kind other */ --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 180ms; /* @kind other */ --dur-slow: 280ms; /* @kind other */ /* ------------------------------------------------------------ TYPOGRAPHY — base tokens Display = Inter 900 (heavy grotesque, Bauhaus-adjacent). Body = Inter 400/500. Mono = JetBrains Mono (for code samples / agent output). ------------------------------------------------------------ */ --font-display: "Syne", "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-extrabold: 800; /* @kind font */ --fw-black: 800; /* @kind font */ /* display weight — the brand voice (Syne tops at 800) */ /* Type scale — fluid-ish, but anchored. */ --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; --fs-40: 40px; --fs-56: 56px; --fs-72: 72px; --fs-96: 96px; --fs-128: 128px; --lh-tight: 1.04; /* @kind font */ --lh-snug: 1.15; /* @kind font */ --lh-normal: 1.35; /* @kind font */ --lh-loose: 1.55; /* @kind font */ --tracking-tight: -0.025em; --tracking-snug: -0.015em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-allcaps: 0.12em; } /* ============================================================ SEMANTIC TYPOGRAPHY — apply these classes or use the elements. Headings are always Inter Black. Never use Black for body. ============================================================ */ .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .font-mono { font-family: var(--font-mono); } /* ---------- Display / Statement ---------- For one-line statements: "Geen woorden maar daden." Always set tight and heavy. Never centered unless full-bleed. Display compression: Syne has no width axis and reads stretched at display sizes — all display headings (≥ 32px) carry a 26% optical width compression (scaleX .74, origin left top). Weight, tracking and leading stay untouched. Never on Syne < 28px (h3/h4, buttons). */ .t-statement { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(56px, 9vw, 128px); line-height: var(--lh-tight); letter-spacing: 0.015em; /* open tracking hoort bij de display-compressie */ color: var(--fg); text-wrap: balance; transform: scaleX(.74); transform-origin: left top; } /* ---------- Headings ---------- */ .t-h1, h1 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(40px, 5.5vw, 72px); line-height: var(--lh-tight); letter-spacing: 0.015em; /* open tracking hoort bij de display-compressie */ color: var(--fg); margin: 0; text-wrap: balance; transform: scaleX(.74); transform-origin: left top; } .t-h2, h2 { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(32px, 3.5vw, 40px); line-height: var(--lh-snug); letter-spacing: 0.015em; /* open tracking hoort bij de display-compressie */ color: var(--fg); margin: 0; transform: scaleX(.74); transform-origin: left top; } .t-h3, h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 24px; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--fg); margin: 0; } .t-h4, h4 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 18px; line-height: var(--lh-snug); color: var(--fg); margin: 0; } /* ---------- Eyebrow / Section label ---------- Used above headings. Always uppercase, wide tracking, terra. */ .t-eyebrow { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13px; line-height: 1; letter-spacing: var(--tracking-allcaps); text-transform: uppercase; color: var(--signal); } /* ---------- Body ---------- */ .t-lead, .t-intro { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 20px; line-height: var(--lh-normal); letter-spacing: var(--tracking-snug); color: var(--fg); } .t-body, p { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 16px; line-height: var(--lh-loose); color: var(--fg); } .t-small { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 14px; line-height: var(--lh-normal); color: var(--fg-muted); } .t-caption { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 12px; line-height: var(--lh-normal); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-soft); } /* ---------- Quote ---------- "Het kantelpunt." style. Heavy, with terra leading mark. */ .t-quote { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(32px, 4vw, 56px); line-height: var(--lh-snug); letter-spacing: 0.015em; /* open tracking hoort bij de display-compressie */ color: var(--fg); border-left: 3px solid var(--signal); padding-left: var(--space-5); text-wrap: balance; transform: scaleX(.74); transform-origin: left top; } /* ---------- Mono ---------- */ .t-mono, code, kbd, samp { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: 14px; line-height: var(--lh-normal); color: var(--fg); } /* ---------- Links ---------- */ a, .t-link { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--signal); transition: color var(--dur-fast) var(--ease-out); } a:hover, .t-link:hover { color: var(--signal); } /* ---------- Inverted (on Nacht surface) ---------- */ .on-nacht { --fg: var(--creme); --fg-muted: #BDB6A6; --fg-soft: #8E8978; --border: var(--creme); --border-soft: rgba(242, 234, 216, .14); --rule: rgba(242, 234, 216, .10); --bg: var(--nacht); --bg-elevated: var(--nacht-soft); background: var(--bg); color: var(--fg); }