diff --git a/prototype/tokens.css b/prototype/tokens.css index 74e8a50..6c708d3 100644 --- a/prototype/tokens.css +++ b/prototype/tokens.css @@ -1,35 +1,41 @@ -/* 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 +/* Hallmark · macrostructure: Split Studio · genre: soft spa / editorial + * theme: studied-DNA (Ashley vision — cream / gold / charcoal) + * paper oklch(97% 0.012 85) · ink oklch(22% 0.012 55) · accent gold #C9A86B · soft pink #E8B4BC + * display: Playfair Display · body: DM Sans + * nav: sparse wordmark · footer: statement + * enrichment: none · pre-emit critique: P5 H4 E4 S5 R4 V4 + * source: ashleys-vision-summary + brand-guidelines + brand-voice (Gitea) */ :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); + --color-paper: #f7f1e8; + --color-paper-2: #f0e8db; + --color-paper-3: #e8dfcf; + --color-band: #f3ebe0; + --color-rule: #d9cbb6; + --color-muted: #6b6258; + --color-ink: #2c2620; + --color-charcoal: #33302c; + --color-gold: #c9a86b; + --color-gold-deep: #a88a52; + --color-pink: #e8b4bc; + --color-pink-soft: #f3d5da; + --color-accent: #c9a86b; + --color-accent-ink: #2c2620; + --color-focus: #a88a52; + --color-dark: #2c2620; + --color-on-dark: #f7f1e8; + --color-on-dark-muted: #cfc4b4; - --font-display: "Cormorant Garamond", "Times New Roman", serif; - --font-body: "IBM Plex Sans", system-ui, sans-serif; - --font-outlier: "Source Serif 4", Georgia, serif; + --font-display: "Playfair Display", Georgia, "Times New Roman", serif; + --font-body: "DM Sans", system-ui, sans-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); + --text-md: 1.15rem; + --text-lg: 1.35rem; + --text-xl: 1.75rem; + --text-2xl: clamp(1.85rem, 2.8vw + 0.6rem, 2.5rem); + --text-display: clamp(2.35rem, 4vw + 0.7rem, 3.75rem); --space-2xs: 0.25rem; --space-xs: 0.5rem; @@ -40,12 +46,11 @@ --space-2xl: 3rem; --space-3xl: 4.5rem; --space-4xl: 6rem; - --space-5xl: 8rem; - --measure: 62ch; - --page: min(1120px, calc(100% - 2.5rem)); - --radius: 2px; + --measure: 60ch; + --page: min(1080px, calc(100% - 2.5rem)); + --radius: 4px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-short: 140ms; - --banner-height: 4.25rem; + --banner-height: 4.5rem; }