/* ============================================================ The Farmer's Table — Colors & Type Source of truth for all CSS variables. Pulled from ShavrickTFT_BrandID_050426 (V2 / 05.04.26). ============================================================ */ /* ---- Web fonts --------------------------------------------- Verified against ShavrickTFT_BrandID_050426_V2 p.4 (TYPOGRAPHY), 2026-09-10. The guide splits its five faces into two columns: DISPLAY / HEADLINES Poplar (Adobe Fonts) Clarendon Wide Stencil Bold (Adobe Fonts) SUBHEADS / BODY COPY Clarendon URW (Adobe Fonts) Roboto (Google Fonts) Besley ("a Google Font alternative to Clarendon URW") So Besley is sanctioned for SUBHEADS AND BODY, not for display — an earlier version of this comment had that backwards. Roboto is equally sanctioned for the same job; the guide offers them as alternatives, not as a hierarchy. The three Adobe faces are not redistributable from a static site, so the two Google faces carry the web build. That leaves the guide's actual DISPLAY column (Poplar, Clarendon Wide Stencil) with no web equivalent at all: this site uses Besley for headlines as a pragmatic stand-in, which the guide does not specifically authorise. Serving real Clarendon URW through an Adobe Fonts web project would close most of that gap. Cormorant Garamond appeared NOWHERE in the guide. It was added later for "editorial accents", spent most of its life below 18px where its hairlines fall under a pixel, and was removed entirely on 2026-09-10. Do not reintroduce it. See README.md -> Typography. ------------------------------------------------------------ */ /* Rye and Roboto Slab were loaded here but referenced by nothing: Rye was a stand-in for Clarendon Wide Stencil via --font-stencil, which no rule uses, and Roboto Slab sat unreachable at the end of the --font-display stack behind two faces that always resolve. Both were render-blocking downloads for glyphs that never painted. */ @import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,300..900;1,300..900&display=swap'); :root { /* ---- Brand color palette (exact from brand guide) ------- */ --c-tft-green: #0B4324; /* primary brand green */ --c-oxblood: #3D1310; /* deep wine, secondary */ --c-warm-black: #28211F; /* near-black w/ warm bias */ --c-leaf-green: #679740; /* fresh, accent */ --c-robins-egg: #67BBBD; /* soft teal */ --c-goldenrod: #F6BD58; /* warm yellow */ --c-autumn-orange: #D8612A; /* autumn orange */ /* Autumn orange is 3.15:1 on cream and 3.43:1 on paper. That clears the 3:1 bar for LARGE text and for non-text (rules, borders, underlines, focus rings), so it stays as-is everywhere it does those jobs. It does NOT clear 4.5:1, so orange used as SMALL text must use this darker cut instead: same hue, 20% down, 5.1:1 on cream and 5.6:1 on paper. */ --c-autumn-orange-text: #A24920; /* ---- Cream / paper neutrals (extracted from collateral) - */ --c-cream: #F4ECD8; /* used as page bg in collateral */ --c-paper: #FAF6EA; /* lightest paper */ --c-bone: #ECE3CC; /* deeper cream */ --c-stone: #C9BFA3; /* muted neutral */ /* ---- Functional / semantic ------------------------------ */ --bg: var(--c-cream); --bg-elevated: var(--c-paper); --bg-inverse: var(--c-tft-green); --bg-accent-warm: var(--c-goldenrod); --bg-accent-cool: var(--c-robins-egg); --fg: var(--c-warm-black); --fg-muted: #6B5E54; /* NOT a text colour: 2.78:1 on cream, below even the 3:1 large-text bar. Borders, dividers and disabled affordances only. */ --fg-subtle: #9A8C7E; --fg-on-dark: var(--c-paper); --fg-brand: var(--c-tft-green); --fg-accent: var(--c-autumn-orange); /* ---- Text de-emphasis -------------------------------------------------- De-emphasis is a COLOUR, never an opacity. Fading ink with opacity thins the glyph as well as lightening it, which is what made small serif metadata dissolve into the cream. These four steps are the only legal text colours; each is measured against the surface it is allowed on. --ink #28211F 13.4:1 on cream primary --ink-muted #6B5E54 5.3:1 on cream metadata, captions --paper-ink #FAF6EA 10.6:1 on green primary on dark --paper-muted #C5CFBE 7.1:1 on green metadata on dark */ --ink: var(--c-warm-black); --ink-muted: var(--fg-muted); --paper-ink: var(--c-paper); --paper-muted: #C5CFBE; --border: #D9CFB6; --border-strong: var(--c-warm-black); --link: var(--c-tft-green); --link-hover: var(--c-autumn-orange); --success: var(--c-leaf-green); --warning: var(--c-goldenrod); --danger: var(--c-oxblood); --info: var(--c-robins-egg); /* ---- Type families ------------------------------------------------- Two families, split by job: BESLEY reads. Headlines, subheads, and body copy — everything the visitor actually reads as language. The guide lists Besley under Subheads / Body Copy as "a Google Font alternative to Clarendon URW", so this is the brand's own Clarendon voice as closely as a web licence allows. ROBOTO labels. Interface furniture only: nav, buttons, form controls, tracked uppercase micro-type, dates, counts, chips. A slab serif turns to mush at 10px with 0.2em of tracking; this is the one job Roboto is better at. If you are adding a rule and it is a SENTENCE, it takes --font-text. If it is a LABEL or a CONTROL, it takes --font-ui. -------------------------------------------------------------------- */ --font-display: "Besley", "Clarendon URW", Georgia, serif; --font-text: "Besley", "Clarendon URW", Georgia, serif; --font-ui: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Italic accents (pull quotes, emphasised words in headings) — Besley has a true drawn italic with real slab structure, so it holds its weight beside the roman instead of thinning against it. */ --font-italic: "Besley", "Clarendon URW", Georgia, serif; /* The guide's DISPLAY column (Poplar, Clarendon Wide Stencil Bold) is Adobe Fonts with no web licence here, so this resolves to Besley heavy for anyone who reaches for it. Nothing currently does. */ --font-stencil: "Clarendon Wide Stencil", "Besley", Georgia, serif; /* --font-body is the OLD name for the sans and is kept as an alias so the ~200 existing UI rules keep working. New rules should say --font-ui. */ --font-body: var(--font-ui); /* Mono (for codes / data tables in admin contexts) */ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---- Type scale (tuned to brand collateral) ------------ */ --fs-display-xl: 96px; /* poster headline */ --fs-display-l: 72px; --fs-display-m: 56px; --fs-h1: 44px; --fs-h2: 34px; --fs-h3: 26px; --fs-h4: 20px; --fs-body-l: 19px; --fs-body: 16px; --fs-body-s: 14px; --fs-caption: 12px; --fs-eyebrow: 13px; /* ---- Line heights -------------------------------------- */ --lh-display: 0.95; --lh-heading: 1.1; --lh-body: 1.55; --lh-tight: 1.25; /* ---- Letter spacing ------------------------------------ */ --ls-eyebrow: 0.18em; /* WIDE caps for tags & section labels */ --ls-display: -0.01em; /* slightly tight on big slabs */ --ls-body: 0; /* ---- Spacing / radii / shadows ------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-pill: 999px; /* The brand vibe is hand-cut, not glossy. Use shadows sparingly. */ --shadow-sm: 0 1px 2px rgba(40, 33, 31, 0.08); --shadow-md: 0 6px 14px rgba(40, 33, 31, 0.12); --shadow-paper: 0 2px 0 rgba(40, 33, 31, 0.08), 0 8px 24px rgba(40, 33, 31, 0.10); } /* ---- Semantic element styles ------------------------------ */ .tft-display-xl, .tft-h0 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--fg-brand); text-transform: uppercase; } .tft-h1 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h1); line-height: var(--lh-heading); color: var(--fg-brand); } .tft-h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--fg-brand); } .tft-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--fg); } .tft-h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-tight); color: var(--fg); } .tft-eyebrow { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-accent); } .tft-body, p.tft { font-family: var(--font-text); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); } .tft-body-l { font-size: var(--fs-body-l); line-height: var(--lh-body); } .tft-body-s { font-size: var(--fs-body-s); line-height: var(--lh-body); } .tft-caption { font-size: var(--fs-caption); color: var(--fg-muted); letter-spacing: 0.04em; } a.tft, .tft a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } a.tft:hover, .tft a:hover { color: var(--link-hover); }