/* ============================================================================ Design Tokens — extracted from The Picture Day Rig marketing site Source of truth: https://thepicturedayrig.com (repo: the-picture-day-rig) Extracted: 2026-07-07 (Design Session 1) Every value below has a real source. Citations use these keys: [tw] src/../tailwind.config.ts [css] src/app/globals.css [layout] src/app/layout.tsx [btn] src/components/button.tsx [logo] src/components/logo.tsx [form] src/app/booking/booking-form.tsx [prod] computed style verified live via browser dev tools (Playwright) [tw-def] Tailwind CSS framework default (the marketing site is built on Tailwind; the config extends, never overrides, these scales) [ADDED] NO marketing-site source — added for the intake portal. See docs/design/README.md → "Decisions". Flagged, not silent. Do NOT hand-edit downstream copies. Regenerate from this file when the marketing site's design system changes (see README → "Syncing tokens"). ========================================================================== */ :root { /* ─── Color ────────────────────────────────────────────────────────────── The Picture Day Rig palette is a warm, editorial neutral scale (ink → Studio White) plus a single brand red. Source: [tw] brand tokens block. */ --color-ink: #0A0A0A; /* [tw] ink — primary text / CTA fill; [prod] rgb(10,10,10) */ --color-graphite: #2A2A2A; /* [tw] graphite — secondary body text */ --color-slate: #6E6E6E; /* [tw] slate — muted / tertiary text */ --color-hairline: #D9D9D9; /* [tw] hairline — 1px borders, dividers, input underlines */ --color-stone: #F4F2EE; /* [tw] stone — subtle warm fill (banners, answered cards) */ --color-white: #FAFAF8; /* [tw] white — "Studio White" page bg, not pure #FFF; [prod] */ --color-accent: #D4452A; /* [tw] accent — "Picture Day Red"; [prod] rgb(212,69,42) */ /* Semantic roles (map the palette above to intent — what the intake portal templates and _shared.css reference). */ --color-bg: var(--color-white); /* page background [tw][prod] */ --color-surface: #FFFFFF; /* raised card surface on the warm bg — pure white reads as "paper" against Studio White [ADDED — see README] */ --color-fg: var(--color-ink); /* primary text [tw][prod] */ --color-fg-secondary: var(--color-graphite); /* secondary text [tw] */ --color-muted: var(--color-slate); /* muted text [tw] */ --color-border: var(--color-hairline); /* default border [tw] */ --color-subtle-bg: var(--color-stone); /* subtle fill [tw] */ --color-danger: #D4452A; /* [form][css] the marketing site uses the accent red for form errors and the focus ring — there is no separate error color. Fixed as a structural token so destructive UI stays red regardless of a photographer's accent choice. (accent==danger on the PDR instance — see README → Inconsistencies) */ --color-success: #2E7D52; /* [ADDED] no green exists on the marketing site. Required by the Page-3 answered-state spec ("checkmark + green"). Earthy forest green chosen to sit with the warm palette. */ --color-warning: #B8791F; /* [ADDED] no amber exists on the marketing site. Provided for token completeness; not used by any Session-1 mockup. */ /* On-color foregrounds (text placed on a filled swatch). */ --color-on-ink: var(--color-white); /* [btn] white text on ink buttons */ --color-on-accent: var(--color-white); /* [css] ::selection uses white on red */ --color-on-danger: var(--color-white); /* Photographer-overridable — an override site injects these two at :root and everything else stays fixed. Defaults reproduce The Picture Day Rig exactly: ink-filled primary buttons that shift to red on hover, red focus ring, red highlights. See docs/design/README.md → "Per-photographer override contract". */ --photographer-primary: var(--color-ink); /* [btn] primary CTA fill (rest state) — default ink */ --photographer-accent: var(--color-accent); /* [btn][css] hover / focus / eyebrow / rule — default red */ /* Convenience aliases the components read (so a photographer override to the two vars above flows through without touching component CSS). */ --focus-ring: var(--photographer-accent); /* [css] :focus-visible outline is accent, not blue */ /* ─── Type ─────────────────────────────────────────────────────────────── One sans family (Inter) for body AND headings — headings differ only by size/weight/tracking, never family. One mono family (JetBrains Mono) for eyebrows, captions, and field labels. Source: [layout] self-hosts the woff2 files; [tw] fontFamily; [prod] resolves through the fallback chain. */ --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* [layout][tw] */ --font-heading: var(--font-body); /* [tw] no separate heading family — same Inter stack */ --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* [layout][tw] */ /* Type scale — 10 steps, ascending. Values are font-size; the paired line-height / letter-spacing / weight for each step are the companion tokens below. Source: [tw] fontSize; [prod] confirmed display=120px. */ --type-scale-1: 0.8125rem; /* 13px "eyebrow" lh 1 ls 0.18em 700 [tw] */ --type-scale-2: 0.875rem; /* 14px "caption" lh 1.4 ls 0.04em 400 [tw] */ --type-scale-3: 1.125rem; /* 18px "body" lh 1.6 400 [tw] */ --type-scale-4: 1.375rem; /* 22px "lead" lh 1.55 400 [tw] */ --type-scale-5: 1.5rem; /* 24px "h3" lh 1.3 ls -0.005em 700 [tw] */ --type-scale-6: 2rem; /* 32px "h2" lh 1.15 ls -0.015em 700 [tw] */ --type-scale-7: 2.75rem; /* 44px "h2-lg" lh 1.1 ls -0.02em 800 [tw] */ --type-scale-8: 3.5rem; /* 56px "h1" lh 1.05 ls -0.025em 800 [tw] */ --type-scale-9: 5rem; /* 80px "h1-lg" lh 1 ls -0.03em 800 [tw] */ --type-scale-10: 7.5rem; /* 120px "display" lh 0.95 ls -0.04em 800 [tw][prod] */ /* Semantic type aliases (what templates actually read — friendlier than the numbered scale). Line-height + tracking baked into component styles. */ --type-eyebrow: var(--type-scale-1); --type-caption: var(--type-scale-2); --type-body: var(--type-scale-3); --type-lead: var(--type-scale-4); --type-h3: var(--type-scale-5); --type-h2: var(--type-scale-6); --type-h1: var(--type-scale-8); /* Line-heights (paired to the scale above). Source: [tw] fontSize configs. */ --leading-none: 1; /* [tw] eyebrow */ --leading-tight: 1.15; /* [tw] h2 */ --leading-snug: 1.3; /* [tw] h3 */ --leading-normal: 1.55; /* [tw] lead */ --leading-relaxed: 1.6; /* [tw] body */ /* Letter-spacing / tracking. Source: [tw] letterSpacing + fontSize configs. */ --tracking-tightest: -0.04em; /* [tw] display */ --tracking-tighter: -0.025em; /* [tw] h1 */ --tracking-tight: -0.015em; /* [tw] h2 */ --tracking-mono: 0.18em; /* [tw] eyebrow / mono labels */ /* Font weights actually used. Source: [tw] fontSize weights + [layout] faces. */ --weight-regular: 400; /* [layout] inter-400 */ --weight-medium: 500; /* [layout] inter-500 */ --weight-semibold: 600; /* [layout] inter-600 */ --weight-bold: 700; /* [layout] inter-700 */ --weight-extrabold: 800; /* [layout] inter-800 — headings, wordmark, primary buttons */ /* ─── Spacing ──────────────────────────────────────────────────────────── The marketing site uses Tailwind's DEFAULT spacing scale unmodified (the config extends colors/type/etc. but never touches `spacing`). Base unit is 0.25rem (4px); step number mirrors Tailwind's own index (hence the gaps at 7/9/11…). Source: [tw-def]; individual steps observed in [btn][form][logo] (e.g. px-7/py-4 buttons, px-6→px-24 container gutters, py-24→py-40 sections). */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px — default container gutter (px-6) */ --space-7: 1.75rem; /* 28px — primary button horizontal padding (px-7) */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px — container gutter @ sm (px-10) */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px — container gutter @ lg (px-16) */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px — container gutter @ xl (px-24); section pad */ --space-32: 8rem; /* 128px — section pad @ sm (py-32) */ --space-40: 10rem; /* 160px — section pad @ lg (py-40) */ /* ─── Layout / measure ─────────────────────────────────────────────────── Content measures. Source: [css] :root custom props + [tw] maxWidth. */ --measure-prose: 36rem; /* [tw] maxWidth.prose / [css] --measure-narrow */ --measure-readable: 42rem; /* [tw] maxWidth.readable */ --measure-editorial: 64rem; /* [tw] maxWidth.editorial / [css] --measure-wide */ --container-max: 110rem; /* [css] .container-editorial max-width */ /* Responsive breakpoints (locked by the design brief; align with Tailwind). */ --bp-mobile: 640px; /* design brief: mobile ≤ 640px */ --bp-tablet: 1024px; /* design brief: tablet 641–1024 */ /* desktop ≥ 1025px */ /* ─── Radius ───────────────────────────────────────────────────────────── The Picture Day Rig is a SHARP-CORNERED system by deliberate brand choice — buttons, cards, inputs, logo frame, modals all have square corners. Verified: [prod] border-radius: 0px on the header CTA; [logo][btn][form] carry no rounding. The only rounding in the whole site is `rounded-full` on status pills and bullet dots. So there is no radius *scale*: */ --radius-sm: 0; /* [prod] sharp — inputs, small elements */ --radius-md: 0; /* [prod] sharp — buttons, cards */ --radius-lg: 0; /* [prod] sharp — modals, large surfaces */ --radius-full: 9999px; /* [css/page] pills + dots ONLY (rounded-full) */ /* ─── Shadow ───────────────────────────────────────────────────────────── Elevation on the marketing site is expressed through 1px hairline BORDERS, not shadows. There is exactly ONE box-shadow in the codebase: Tailwind's `shadow-2xl` on the booking modal and the schedule lightbox → --shadow-lg below (the real, cited one). shadow-sm/md are Tailwind defaults included for a complete scale but NOT used on the marketing site (flagged). */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* [tw-def] — not used on marketing site */ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10); /* [tw-def] — not used on marketing site */ --shadow-lg: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* [form] shadow-2xl — booking modal + lightbox */ /* ─── Motion ───────────────────────────────────────────────────────────── Restrained, ease-out. Source: [tw] animation/keyframes + [btn] transitions. */ --duration-fast: 200ms; /* [form] quick state changes */ --duration-base: 300ms; /* [btn] transition-all duration-300 */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* [tw] fade-in-up / rule-grow easing */ }