From b3fc4b3eaa20723e27962ce306af057c754492eb Mon Sep 17 00:00:00 2001 From: Leonard Date: Thu, 16 Jul 2026 16:18:41 +0000 Subject: [PATCH] prototype: design tokens --- prototype/tokens.css | 51 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 prototype/tokens.css diff --git a/prototype/tokens.css b/prototype/tokens.css new file mode 100644 index 0000000..74e8a50 --- /dev/null +++ b/prototype/tokens.css @@ -0,0 +1,51 @@ +/* Hallmark · macrostructure: Split Studio · genre: editorial · theme: custom + * vibe: warm studio / Cameron Park / treatment-room honesty + * paper oklch(96.5% 0.012 75) · ink oklch(18% 0.014 55) · accent oklch(38% 0.055 185) + * display: Cormorant Garamond · body: IBM Plex Sans · outlier: Source Serif 4 (quotes) + * nav: N9 edge-aligned · footer: Ft5 statement + * enrichment: none (live photography) · honest: pass · chrome: pass + * pre-emit critique: P5 H4 E4 S5 R4 V5 + * axes: light paper · classical-serif display · cool-teal accent + */ +:root { + --color-paper: oklch(96.5% 0.012 75); + --color-paper-2: oklch(93.5% 0.016 72); + --color-paper-3: oklch(90% 0.018 70); + --color-rule: oklch(82% 0.014 70); + --color-muted: oklch(42% 0.02 60); + --color-ink: oklch(18% 0.014 55); + --color-accent: oklch(38% 0.055 185); + --color-accent-ink: oklch(97% 0.01 90); + --color-focus: oklch(45% 0.08 185); + --color-band: oklch(94% 0.02 70); + + --font-display: "Cormorant Garamond", "Times New Roman", serif; + --font-body: "IBM Plex Sans", system-ui, sans-serif; + --font-outlier: "Source Serif 4", Georgia, serif; + + --text-sm: 0.875rem; + --text-base: 1.0625rem; + --text-md: 1.2rem; + --text-lg: 1.45rem; + --text-xl: 1.85rem; + --text-2xl: clamp(2rem, 3.5vw + 0.5rem, 2.75rem); + --text-display: clamp(2.5rem, 4.5vw + 0.75rem, 4.25rem); + + --space-2xs: 0.25rem; + --space-xs: 0.5rem; + --space-sm: 0.75rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2rem; + --space-2xl: 3rem; + --space-3xl: 4.5rem; + --space-4xl: 6rem; + --space-5xl: 8rem; + + --measure: 62ch; + --page: min(1120px, calc(100% - 2.5rem)); + --radius: 2px; + --ease-out: cubic-bezier(0.22, 1, 0.36, 1); + --dur-short: 140ms; + --banner-height: 4.25rem; +}