/* ===========================================================================
gregmulvey.com design tokens
Version 2.2 ratified 2026-09-10 (ruled by Greg after the UI audit)
Supersedes v2.1.1.
CHANGELOG 2.1.1 -> 2.2
+ --border-control: 1px solid ink-500 Interactive control boundaries only.
5.53:1 on paper, clearing the 3:1 that
WCAG 2.2 SC 1.4.11 requires to identify a
UI component. Applied to .field input,
.field textarea, select, and native radio
and checkbox.
= --border-default UNCHANGED Ruled 2026-09-10: decorative container
boundaries (cards, panels, chooser cards,
package cards) are EXEMPT from 1.4.11
because the content inside them stands
without the box. Its 1.48:1 is intentional
and is not a defect. Do not "fix" it.
= --surface-card UNCHANGED Same ruling. The 1.02:1 against the page
is the quiet look the brief asked for.
= --border-strong UNCHANGED The featured package tier's heavier edge
is deliberate emphasis, not an accident.
NOTE: Sprout Studio's embedded form fields are styled by Sprout inside its own
iframe. --border-control cannot and does not reach them.
Version 2.1.1 notes follow. Supersedes v2.1.
CHANGELOG 2.1 -> 2.1.1
~ .btn text-decoration: none added. Every
was inheriting the accent underline from the `a` rule,
so every button on the site shipped with a rule under it.
~ .door-two main a now .door-two main a:not(.btn). The door-two ink recolour
was overriding the button's own label colour, which made
the door-two hero CTA (.btn--neutral) black text on a
black fill. Buttons are exempt from the link system.
Version 2.1 notes follow. Supersedes v2.0. Token values and rules changed in 2.1, nothing else:
CHANGELOG 2.0 -> 2.1
+ --container-mid: 960px story-card and evidence-trio container
+ --btn-secondary-bg-active ink-100; .btn--secondary:active added
~ --size-lede fixed 1.25rem -> clamp(1.125rem, 1rem + 0.6vw, 1.25rem)
~ body color --text-primary -> --text-secondary (ink-700);
headings, .lede, labels, buttons stay --text-primary
~ .display text-transform: lowercase REMOVED. Lowercase is the
wordmark's alone; sentence headlines stay sentence case.
~ .door-one section --section-pad-y-lg -> --section-pad-y; .door-one .hero keeps -lg
+ .section-mark 40px x 2px ink rule above phone h2s
+ .site-nav a header and footer nav: ink, no underline, current = 2px ink
+ .story-card whole-card link in ink, h3 underline on hover; phone thumbnail-left
+ .evidence img, .gallery img, .story-card img --radius-sm on photographs
+ .door-two .gallery under 500px 3 columns
Rulings that changed NO token: focus ring stays --accent-700 on both doors;
door two hero CTA is .btn--neutral; package cards use .btn--secondary with
--border-strong on the featured tier; dark surface is the footer only.
Version 2.0 notes follow. Supersedes v1.0. Accent changed from dusty rose to raspberry; the rose
scarcity doctrine is RETIRED (it existed only because #d2afae could not
carry a button at 1.6:1).
RULES THE BUILD MUST ENFORCE
1. One family: Figtree, self-hosted variable WOFF2. No second webfont.
Plus Jakarta Sans and Fraunces are RESERVED to the IPS sub-brand.
2. ACCENT DISCIPLINE: full-strength raspberry (--accent-500) appears at
most TWICE per screen: the wordmark dot, and the link underline system.
It is NEVER running text and NEVER a second button.
3. Links: text in --accent-700, 2px underline in --accent-500.
4. Primary CTA: --accent-700 background, paper text. ONE per screen.
Never fill a button with --accent-500; at 4.2:1 it would need dark
text and reads like candy.
5. Secondary buttons: ink outline, no accent.
6. VALIDATION IS ACCENT-FREE. Raspberry never appears in form validation
UI. A form in an error state uses an INK primary button, not accent.
7. Error always ships with an icon, a 2px border, AND a sentence. Colour
never carries the state alone.
8. Door one: no imagery above the fold, ever.
9. #000000 is the primary-button hover only.
=========================================================================== */
:root {
/* ---------- INK (warm neutral ramp) ---------- */
--color-ink-900: #1a1a1a; /* primary type. LOCKED. */
--color-ink-700: #3d3a38; /* body, subheads */
--color-ink-500: #6b6663; /* meta, captions */
--color-ink-300: #a8a29e; /* placeholder, disabled */
--color-ink-200: #d6d1cd; /* strong border */
--color-ink-100: #e7e3df; /* hairline, dividers */
--color-ink-050: #f4f1ee; /* raised surface, section band */
--color-black: #000000; /* primary button hover ONLY */
/* ---------- PAPER ---------- */
--color-paper: #fdfcfb; /* page background. Not pure white. */
--color-paper-pure: #ffffff; /* image mats, cards on tinted bands */
/* ---------- ACCENT: raspberry ----------
500 is the dot and the underline. 700 carries all accent TEXT.
on-dark is the lightened stop for charcoal surfaces. */
--accent-050: #fdf5f8;
--accent-100: #f9e2ec; /* tint band, selection */
--accent-500: #cc4a80; /* THE DOT + link underline. 4.2:1, never text */
--accent-700: #96234f; /* link text, primary CTA fill. 7.7:1 on paper */
--accent-on-dark: #ec9bbd; /* accent text on charcoal */
/* ---------- FEEDBACK (accent-free zone) ---------- */
--color-error: #b3251e; /* signal red. 6.5:1 on paper. */
--color-error-bg: #fbefed;
--color-error-border: #e8c4bd;
--color-success: #1f6b3d; /* 6.4:1 on paper */
--color-success-bg: #eef4f0;
--color-success-border: #c5dbcd;
--color-warning: #8a5c00;
--color-warning-bg: #fbf5e8;
--color-warning-border: #e8d9ae;
--color-info: #4a5578;
--color-info-bg: #eff0f5;
--color-info-border: #ccd0de;
/* ---------- SEMANTIC SURFACES ---------- */
--surface-page: var(--color-paper);
--surface-raised: var(--color-ink-050);
--surface-card: var(--color-paper-pure);
--surface-dark: var(--color-ink-900);
--surface-tint-accent: var(--accent-050);
/* ---------- SEMANTIC TEXT ---------- */
--text-primary: var(--color-ink-900);
--text-secondary: var(--color-ink-700);
--text-muted: var(--color-ink-500);
--text-disabled: var(--color-ink-300);
--text-on-dark: var(--color-ink-050);
--text-muted-on-dark: var(--color-ink-300);
--text-accent-on-dark: var(--accent-on-dark);
/* ---------- BORDERS ---------- */
--border-hairline: 1px solid var(--color-ink-100);
--border-default: 1px solid var(--color-ink-200);
--border-strong: 1px solid var(--color-ink-700);
/* Interactive controls only, never containers. See the 2.2 changelog above. */
--border-control: 1px solid var(--color-ink-500);
--border-on-dark: 1px solid var(--color-ink-700);
--border-pullquote: 3px solid var(--accent-500); /* the one accent rule */
/* ---------- LINKS ---------- */
--link-color: var(--accent-700);
--link-underline-color: var(--accent-500);
--link-underline-width: 2px;
--link-underline-offset: 0.18em;
--link-hover-color: var(--color-ink-900);
--link-hover-underline: var(--accent-700);
--link-on-dark: var(--accent-on-dark);
--link-on-dark-underline: var(--accent-500);
/* ---------- BUTTONS ---------- */
--btn-primary-bg: var(--accent-700);
--btn-primary-text: var(--color-paper);
--btn-primary-bg-hover: #7d1a41;
--btn-primary-bg-active: #6a1537;
--btn-secondary-bg: transparent;
--btn-secondary-text: var(--color-ink-900);
--btn-secondary-border: var(--color-ink-900);
--btn-secondary-bg-hover: var(--color-ink-050);
--btn-secondary-bg-active: var(--color-ink-100); /* 2.1 */
/* accent-free variant: REQUIRED on any screen in a validation error state */
--btn-neutral-bg: var(--color-ink-900);
--btn-neutral-text: var(--color-paper);
--btn-neutral-bg-hover: var(--color-black);
--btn-disabled-bg: var(--color-ink-100);
--btn-disabled-text: var(--color-ink-300);
/* ---------- FOCUS ---------- */
--focus-ring-color: var(--accent-700);
--focus-ring-width: 3px;
--focus-ring-offset: 2px;
--focus-ring-on-dark: var(--accent-on-dark);
/* ---------- TYPOGRAPHY ---------- */
--font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 800;
--size-display: clamp(2.75rem, 6vw, 4.5rem);
--size-h1: clamp(2.25rem, 4.5vw, 3.25rem);
--size-h2: clamp(1.75rem, 3vw, 2.25rem);
--size-h3: clamp(1.3rem, 2vw, 1.5rem);
--size-h4: 1.125rem;
--size-lede: clamp(1.125rem, 1rem + 0.6vw, 1.25rem); /* 2.1: 18px on the phone, 20px at desktop */
--size-body: 1.125rem; /* 18px. the reading size. */
--size-body-sm: 1rem;
--size-caption: 0.875rem;
--size-eyebrow: 0.75rem;
--leading-display: 1.02;
--leading-h1: 1.08;
--leading-h2: 1.15;
--leading-h3: 1.25;
--leading-lede: 1.6;
--leading-body: 1.7;
--leading-tight: 1.35;
--tracking-display: -0.03em;
--tracking-h1: -0.025em;
--tracking-h2: -0.02em;
--tracking-h3: -0.01em;
--tracking-normal: 0;
--tracking-caption: 0.01em;
--tracking-eyebrow: 0.12em;
--measure-narrative: 68ch;
--measure-lede: 60ch;
--measure-caption: 52ch;
/* ---------- SPACING (4px base) ---------- */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px; --space-10: 128px; --space-11: 160px;
--section-pad-y: var(--space-8);
--section-pad-y-lg: var(--space-10);
--section-pad-y-dense: var(--space-7);
--gutter: var(--space-5);
/* ---------- LAYOUT ---------- */
--container-narrow: 720px;
--container-max: 1200px;
--container-mid: 960px; /* 2.1: story-card grid, evidence trios */
--container-wide: 1440px;
--radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 999px;
--shadow-sm: 0 1px 2px rgba(26,26,26,0.06);
--shadow-md: 0 4px 16px rgba(26,26,26,0.08);
/* ---------- MOTION ---------- */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms;
/* ---------- REFERENCE ONLY. NOT UI TOKENS. ----------
Retired: dusty rose #d2afae (previous accent, superseded session t).
Monogram colorways: slate indigo #5f6084, warm taupe #685d57,
muted sage #7da9a4. Never used in site UI.
IPS sub-brand (reveal.gregmulvey.com, separate skin, do not reconcile):
Fraunces italic, Plus Jakarta Sans, terra cotta #c5532b.
--------------------------------------------------- */
}
/* =========================== BASE =========================== */
@font-face {
font-family: "Figtree";
src: url("/fonts/figtree-variable.woff2") format("woff2-variations");
font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Figtree";
src: url("/fonts/figtree-italic-variable.woff2") format("woff2-variations");
font-weight: 300 900; font-style: italic; font-display: swap;
}
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--surface-page);
color: var(--text-secondary); /* 2.1: ink-700 body under ink-900 headings */
font-family: var(--font-sans);
font-size: var(--size-body);
font-weight: var(--weight-regular);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
}
.display {
font-size: var(--size-display); line-height: var(--leading-display);
letter-spacing: var(--tracking-display); font-weight: var(--weight-black);
/* 2.1: text-transform: lowercase removed. Lowercase is reserved to the wordmark. */
}
h1, h2, h3, h4, .lede, .display, label, .btn, strong { color: var(--text-primary); } /* 2.1 */
h1 { font-size: var(--size-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); font-weight: var(--weight-black); }
h2 { font-size: var(--size-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); font-weight: var(--weight-bold); }
h3 { font-size: var(--size-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); font-weight: var(--weight-semibold); }
h4 { font-size: var(--size-h4); line-height: var(--leading-tight); font-weight: var(--weight-semibold); }
.lede { font-size: var(--size-lede); line-height: var(--leading-lede); max-width: var(--measure-lede); }
.caption { font-size: var(--size-caption); line-height: 1.5; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caption); color: var(--text-muted); max-width: var(--measure-caption); }
.eyebrow { font-size: var(--size-eyebrow); line-height: 1.2; font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.prose { max-width: var(--measure-narrative); }
/* LINKS: stop text, accent underline. The accent is never the text. */
a {
color: var(--link-color);
text-decoration: underline;
text-decoration-color: var(--link-underline-color);
text-decoration-thickness: var(--link-underline-width);
text-underline-offset: var(--link-underline-offset);
transition: color var(--dur-fast) var(--ease-standard),
text-decoration-color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover-color); text-decoration-color: var(--link-hover-underline); }
a:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
::selection { background: var(--accent-100); color: var(--color-ink-900); }
.pullquote {
border-left: var(--border-pullquote);
padding-left: var(--space-5);
font-size: var(--size-lede);
font-weight: var(--weight-semibold);
line-height: 1.4;
}
.surface-dark { background: var(--surface-dark); color: var(--text-on-dark); }
.surface-dark a { color: var(--link-on-dark); text-decoration-color: var(--link-on-dark-underline); }
.surface-dark a:hover { color: var(--color-paper); }
.surface-dark .caption, .surface-dark .eyebrow { color: var(--text-muted-on-dark); }
.surface-dark :focus-visible { outline-color: var(--focus-ring-on-dark); }
/* BUTTONS. One primary per screen. */
.btn {
display: inline-flex; align-items: center; gap: var(--space-2);
font-family: var(--font-sans); font-size: var(--size-body-sm);
font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caption);
padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
border: 1px solid transparent; cursor: pointer;
text-decoration: none; /* 2.1.1: buttons are exempt from the link underline system */
transition: background var(--dur-fast) var(--ease-standard);
}
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-text); }
.btn--primary:active { background: var(--btn-primary-bg-active); color: var(--btn-primary-text); }
.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); }
.btn--secondary:hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-text); }
.btn--secondary:active { background: var(--btn-secondary-bg-active); color: var(--btn-secondary-text); } /* 2.1 */
/* REQUIRED on any screen showing a validation error. */
.btn--neutral { background: var(--btn-neutral-bg); color: var(--btn-neutral-text); }
.btn--neutral:hover { background: var(--btn-neutral-bg-hover); color: var(--btn-neutral-text); }
/* Each :hover/:active restates its text colour on purpose. A button is usually
an , and a:hover (0,1,1) outranks .btn--x (0,1,0), so without this the
label took --link-hover-color on hover: black on the black neutral button.
Fixed 2026-09-24. */
.btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
/* FORMS. Accent-free by rule.
Control boundaries use --border-control, not --border-default: a text field is
a UI component whose boundary must be identifiable (SC 1.4.11), unlike a card,
which is not. */
.field input, .field textarea, .field select {
width: 100%; font-family: var(--font-sans); font-size: var(--size-body-sm);
color: var(--text-primary); background: var(--color-paper-pure);
border: var(--border-control); border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
}
.field input[type="radio"], .field input[type="checkbox"] {
width: auto; border: var(--border-control); accent-color: var(--accent-700);
}
.field label { font-size: var(--size-body-sm); font-weight: var(--weight-semibold); display: block; margin-bottom: var(--space-2); }
.field--error label { color: var(--color-error); }
.field--error input,
.field--error textarea { border: 2px solid var(--color-error); background: var(--color-error-bg); }
.field--error .field__message { color: var(--color-error); font-size: var(--size-caption); margin-top: var(--space-2); }
.field__message::before { content: "⚠ "; } /* icon required, not decorative */
.alert--success {
background: var(--color-success-bg); border: 1px solid var(--color-success-border);
color: var(--color-success); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* =================== DOOR RULES (grammar, not skin) =================== */
/* DOOR ONE: retainer spine. Text-first. No imagery above the fold, ever. */
.door-one .hero { padding-block: var(--section-pad-y-lg); }
.door-one .hero img,
.door-one .hero picture,
.door-one .hero video { display: none; } /* enforcement, not styling */
.door-one section { padding-block: var(--section-pad-y); } /* 2.1: was -lg; hero keeps -lg above */
.door-one .prose { max-width: var(--measure-narrative); }
.door-one .gallery { display: none; }
/* DOOR TWO: a la carte. Image-first, denser, logistics-forward.
No full-strength accent in the body; the header wordmark dot is the only one. */
.door-two .hero { padding-block: 0; }
.door-two section { padding-block: var(--section-pad-y-dense); }
.door-two .gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.door-two main a:not(.btn) { color: var(--color-ink-900); text-decoration-color: var(--color-ink-300); } /* 2.1.1 */
.door-two main a:not(.btn):hover { text-decoration-color: var(--color-ink-900); }
.door-two .pullquote { border-left-color: var(--color-ink-200); }
/* Door two only: quiet text-only strip up to /how-i-work/. */
.door-two .upsell-strip {
border-top: var(--border-hairline);
padding-block: var(--space-7);
font-size: var(--size-body-sm);
color: var(--text-muted);
}
/* ===========================================================================
2.1 ADDITIONS
=========================================================================== */
/* Nav is exempt from the accent link system: header and footer alike, and on
the dark footer. One raspberry in a header: the dot. */
.site-nav a, .surface-dark .site-nav a { color: inherit; text-decoration: none; font-weight: var(--weight-medium); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; text-underline-offset: var(--space-2); }
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--color-ink-300); text-decoration-thickness: 2px; text-underline-offset: var(--space-2); }
/* Whole-card link. Text stays ink; the title takes the underline on hover. */
.story-card { display: block; color: var(--text-primary); text-decoration: none; }
.story-card h3 { transition: text-decoration-color var(--dur-fast) var(--ease-standard); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.story-card:hover h3 { text-decoration-color: var(--color-ink-900); }
.story-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, 1fr); max-width: var(--container-mid); margin-inline: auto; }
/* Photographs take the small radius. Buttons and fields are --radius-md, cards --radius-lg. */
.evidence img, .gallery img, .story-card img, .media-placeholder { border-radius: var(--radius-sm); }
.door-two .hero img { border-radius: 0; } /* the one square frame on door two */
/* Section mark: opens each phone section above its h2 where the hanging h2 cannot exist. */
.section-mark { width: 40px; height: 2px; background: var(--color-ink-900); margin-bottom: var(--space-5); }
.surface-raised .section-mark { background: var(--color-ink-900); }
@media (max-width: 500px) {
.door-two .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.story-grid { grid-template-columns: 1fr; gap: var(--space-6); }
.story-card { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-4); align-items: start; }
.story-card img { aspect-ratio: 4 / 5; object-fit: cover; }
}
@media (min-width: 501px) { .section-mark { display: none; } }