/* Hallmark · design-system: design.md · theme: custom (playful) · v2.1 * vibe: "playful, tactile, modern, alive" · paper: oklch(98% 0.010 90) · accent: oklch(52% 0.20 285) * display: Bricolage Grotesque · body: Plus Jakarta Sans · axes: light / geometric-sans / cool * * RE-SKIN THE ACCENT: change --accent-h (hue) alone, or --accent-h + --accent-c (chroma). * The whole accent family, focus ring, accent-tinted inks, tint band, and shadows follow. * Examples — coral: --accent-h 25 · teal: 195 · green: 150 · magenta: 330 · current indigo: 285. */ :root { /* ============================================================ ACCENT CONTROL — the only values you need to change ============================================================ */ --accent-h: 190.59; /* hue 0–360 — the brand colour (teal) */ --accent-c: 0.116; /* chroma 0.12–0.22 — saturation */ /* ---- Accent family (all derived from --accent-h / --accent-c) ---- */ --color-accent: oklch(52% var(--accent-c) var(--accent-h)); /* brand */ --color-accent-2: oklch(46% calc(var(--accent-c) + 0.01) var(--accent-h)); /* pressed / deep */ --color-accent-soft: oklch(94% 0.05 var(--accent-h)); /* chip / band tint */ --color-accent-ink: oklch(99% 0.008 90); /* paper text on accent */ --color-focus: oklch(58% 0.22 var(--accent-h)); /* focus ring — instant */ /* ---- Ink (warm-cool near-black, tinted toward the accent hue) ---- */ --color-ink: oklch(20% 0.014 var(--accent-h)); /* near-black */ --color-ink-2: oklch(40% 0.013 var(--accent-h)); /* muted body */ --color-ink-3: oklch(56% 0.011 var(--accent-h)); /* captions / meta */ --color-muted: oklch(52% 0.012 var(--accent-h)); /* de-emphasised text */ /* ---- Accent-tinted dark surfaces (footer / floating nav) ---- */ --color-rule-dark: oklch(40% 0.013 var(--accent-h)); /* hairline on ink */ --color-divider-dark: oklch(46% 0.013 var(--accent-h)); /* pill divider */ --color-ink-blur: oklch(20% 0.014 var(--accent-h) / 0.92); /* floating pill backdrop */ /* ---- Accent-tinted shadows ---- */ --shadow-card: 0 2px 6px -4px oklch(40% 0.10 var(--accent-h) / 0.30); --shadow-lift: 0 18px 40px -22px oklch(40% 0.14 var(--accent-h) / 0.45); /* ============================================================ Warm paper + neutrals — independent of the accent (hue 90) ============================================================ */ --color-paper: oklch(98% 0.010 90); /* warm cream near-white */ --color-paper-2: oklch(95.5% 0.013 90); /* card / panel */ --color-paper-3: oklch(93% 0.015 90); /* hover / pressed surface */ --color-rule: oklch(87% 0.012 90); /* dividers */ --color-rule-2: oklch(91% 0.010 90); /* secondary dividers */ --color-paper-blur: oklch(98% 0.010 90 / 0.85); /* sticky nav backdrop */ --color-on-dark: oklch(85% 0.010 90); /* links on ink */ --color-on-dark-muted: oklch(80% 0.010 90); /* body on ink */ --color-on-dark-faint: oklch(65% 0.010 90); /* copyright on ink */ /* ---- Semantic ---- */ --color-footer-bg: oklch(20% 0.014 var(--accent-h)); /* dark band — both themes */ --color-footer-ink: oklch(96% 0.008 90); /* light text on the band — both themes */ --color-error: oklch(55% 0.18 25); /* button error state */ --color-error-deep: oklch(50% 0.18 25); /* form error text */ color-scheme: light; /* ---- Type families ---- */ --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- Spacing (4-pt scale) ---- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 7rem; /* ---- Type scale ---- */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-display: clamp(2.75rem, 6vw + 0.5rem, 5.75rem); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entering */ --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* leaving */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* state toggles */ --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; /* ---- Lines & shapes ---- */ --rule-hair: 1px; --rule-bold: 2px; --radius-pill: 999px; --radius-card: 12px; --radius-input: 8px; --measure-prose: 64ch; } /* ============================================================ DARK THEME — surfaces invert, accent lifts, footer stays dark. Toggled via [data-theme="dark"] on ; --accent-h/-c still drive accent. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; /* surfaces — dark, faintly accent-tinted */ --color-paper: oklch(21% 0.014 var(--accent-h)); --color-paper-2: oklch(25% 0.016 var(--accent-h)); --color-paper-3: oklch(30% 0.018 var(--accent-h)); --color-paper-blur: oklch(21% 0.014 var(--accent-h) / 0.85); /* ink — warm light text */ --color-ink: oklch(95% 0.008 90); --color-ink-2: oklch(80% 0.008 90); --color-ink-3: oklch(66% 0.008 90); --color-muted: oklch(70% 0.008 90); /* hairlines */ --color-rule: oklch(34% 0.014 var(--accent-h)); --color-rule-2: oklch(30% 0.012 var(--accent-h)); /* accent — lift lightness for contrast on dark */ --color-accent: oklch(72% var(--accent-c) var(--accent-h)); --color-accent-2: oklch(66% calc(var(--accent-c) + 0.01) var(--accent-h)); --color-accent-soft: oklch(32% 0.045 var(--accent-h)); --color-accent-ink: oklch(18% 0.02 var(--accent-h)); --color-focus: oklch(76% 0.20 var(--accent-h)); /* footer band — slightly darker than page */ --color-footer-bg: oklch(15% 0.014 var(--accent-h)); /* shadows — deeper on dark */ --shadow-card: 0 2px 6px -4px oklch(0% 0 0 / 0.45); --shadow-lift: 0 18px 40px -22px oklch(0% 0 0 / 0.60); }