mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
8bdb3ef4bd
Twelve themes covered editorial, technical, soft, bold. Three voices were missing: modern italic-display agency (Studio), post-Linear soft-tech (Pastel), and analog/print rebellion (Riso). Each uses fonts from Google Fonts that the existing twelve don't touch. Studio. Instrument Serif italic display + Geist body + Geist Mono labels. Cream-white paper, forest-green accent. Photographic hero archetype + index footer — confident agency portfolio aesthetic. Inspiration: 14islands, Frame, Mathieu Triay, Gretel. Pastel. Geist sans display + body, Geist Mono labels. Soft lavender-cream paper, low-chroma indigo accent (deliberately not slop purple). Letter hero archetype + masthead footer — the post-Linear / Resend / Cron aesthetic. Riso. Bricolage Grotesque 800-weight display, all lowercase + Newsreader italic body. Warm peach paper with a subtle dot-grain overlay, riso cyan + yellow off-register text-shadow on display headlines for the print-misregistration feel. Quote-Led hero + dense colophon footer. Inspiration: Are.na, e-flux, Frieze, indie magazine sites. Each theme adds a banner dot and an ARCHETYPES + COPY entry. The page is now a 15-theme demonstration; THEMES count and supporting structure updated throughout. Riso's body::before grain layer respects prefers-reduced-data. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
739 lines
28 KiB
CSS
739 lines
28 KiB
CSS
/*
|
|
Hallmark — tokens
|
|
Twelve themes. Each occupies a distinct point in OKLCH space.
|
|
Paper colours span dark / cream / saturated / cool / warm; never adjacent.
|
|
Display fonts span category-level differences (serif / mono / condensed sans / italic);
|
|
no theme is a minor variation of another.
|
|
Switched via [data-theme="..."] on <html>.
|
|
*/
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
SPECIMEN — warm oat editorial workshop · serif default
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
:root,
|
|
[data-theme="specimen"] {
|
|
--color-paper: oklch(96% 0.018 80);
|
|
--color-paper-2: oklch(93% 0.020 80);
|
|
--color-paper-3: oklch(89% 0.022 75);
|
|
--color-rule: oklch(82% 0.014 75);
|
|
--color-rule-2: oklch(70% 0.012 70);
|
|
--color-muted: oklch(52% 0.012 65);
|
|
--color-neutral: oklch(38% 0.014 60);
|
|
--color-ink-2: oklch(26% 0.014 60);
|
|
--color-ink: oklch(18% 0.014 60);
|
|
--color-accent: #FC4C02;
|
|
--color-accent-ink: oklch(55% 0.21 32);
|
|
--color-focus: #FC4C02;
|
|
|
|
--font-display: "Fraunces", "Tiempos", ui-serif, Georgia, serif;
|
|
--font-body: "The Future", "Söhne", ui-sans-serif, sans-serif;
|
|
--font-serif: "Fraunces", ui-serif, Georgia, serif;
|
|
--font-label: "The Future Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "The Future Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 340;
|
|
--display-optical: 144;
|
|
--display-style: normal;
|
|
--display-soft: 20;
|
|
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.875rem;
|
|
--text-base: 1rem;
|
|
--text-md: 1.125rem;
|
|
--text-lg: 1.375rem;
|
|
--text-xl: 1.75rem;
|
|
--text-2xl: 2.25rem;
|
|
--text-3xl: 2.75rem;
|
|
--text-display: clamp(3rem, 5.5vw + 1rem, 5.75rem);
|
|
--text-display-s: clamp(2rem, 3vw + 1rem, 3rem);
|
|
|
|
--lh-tight: 1.02;
|
|
--lh-snug: 1.18;
|
|
--lh-normal: 1.45;
|
|
--lh-relaxed: 1.6;
|
|
|
|
--tracking-display: -0.025em;
|
|
--tracking-tight: -0.01em;
|
|
--tracking-normal: 0;
|
|
--tracking-label: 0.12em;
|
|
|
|
--space-3xs: 0.125rem;
|
|
--space-2xs: 0.25rem;
|
|
--space-xs: 0.5rem;
|
|
--space-sm: 0.75rem;
|
|
--space-md: 1rem;
|
|
--space-lg: 1.5rem;
|
|
--space-xl: 2.5rem;
|
|
--space-2xl: 4rem;
|
|
--space-3xl: 6.5rem;
|
|
--space-4xl: 10rem;
|
|
--space-5xl: 13rem;
|
|
|
|
--section-gap: 8rem;
|
|
--section-head-gap: 2rem;
|
|
|
|
--page-max: 76rem;
|
|
--page-gutter: clamp(1.25rem, 4vw, 3rem);
|
|
--measure: 62ch;
|
|
--rule-hair: 0.5px;
|
|
--rule-fine: 1px;
|
|
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
|
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
--dur-micro: 120ms;
|
|
--dur-short: 220ms;
|
|
--dur-long: 420ms;
|
|
|
|
--z-base: 1;
|
|
--z-raised: 10;
|
|
--z-dropdown: 100;
|
|
--z-sticky: 200;
|
|
--z-modal: 400;
|
|
--z-toast: 500;
|
|
--z-tooltip: 600;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
MIDNIGHT — deep cool charcoal · technical
|
|
Paper: cool dark blue-tinted (was warm; now cool for stronger
|
|
differentiation from the warm-paper themes)
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="midnight"] {
|
|
--color-paper: oklch(15% 0.022 250);
|
|
--color-paper-2: oklch(20% 0.024 250);
|
|
--color-paper-3: oklch(25% 0.026 250);
|
|
--color-rule: oklch(33% 0.024 245);
|
|
--color-rule-2: oklch(48% 0.020 240);
|
|
--color-muted: oklch(60% 0.018 240);
|
|
--color-neutral: oklch(72% 0.014 235);
|
|
--color-ink-2: oklch(86% 0.010 230);
|
|
--color-ink: oklch(95% 0.008 230);
|
|
--color-accent: oklch(72% 0.16 220);
|
|
--color-accent-ink: oklch(72% 0.16 220);
|
|
--color-focus: oklch(72% 0.16 220);
|
|
|
|
--font-display: "The Future", "Futura", "Avenir Next", ui-sans-serif, sans-serif;
|
|
--font-body: "The Future", "Söhne", ui-sans-serif, sans-serif;
|
|
--font-serif: "Instrument Serif", ui-serif, Georgia, serif;
|
|
--font-label: "The Future Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "The Future Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 300;
|
|
--display-optical: 144;
|
|
--display-soft: 0;
|
|
|
|
--text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
|
|
--text-display-s: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
|
|
|
|
--tracking-display: -0.03em;
|
|
--tracking-label: 0.16em;
|
|
|
|
--section-gap: 7rem;
|
|
--section-head-gap: 1.75rem;
|
|
--measure: 60ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
BRUTAL — stark white · heavy condensed · bright red
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="brutal"] {
|
|
--color-paper: oklch(98% 0.001 0);
|
|
--color-paper-2: oklch(95% 0.002 0);
|
|
--color-paper-3: oklch(91% 0.003 0);
|
|
--color-rule: oklch(12% 0.005 0);
|
|
--color-rule-2: oklch(8% 0.005 0);
|
|
--color-muted: oklch(38% 0.005 0);
|
|
--color-neutral: oklch(22% 0.005 0);
|
|
--color-ink-2: oklch(12% 0.005 0);
|
|
--color-ink: oklch(8% 0.005 0);
|
|
--color-accent: #E63946;
|
|
--color-accent-ink: oklch(58% 0.24 25);
|
|
--color-focus: #E63946;
|
|
|
|
--font-display: "Space Grotesk", "GT America", ui-sans-serif, sans-serif;
|
|
--font-body: "Space Grotesk", "The Future", ui-sans-serif, sans-serif;
|
|
--font-serif: "Space Grotesk", ui-sans-serif, sans-serif;
|
|
--font-label: "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 700;
|
|
--display-soft: 0;
|
|
|
|
--text-display: clamp(3.5rem, 8vw + 1rem, 8rem);
|
|
--text-display-s: clamp(2.25rem, 4vw + 1rem, 3.75rem);
|
|
--text-2xl: 2.75rem;
|
|
--text-xl: 2rem;
|
|
--text-lg: 1.5rem;
|
|
|
|
--tracking-display: -0.045em;
|
|
--tracking-tight: -0.02em;
|
|
--tracking-label: 0.04em;
|
|
|
|
--lh-tight: 0.94;
|
|
--lh-snug: 1.08;
|
|
|
|
--section-gap: 6rem;
|
|
--section-head-gap: 1.5rem;
|
|
|
|
--rule-hair: 1px;
|
|
--rule-fine: 3px;
|
|
--measure: 58ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
GARDEN — pale sage · italic serif · rose accent
|
|
Pushed greener and slightly cooler from previous version
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="garden"] {
|
|
--color-paper: oklch(95% 0.030 130);
|
|
--color-paper-2: oklch(92% 0.034 130);
|
|
--color-paper-3: oklch(87% 0.038 130);
|
|
--color-rule: oklch(78% 0.030 130);
|
|
--color-rule-2: oklch(64% 0.034 135);
|
|
--color-muted: oklch(50% 0.045 150);
|
|
--color-neutral: oklch(36% 0.055 155);
|
|
--color-ink-2: oklch(28% 0.055 158);
|
|
--color-ink: oklch(22% 0.060 160);
|
|
--color-accent: #B6485E;
|
|
--color-accent-ink: oklch(55% 0.14 18);
|
|
--color-focus: #B6485E;
|
|
|
|
--font-display: "Cormorant Garamond", "Instrument Serif", "Fraunces", ui-serif, Georgia, serif;
|
|
--font-body: "The Future", "Söhne", ui-sans-serif, sans-serif;
|
|
--font-serif: "Cormorant Garamond", "Instrument Serif", ui-serif, Georgia, serif;
|
|
--font-label: "The Future Mono", ui-monospace, monospace;
|
|
--font-mono: "The Future Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 400;
|
|
--display-style: italic;
|
|
--display-optical: 96;
|
|
--display-soft: 0;
|
|
|
|
--text-display: clamp(3.25rem, 6vw + 1rem, 6.5rem);
|
|
--text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
|
|
|
|
--tracking-display: -0.012em;
|
|
--tracking-tight: -0.005em;
|
|
--tracking-label: 0.10em;
|
|
|
|
--lh-tight: 1.05;
|
|
--lh-snug: 1.22;
|
|
|
|
--section-gap: 9rem;
|
|
--section-head-gap: 2.5rem;
|
|
--measure: 58ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
ATELIER — luxury fashion-house
|
|
Cool cream paper (low chroma so it reads "considered" not "warm")
|
|
+ dark warm-brown ink + Playfair Display 900 (Didone-feel)
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="atelier"] {
|
|
--color-paper: oklch(94% 0.005 60);
|
|
--color-paper-2: oklch(91% 0.006 60);
|
|
--color-paper-3: oklch(87% 0.008 55);
|
|
--color-rule: oklch(78% 0.006 55);
|
|
--color-rule-2: oklch(56% 0.008 50);
|
|
--color-muted: oklch(46% 0.010 50);
|
|
--color-neutral: oklch(28% 0.014 45);
|
|
--color-ink-2: oklch(18% 0.020 40);
|
|
--color-ink: oklch(12% 0.024 40);
|
|
--color-accent: oklch(22% 0.060 40);
|
|
--color-accent-ink: oklch(45% 0.13 60);
|
|
--color-focus: oklch(45% 0.13 60);
|
|
|
|
--font-display: "Playfair Display", "Cormorant Garamond", "Tiempos Headline", ui-serif, Georgia, serif;
|
|
--font-body: "Hanken Grotesk", "The Future", ui-sans-serif, sans-serif;
|
|
--font-serif: "Playfair Display", "Cormorant Garamond", ui-serif, Georgia, serif;
|
|
--font-label: "IBM Plex Mono", ui-monospace, monospace;
|
|
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 900;
|
|
--display-optical: 144;
|
|
--display-style: normal;
|
|
--display-soft: 0;
|
|
|
|
--text-display: clamp(3.75rem, 7vw + 1rem, 7.5rem);
|
|
--text-display-s: clamp(2.5rem, 4vw + 1rem, 4rem);
|
|
|
|
--tracking-display: -0.018em;
|
|
--tracking-tight: -0.008em;
|
|
--tracking-label: 0.24em;
|
|
|
|
--lh-tight: 1.0;
|
|
--lh-snug: 1.16;
|
|
--lh-normal: 1.55;
|
|
--lh-relaxed: 1.7;
|
|
|
|
--section-gap: 12rem;
|
|
--section-head-gap: 3.5rem;
|
|
--measure: 56ch;
|
|
--page-max: 64rem;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
NEWSPRINT — broadsheet · salmon-pink paper · burgundy accent
|
|
FT-inspired pink (real)
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="newsprint"] {
|
|
--color-paper: oklch(92% 0.045 50);
|
|
--color-paper-2: oklch(89% 0.050 50);
|
|
--color-paper-3: oklch(84% 0.054 45);
|
|
--color-rule: oklch(68% 0.030 40);
|
|
--color-rule-2: oklch(35% 0.020 35);
|
|
--color-muted: oklch(46% 0.022 35);
|
|
--color-neutral: oklch(30% 0.025 30);
|
|
--color-ink-2: oklch(20% 0.030 28);
|
|
--color-ink: oklch(15% 0.030 25);
|
|
--color-accent: oklch(32% 0.10 28);
|
|
--color-accent-ink: oklch(45% 0.13 30);
|
|
--color-focus: oklch(48% 0.18 30);
|
|
|
|
--font-display: "Playfair Display", "Crimson Pro", "Newsreader", ui-serif, Georgia, serif;
|
|
--font-body: "Crimson Pro", "Newsreader", ui-serif, Georgia, serif;
|
|
--font-serif: "Playfair Display", "Crimson Pro", ui-serif, Georgia, serif;
|
|
--font-label: "IBM Plex Sans", "The Future", ui-sans-serif, sans-serif;
|
|
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 700;
|
|
--display-optical: 48;
|
|
--display-style: normal;
|
|
--display-soft: 0;
|
|
|
|
--text-base: 1.0625rem;
|
|
--text-md: 1.1875rem;
|
|
--text-lg: 1.375rem;
|
|
--text-xl: 1.625rem;
|
|
--text-2xl: 2rem;
|
|
--text-display: clamp(2.75rem, 5vw + 1rem, 5rem);
|
|
--text-display-s: clamp(2rem, 3vw + 1rem, 2.875rem);
|
|
|
|
--tracking-display: -0.022em;
|
|
--tracking-tight: -0.008em;
|
|
--tracking-label: 0.06em;
|
|
|
|
--lh-normal: 1.55;
|
|
--lh-relaxed: 1.65;
|
|
|
|
--section-gap: 6.5rem;
|
|
--section-head-gap: 1rem;
|
|
--measure: 58ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
TERMINAL — phosphor CRT · monospace everywhere
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="terminal"] {
|
|
--color-paper: oklch(11% 0.018 145);
|
|
--color-paper-2: oklch(15% 0.022 145);
|
|
--color-paper-3: oklch(19% 0.024 145);
|
|
--color-rule: oklch(28% 0.030 140);
|
|
--color-rule-2: oklch(40% 0.050 140);
|
|
--color-muted: oklch(58% 0.090 140);
|
|
--color-neutral: oklch(68% 0.120 140);
|
|
--color-ink-2: oklch(78% 0.140 138);
|
|
--color-ink: oklch(86% 0.160 138);
|
|
--color-accent: oklch(78% 0.190 138);
|
|
--color-accent-ink: oklch(78% 0.190 138);
|
|
--color-focus: oklch(86% 0.190 138);
|
|
|
|
--font-display: "JetBrains Mono", "IBM Plex Mono", "The Future Mono", ui-monospace, monospace;
|
|
--font-body: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
|
|
--font-serif: "JetBrains Mono", ui-monospace, monospace;
|
|
--font-label: "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 500;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(2.25rem, 4vw + 1rem, 4rem);
|
|
--text-display-s: clamp(1.625rem, 2.25vw + 1rem, 2.5rem);
|
|
--text-xl: 1.5rem;
|
|
--text-2xl: 1.875rem;
|
|
|
|
--tracking-display: 0.01em;
|
|
--tracking-tight: 0;
|
|
--tracking-label: 0.18em;
|
|
|
|
--lh-tight: 1.2;
|
|
--lh-snug: 1.35;
|
|
--lh-normal: 1.55;
|
|
|
|
--section-gap: 5.5rem;
|
|
--section-head-gap: 1.25rem;
|
|
--measure: 70ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
MANIFESTO — BLACK paper · ALL CAPS condensed · red colour-blocks
|
|
The opposite pole from Brutal: same red accent, inverted background.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="manifesto"] {
|
|
--color-paper: oklch(10% 0.005 60);
|
|
--color-paper-2: oklch(15% 0.006 60);
|
|
--color-paper-3: oklch(20% 0.008 60);
|
|
--color-rule: oklch(28% 0.010 60);
|
|
--color-rule-2: oklch(40% 0.012 60);
|
|
--color-muted: oklch(60% 0.012 65);
|
|
--color-neutral: oklch(72% 0.010 70);
|
|
--color-ink-2: oklch(88% 0.006 80);
|
|
--color-ink: oklch(98% 0.003 90);
|
|
--color-accent: #E51A1A;
|
|
--color-accent-ink: oklch(58% 0.24 28);
|
|
--color-focus: #E51A1A;
|
|
|
|
--font-display: "Anton", "Bebas Neue", "Bricolage Grotesque", "Space Grotesk", sans-serif;
|
|
--font-body: "IBM Plex Sans", "Public Sans", "The Future", ui-sans-serif, sans-serif;
|
|
--font-serif: "Anton", "Bricolage Grotesque", sans-serif;
|
|
--font-label: "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 400;
|
|
--display-optical: 96;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(4rem, 12vw + 1rem, 13rem);
|
|
--text-display-s: clamp(2.75rem, 6vw + 1rem, 5.5rem);
|
|
--text-2xl: 3rem;
|
|
--text-xl: 2rem;
|
|
|
|
--tracking-display: 0.005em;
|
|
--tracking-tight: 0;
|
|
--tracking-label: 0.10em;
|
|
|
|
--lh-tight: 0.86;
|
|
--lh-snug: 1.0;
|
|
|
|
--section-gap: 5rem;
|
|
--section-head-gap: 1.25rem;
|
|
|
|
--rule-hair: 1px;
|
|
--rule-fine: 3px;
|
|
--measure: 56ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
SALON — boutique apothecary · warm ivory · TYPEWRITER display
|
|
Display in mono is the key differentiator from the cream-serif themes
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="salon"] {
|
|
--color-paper: oklch(94% 0.030 65);
|
|
--color-paper-2: oklch(91% 0.034 65);
|
|
--color-paper-3: oklch(87% 0.038 60);
|
|
--color-rule: oklch(76% 0.028 60);
|
|
--color-rule-2: oklch(56% 0.030 55);
|
|
--color-muted: oklch(48% 0.030 50);
|
|
--color-neutral: oklch(34% 0.030 45);
|
|
--color-ink-2: oklch(28% 0.030 40);
|
|
--color-ink: oklch(22% 0.030 38);
|
|
--color-accent: oklch(40% 0.085 50);
|
|
--color-accent-ink: oklch(45% 0.10 50);
|
|
--color-focus: oklch(50% 0.12 50);
|
|
|
|
--font-display: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
--font-body: "Plus Jakarta Sans", "Hanken Grotesk", "The Future", ui-sans-serif, sans-serif;
|
|
--font-serif: "Cormorant Garamond", ui-serif, Georgia, serif;
|
|
--font-label: "IBM Plex Mono", ui-monospace, monospace;
|
|
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 500;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(2.25rem, 4vw + 1rem, 4rem);
|
|
--text-display-s: clamp(1.625rem, 2.5vw + 1rem, 2.5rem);
|
|
--text-xl: 1.5rem;
|
|
--text-2xl: 1.875rem;
|
|
|
|
--tracking-display: 0.005em;
|
|
--tracking-tight: 0;
|
|
--tracking-label: 0.18em;
|
|
|
|
--lh-tight: 1.18;
|
|
--lh-snug: 1.32;
|
|
--lh-normal: 1.55;
|
|
|
|
--section-gap: 9rem;
|
|
--section-head-gap: 2rem;
|
|
--measure: 52ch;
|
|
--page-max: 60rem;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
LINEN — desaturated linen-beige · LIGHT GEOMETRIC SANS display
|
|
Sans-serif display is the key differentiator from Specimen / Atelier / Salon
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="linen"] {
|
|
--color-paper: oklch(89% 0.022 95);
|
|
--color-paper-2: oklch(86% 0.026 95);
|
|
--color-paper-3: oklch(82% 0.030 95);
|
|
--color-rule: oklch(72% 0.022 95);
|
|
--color-rule-2: oklch(58% 0.024 95);
|
|
--color-muted: oklch(46% 0.020 90);
|
|
--color-neutral: oklch(34% 0.022 90);
|
|
--color-ink-2: oklch(28% 0.024 90);
|
|
--color-ink: oklch(22% 0.025 90);
|
|
--color-accent: oklch(46% 0.06 95);
|
|
--color-accent-ink: oklch(50% 0.07 95);
|
|
--color-focus: oklch(50% 0.10 100);
|
|
|
|
--font-display: "IBM Plex Sans", "Hanken Grotesk", ui-sans-serif, sans-serif;
|
|
--font-body: "IBM Plex Sans", "Hanken Grotesk", ui-sans-serif, sans-serif;
|
|
--font-serif: "Cormorant Garamond", ui-serif, Georgia, serif;
|
|
--font-label: "IBM Plex Mono", ui-monospace, monospace;
|
|
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 300;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(3rem, 5.5vw + 1rem, 5.75rem);
|
|
--text-display-s: clamp(2rem, 3vw + 1rem, 3rem);
|
|
|
|
--tracking-display: -0.018em;
|
|
--tracking-tight: -0.008em;
|
|
--tracking-label: 0.16em;
|
|
|
|
--lh-tight: 1.06;
|
|
--lh-snug: 1.20;
|
|
--lh-normal: 1.55;
|
|
--lh-relaxed: 1.7;
|
|
|
|
--section-gap: 10rem;
|
|
--section-head-gap: 2.5rem;
|
|
--measure: 56ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
ALMANAC — encyclopaedic · COOL pale paper (not warm) · slate accent
|
|
Cool hue 245 is the key differentiator from the warm-cream cluster
|
|
+ dense type · sticky labels · grid lines
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="almanac"] {
|
|
--color-paper: oklch(94% 0.008 245);
|
|
--color-paper-2: oklch(91% 0.010 245);
|
|
--color-paper-3: oklch(86% 0.012 240);
|
|
--color-rule: oklch(74% 0.012 240);
|
|
--color-rule-2: oklch(38% 0.018 240);
|
|
--color-muted: oklch(46% 0.014 245);
|
|
--color-neutral: oklch(28% 0.016 245);
|
|
--color-ink-2: oklch(20% 0.018 245);
|
|
--color-ink: oklch(16% 0.020 245);
|
|
--color-accent: oklch(38% 0.135 250);
|
|
--color-accent-ink: oklch(40% 0.13 250);
|
|
--color-focus: oklch(38% 0.135 250);
|
|
|
|
--font-display: "Bricolage Grotesque", "IBM Plex Sans", ui-sans-serif, sans-serif;
|
|
--font-body: "IBM Plex Sans", "The Future", ui-sans-serif, sans-serif;
|
|
--font-serif: "Newsreader", ui-serif, Georgia, serif;
|
|
--font-label: "IBM Plex Mono", ui-monospace, monospace;
|
|
--font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 600;
|
|
--display-optical: 48;
|
|
--display-style: normal;
|
|
|
|
--text-xs: 0.6875rem;
|
|
--text-sm: 0.8125rem;
|
|
--text-base: 0.9375rem;
|
|
--text-md: 1.0625rem;
|
|
--text-lg: 1.25rem;
|
|
--text-xl: 1.5rem;
|
|
--text-2xl: 1.875rem;
|
|
--text-display: clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
|
|
--text-display-s: clamp(1.5rem, 2vw + 1rem, 2.25rem);
|
|
|
|
--tracking-display: -0.014em;
|
|
--tracking-tight: -0.005em;
|
|
--tracking-label: 0.06em;
|
|
|
|
--lh-tight: 1.1;
|
|
--lh-snug: 1.22;
|
|
--lh-normal: 1.5;
|
|
|
|
--space-xl: 2rem;
|
|
--space-2xl: 3rem;
|
|
--space-3xl: 4.5rem;
|
|
|
|
--section-gap: 4.5rem;
|
|
--section-head-gap: 1rem;
|
|
--measure: 64ch;
|
|
--page-max: 84rem;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
SPORT — crisp white · italic display · burnt orange accent
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="sport"] {
|
|
--color-paper: oklch(98% 0.003 250);
|
|
--color-paper-2: oklch(95% 0.005 250);
|
|
--color-paper-3: oklch(91% 0.007 250);
|
|
--color-rule: oklch(78% 0.008 250);
|
|
--color-rule-2: oklch(36% 0.060 255);
|
|
--color-muted: oklch(50% 0.020 250);
|
|
--color-neutral: oklch(30% 0.040 255);
|
|
--color-ink-2: oklch(22% 0.060 258);
|
|
--color-ink: oklch(16% 0.080 260);
|
|
--color-accent: oklch(58% 0.190 35);
|
|
--color-accent-ink: oklch(54% 0.20 35);
|
|
--color-focus: oklch(58% 0.190 35);
|
|
|
|
--font-display: "Bricolage Grotesque", "Space Grotesk", ui-sans-serif, sans-serif;
|
|
--font-body: "Plus Jakarta Sans", "Hanken Grotesk", "The Future", ui-sans-serif, sans-serif;
|
|
--font-serif: "Bricolage Grotesque", ui-sans-serif, sans-serif;
|
|
--font-label: "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 700;
|
|
--display-style: italic;
|
|
--display-optical: 96;
|
|
|
|
--text-display: clamp(3.5rem, 8vw + 1rem, 8.5rem);
|
|
--text-display-s: clamp(2.25rem, 4vw + 1rem, 4rem);
|
|
--text-2xl: 2.5rem;
|
|
--text-xl: 1.875rem;
|
|
|
|
--tracking-display: -0.04em;
|
|
--tracking-tight: -0.018em;
|
|
--tracking-label: 0.10em;
|
|
|
|
--lh-tight: 0.94;
|
|
--lh-snug: 1.06;
|
|
|
|
--section-gap: 6rem;
|
|
--section-head-gap: 1.5rem;
|
|
|
|
--rule-hair: 1px;
|
|
--rule-fine: 2px;
|
|
--measure: 58ch;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
STUDIO — modern editorial agency · italic Instrument Serif
|
|
Inspiration: 14islands, Mathieu Triay, Frame, Gretel, contemporary
|
|
studio portfolios in 2026. Forest-green accent — uncommon, distinctive.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="studio"] {
|
|
--color-paper: oklch(96.5% 0.014 95);
|
|
--color-paper-2: oklch(94% 0.016 95);
|
|
--color-paper-3: oklch(90% 0.018 95);
|
|
--color-rule: oklch(82% 0.012 90);
|
|
--color-rule-2: oklch(70% 0.010 90);
|
|
--color-muted: oklch(48% 0.010 95);
|
|
--color-neutral: oklch(34% 0.014 100);
|
|
--color-ink-2: oklch(22% 0.018 100);
|
|
--color-ink: oklch(13% 0.020 100);
|
|
--color-accent: oklch(46% 0.140 145);
|
|
--color-accent-ink: oklch(46% 0.140 145);
|
|
--color-focus: oklch(46% 0.140 145);
|
|
|
|
--font-display: "Instrument Serif", "Tiempos", ui-serif, Georgia, serif;
|
|
--font-body: "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: "Instrument Serif", ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 400;
|
|
--display-style: italic;
|
|
|
|
--text-display: clamp(3.5rem, 7vw + 1rem, 7.5rem);
|
|
--text-display-s: clamp(2.25rem, 4vw + 1rem, 4.25rem);
|
|
|
|
--tracking-display: -0.022em;
|
|
--tracking-label: 0.08em;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
PASTEL — post-Linear soft tech · Geist sans, lavender paper
|
|
Inspiration: Linear (2025-26), Resend, Cron, Raycast, Vercel light.
|
|
The dev-tool aesthetic, but soft instead of stark.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="pastel"] {
|
|
--color-paper: oklch(96% 0.022 285);
|
|
--color-paper-2: oklch(93.5% 0.026 285);
|
|
--color-paper-3: oklch(90% 0.030 285);
|
|
--color-rule: oklch(82% 0.024 280);
|
|
--color-rule-2: oklch(72% 0.030 275);
|
|
--color-muted: oklch(50% 0.030 275);
|
|
--color-neutral: oklch(38% 0.038 270);
|
|
--color-ink-2: oklch(28% 0.040 270);
|
|
--color-ink: oklch(22% 0.040 270);
|
|
--color-accent: oklch(56% 0.130 282);
|
|
--color-accent-ink: oklch(56% 0.130 282);
|
|
--color-focus: oklch(56% 0.130 282);
|
|
|
|
--font-display: "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif;
|
|
--font-body: "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif;
|
|
--font-serif: "Newsreader", ui-serif, Georgia, serif;
|
|
--font-label: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 600;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(3rem, 5.5vw + 1rem, 6rem);
|
|
--text-display-s: clamp(2rem, 3vw + 1rem, 3.25rem);
|
|
|
|
--tracking-display: -0.035em;
|
|
--tracking-tight: -0.012em;
|
|
--tracking-label: 0.04em;
|
|
|
|
--lh-tight: 0.96;
|
|
}
|
|
|
|
/* ──────────────────────────────────────────────────────────────
|
|
RISO — risograph print · Bricolage display, off-register
|
|
Inspiration: Are.na, e-flux, Frieze, indie magazine sites.
|
|
Warm peach paper, riso cyan + yellow as accents, slight CMYK
|
|
misregistration on display via text-shadow.
|
|
────────────────────────────────────────────────────────────── */
|
|
|
|
[data-theme="riso"] {
|
|
--color-paper: oklch(91% 0.034 30);
|
|
--color-paper-2: oklch(87% 0.040 30);
|
|
--color-paper-3: oklch(82% 0.046 30);
|
|
--color-rule: oklch(70% 0.040 30);
|
|
--color-rule-2: oklch(56% 0.060 30);
|
|
--color-muted: oklch(46% 0.060 30);
|
|
--color-neutral: oklch(34% 0.060 30);
|
|
--color-ink-2: oklch(22% 0.060 30);
|
|
--color-ink: oklch(18% 0.060 30);
|
|
--color-accent: oklch(58% 0.170 220); /* riso cyan/teal */
|
|
--color-accent-2: oklch(78% 0.180 95); /* riso yellow */
|
|
--color-accent-ink: oklch(58% 0.170 220);
|
|
--color-focus: oklch(58% 0.170 220);
|
|
|
|
--font-display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
|
|
--font-body: "Newsreader", "Tiempos", ui-serif, Georgia, serif;
|
|
--font-serif: "Newsreader", ui-serif, Georgia, serif;
|
|
--font-label: "Bricolage Grotesque", ui-monospace, monospace;
|
|
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
--display-weight: 800;
|
|
--display-style: normal;
|
|
|
|
--text-display: clamp(3.25rem, 7vw + 1rem, 7.25rem);
|
|
--text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
|
|
|
|
--tracking-display: -0.04em;
|
|
--tracking-tight: -0.014em;
|
|
--tracking-label: 0.06em;
|
|
|
|
--lh-tight: 0.92;
|
|
--lh-snug: 1.10;
|
|
}
|