/* Hallmark · tokens · Prudence Construction * theme: custom — "quarried stone, desert light, cut by hand" * axes: light paper / high-contrast-serif / warm accent * anchor hue 48 (weathered sandstone). No purple anywhere — hard client constraint. * * Flipped dark → light. Six pages of near-black read as heavy rather than * expensive, and the archive works against it: this client's photographs are * almost entirely white marble, cream porcelain and pale stone, which sat on * the dark ground as bright rectangles floating in a void. On limestone paper * the same photographs sit *in* the page. It is also where the reference * class actually lives — luxury stone and tile brands are overwhelmingly * light, warm and airy, not dark. * * The dark palette is preserved below under [data-theme="dark"]; put that * attribute on to switch the whole site back. */ :root { /* ── Colour — warm limestone ───────────────────────────────────────── Every neutral is tinted toward the anchor hue. A cool grey next to a warm accent is the tell, and it is the first thing that makes a light page look like a default rather than a decision. */ --color-paper: oklch(96.5% 0.009 72); /* limestone plaster */ --color-paper-2: oklch(93.5% 0.012 66); /* raised band */ --color-paper-3: oklch(90% 0.014 62); /* highest surface */ --color-rule: oklch(84% 0.014 58); /* hairlines */ --color-neutral: oklch(47% 0.016 50); /* tertiary / small labels */ --color-muted: oklch(38% 0.016 48); /* secondary body */ --color-ink: oklch(21% 0.018 45); /* warm charcoal */ /* Accent drops to 48% on light — the 64% used on the dark ground is a mid-tone that fails against near-white paper. */ --color-accent: oklch(48% 0.140 42); /* oxidised red rock */ --color-accent-dim: oklch(58% 0.105 42); /* numerals, at-rest marks */ --color-focus: oklch(45% 0.165 42); /* Grain reads heavier on a light ground than a dark one — the same noise that gave the dark page tooth makes a pale page look dirty. */ --grain-opacity: 0.028; /* ── Type ──────────────────────────────────────────────────────────── Fraunces carries the luxury register; IBM Plex Sans is the engineering counterweight. Two families — the serif/technical tension is the brand: hand craft held to a tolerance. */ --font-display: "Fraunces", ui-serif, Georgia, serif; --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; /* major third, 1.25, from a 16px body */ --text-xs: 0.64rem; --text-sm: 0.8rem; --text-base: 1rem; --text-md: 1.25rem; --text-lg: 1.5625rem; --text-xl: 1.9531rem; --text-2xl: 2.4414rem; --text-3xl: 3.0518rem; --text-4xl: 3.8147rem; --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem); --text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.8147rem); /* Section titles ran at 2.44rem in the first pass — modest enough that the page had no scale contrast anywhere. */ --text-section: clamp(2.4414rem, 3vw + 1rem, 4rem); /* The statement is 19 characters — inside the short-headline bucket, so it is allowed to run past the usual 5.25rem display ceiling. */ --text-statement: clamp(2.75rem, 7vw, 7rem); /* ── Space — 4pt scale ───────────────────────────────────────────── */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 7rem; --space-4xl: 10rem; --measure: 65ch; --page-inline: clamp(1.25rem, 5vw, 5rem); --page-max: 84rem; /* ── Line ────────────────────────────────────────────────────────── */ --rule-hair: 1px; --rule-thick: 2px; /* ── Radius — near-square. Stone is cut, not moulded. ────────────── */ --radius-none: 0; --radius-sm: 2px; /* ── Motion ──────────────────────────────────────────────────────── */ --dur-instant: 90ms; --dur-short: 180ms; --dur-mid: 320ms; --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); /* ── Z scale ─────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-nav: 30; --z-overlay:40; --z-top: 50; } /* ── Dark, preserved ────────────────────────────────────────────────── The original palette. Set data-theme="dark" on to switch the whole site back; every colour on the site references these tokens, so nothing else has to change. */ [data-theme="dark"] { --color-paper: oklch(15% 0.012 48); --color-paper-2: oklch(19% 0.013 48); --color-paper-3: oklch(24% 0.013 48); --color-rule: oklch(33% 0.011 48); --color-neutral: oklch(64% 0.010 48); --color-muted: oklch(74% 0.008 52); --color-ink: oklch(94% 0.007 75); --color-accent: oklch(64% 0.128 45); --color-accent-dim: oklch(52% 0.090 45); --color-focus: oklch(76% 0.145 45); --grain-opacity: 0.045; }