/* * Impressions in Ink — Brand Design Tokens * ---------------------------------------------------------------------------- * Single source of truth for color, type, spacing, and shape. Extracted from * the open-house campaign page so every Impressions site shares one language. * * The palette IS the brand thesis: Cyan / Magenta / Yellow + K(ink) — the four * process inks of a print shop. Authors pick a SURFACE ROLE (paper/bone/ink), * never a hex; the theme supplies the rest. * * Theme system: set `data-theme` on (default "magenta"). The pastiche * animation reads --iik-* with the brand hex as fallback, so dark sections can * re-tint the motion with CSS alone (see site.css dark-section blocks). */ :root { /* ---- Brand palette (CMYK + K) ---- */ --magenta: #ED008C; --magenta-deep: #C00074; --hero-pink: #C2096F; --yellow: #FCBA00; --yellow-warm: #FDC833; --cyan: #00ADEF; --slate: #465A65; --slate-light: #B5BDC1; --ink: #010101; /* ---- Surfaces ---- */ --paper: #FFFFFF; --bone: #F6F4EF; /* warm off-white section bg */ --bone-2: #ECE8DF; /* slightly darker bone (icon chips) */ --line: #e9e5dc; /* hairline on bone surfaces */ --rule: #1c1c1c; /* ---- Type ---- */ --font-sans: 'Source Sans 3', 'Acumin Pro', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Shape ---- */ --radius: 14px; --radius-sm: 8px; --shadow: 0 1px 0 rgba(1,1,1,.04), 0 12px 32px -8px rgba(1,1,1,.12); /* ---- Spacing scale (the one token family the open-house CSS lacked) ---- */ --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: 88px; --space-10: 120px; } /* ---- Themes (key off the [data-theme] attribute; default = magenta) ---- * The marketing site ships magenta. Yellow/ink are kept here so any future * site (or an app-themed landing page) can switch with a single attribute. */ html[data-theme="yellow"] { --hero-pink: var(--yellow); } html[data-theme="ink"] { --hero-pink: var(--ink); }