Tony_tech/phoenix-website-hallmark
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prototype: tokens v2 — cream gold charcoal pink

Browse Source
This commit is contained in:
Leonard
2026-07-16 16:41:42 +00:00
parent 89524b364f
commit 75a2772f47
1 changed files with 36 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
prototype/tokens.css
+36 -31
View File
@@ -1,35 +1,41 @@
/* Hallmark · macrostructure: Split Studio · genre: editorial · theme: custom /* Hallmark · macrostructure: Split Studio · genre: soft spa / editorial
* vibe: warm studio / Cameron Park / treatment-room honesty * theme: studied-DNA (Ashley vision — cream / gold / charcoal)
* paper oklch(96.5% 0.012 75) · ink oklch(18% 0.014 55) · accent oklch(38% 0.055 185) * paper oklch(97% 0.012 85) · ink oklch(22% 0.012 55) · accent gold #C9A86B · soft pink #E8B4BC
* display: Cormorant Garamond · body: IBM Plex Sans · outlier: Source Serif 4 (quotes) * display: Playfair Display · body: DM Sans
* nav: N9 edge-aligned · footer: Ft5 statement * nav: sparse wordmark · footer: statement
* enrichment: none (live photography) · honest: pass · chrome: pass * enrichment: none · pre-emit critique: P5 H4 E4 S5 R4 V4
* pre-emit critique: P5 H4 E4 S5 R4 V5 * source: ashleys-vision-summary + brand-guidelines + brand-voice (Gitea)
* axes: light paper · classical-serif display · cool-teal accent
*/ */
:root { :root {
--color-paper: oklch(96.5% 0.012 75); --color-paper: #f7f1e8;
--color-paper-2: oklch(93.5% 0.016 72); --color-paper-2: #f0e8db;
--color-paper-3: oklch(90% 0.018 70); --color-paper-3: #e8dfcf;
--color-rule: oklch(82% 0.014 70); --color-band: #f3ebe0;
--color-muted: oklch(42% 0.02 60); --color-rule: #d9cbb6;
--color-ink: oklch(18% 0.014 55); --color-muted: #6b6258;
--color-accent: oklch(38% 0.055 185); --color-ink: #2c2620;
--color-accent-ink: oklch(97% 0.01 90); --color-charcoal: #33302c;
--color-focus: oklch(45% 0.08 185); --color-gold: #c9a86b;
--color-band: oklch(94% 0.02 70); --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-display: "Playfair Display", Georgia, "Times New Roman", serif;
--font-body: "IBM Plex Sans", system-ui, sans-serif; --font-body: "DM Sans", system-ui, sans-serif;
--font-outlier: "Source Serif 4", Georgia, serif;
--text-sm: 0.875rem; --text-sm: 0.875rem;
--text-base: 1.0625rem; --text-base: 1.0625rem;
--text-md: 1.2rem; --text-md: 1.15rem;
--text-lg: 1.45rem; --text-lg: 1.35rem;
--text-xl: 1.85rem; --text-xl: 1.75rem;
--text-2xl: clamp(2rem, 3.5vw + 0.5rem, 2.75rem); --text-2xl: clamp(1.85rem, 2.8vw + 0.6rem, 2.5rem);
--text-display: clamp(2.5rem, 4.5vw + 0.75rem, 4.25rem); --text-display: clamp(2.35rem, 4vw + 0.7rem, 3.75rem);
--space-2xs: 0.25rem; --space-2xs: 0.25rem;
--space-xs: 0.5rem; --space-xs: 0.5rem;
@@ -40,12 +46,11 @@
--space-2xl: 3rem; --space-2xl: 3rem;
--space-3xl: 4.5rem; --space-3xl: 4.5rem;
--space-4xl: 6rem; --space-4xl: 6rem;
--space-5xl: 8rem;
--measure: 62ch; --measure: 60ch;
--page: min(1120px, calc(100% - 2.5rem)); --page: min(1080px, calc(100% - 2.5rem));
--radius: 2px; --radius: 4px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur-short: 140ms; --dur-short: 140ms;
--banner-height: 4.25rem; --banner-height: 4.5rem;
} }