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
* 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;
}