# SCYF Design Foundation Built in isolation from the current SCYF website build, per Felicia's instruction: fix the foundation first, then use it as an honest yardstick against what's live. This folder is the foundation itself — tokens plus rendered, lookable-at preview pages — the way `clients/watson-fs/_design-system/` exists for Watson Family Singers. **Sources used (all pre-approved, client-facing documents/assets):** - `docs/scyf-website-brief.md` — official Brand Guide palette/fonts, confirmed sitemap, client-drafted homepage copy, reference sites the client likes - `docs/scyf-intelligence.md` — org story, people, voice - `assets/logos/SCYF-Logo-Standard-Full.png` and `SCYF-Logo-Wide-Full.svg` (read directly, including the raw SVG source) - `assets/fonts/marble/` — the actual Marble font files on hand - `assets/photos/staff.webp`, `exhibitor-broiler.webp`, and the `fb-2026/` batch — real 2026 show photography **Not read:** anything under `website/`, `scyf-concepts.pages.dev`, or the three existing design/QA spec docs dated 2026-07-13. See the disclosure note at the bottom of this file. ## Color — five brand roles, real tint/shade ladders The official palette gives five roles: Forest green (primary), Grey (secondary), Near-black, Gold (accent), Off-white. The rule from the prior audit was **count steps per hue, not colors** — every core hue needs a lighter and a darker neighbor so two adjacent same-family sections still read as distinct rooms. So each role became a ladder: - **Pine** (green, primary) — 10 steps, 950→100. Two of the hexes are not derived, they're lifted verbatim from the client's own official art: `pine-900` (`#082F0C`) is the Brand Guide's shield fill; `pine-700` (`#115e18`) is the brighter green the logo's own SVG uses for its thin rule lines under "ESTD"/"1982" and under the wordmark. The brand already contains a tint relationship — this system just names it and fills in the rest of the ladder around it, tapering saturation as lightness rises so the light end reads as sage/moss rather than neon. - **Gold** (accent) — 8 steps. The official swatch (`#CA9A38`, gold-600) only measures 2.6:1 contrast on white — fine for icons and large decorative numerals, but it fails AA for text. Rather than quietly ignoring the brand color for body text and links, gold-900 (`#523D14`) is the same hue, deepened until it clears AA at 10.3:1. The system is explicit about which step is for what: gold-600 is `--accent-deco` (decorative/large only), gold-900 is `--accent` (text/links). - **Iron** (grey, secondary) — 7 steps, anchored at the official `#4D4D4D`. This is the cool, true neutral — it's the horseshoe/gear's painted steel. Used for borders, muted captions, dividers. - **Ink** (near-black) — the official `#1A1A1A`, for headings and primary body text. - **Paper** — a *separate* warm neutral family, not on the same axis as Iron. Iron is cool because it's steel; Paper is warm because it's the arena's khaki dirt and the show barn's weathered wood (visible directly in `staff.webp` and the `fb-2026/` batch). White (`#FFFFFF`, card surfaces) and paper-100 (`#F4F1EC`, page background) are measurably different: ΔL* (CIE Lstar, perceptual lightness) of 4.75. The official off-white next to pure white measures ΔL* 3.46 — a gap that's there in the spec but reads as sameness on a screen. That's the literal "3% gap is not a gap" finding from the prior audit, fixed with numbers instead of eyeballing it. All of this is in `preview/colors.html`, rendered, with the actual CIE-Lstar and WCAG contrast math computed live in the page (not hand-typed) so the numbers can be checked, not just trusted. ## Type — two families, real roles The Brand Guide is explicit: Marble (bold) for headings, Lato (regular) for body. That's the constraint, and it's a real one — a third typeface (a serif for "warmth," a script for a "signature" moment) is off the table, brand-guide-mandated, not a workaround I found a loophole in. The thing to avoid was the reported defect: `--font-display`, `--font-serif`, `--font-heavy` all resolving to the same face with no differentiation. The fix isn't a third face, it's making every role that exists actually look different, using the range Marble ships (nine weights, italics) and Lato's own weight range: | Role | Family | Weight | Case | |---|---|---|---| | Display (hero only) | Marble | ExtraBold 800 | UPPERCASE | | Heading (H1–H3) | Marble | Bold 700 | UPPERCASE | | Subhead (H4, cards) | Marble | SemiBold 600 | Title Case | | Accent (ONE reserved role: tagline, Fence Line) | Marble Italic | Regular 400 | sentence case | | Body | Lato | Regular/Light | sentence case | | Label (eyebrows, nav, buttons) | Lato | Bold 700 | UPPERCASE, tracked | Scale: 10 named steps (`--text--2` through `--text-7`), fluid (`clamp()`) from H4 up through the stat-band numerals, fixed rem below that so body copy doesn't reflow oddly at small sizes. Body base is a generous 1.0625rem — this audience reads outdoors, on phones, often over 40; readability at a distance matters more than density. Marble is self-hosted from the files already on hand (`assets/fonts/marble/WOFF/`) — only WOFF is present, no WOFF2. **Open item for the build:** convert to WOFF2 for real production performance. Lato is not in `assets/fonts/` yet; the token file's preview build pulls it from Google Fonts as a rendering convenience only — **self-host it the same way Marble is self-hosted** before this goes into the actual build. ## Spacing — a ladder plus two fluid tokens, on purpose A 10-step fixed ladder on an 8px base (`--space-1: 4px` → `--space-10: 128px`), the same shape as Watson's, for component-level rhythm: card gaps, icon spacing, stacked text. On top of that, two fluid tokens (`--space-section`, `--space-section-sm`) handle section-level outer padding, the way DAC's `clamp()`-based spacing does. This site has 9 homepage sections and 11 confirmed interior pages across three nav branches (About, Get Involved, Livestock Show) — a fixed-only ladder starves the big macro moves across that much surface area, a fluid-only system loses precision on the small ones. Use both, for their own jobs, rather than picking one discipline and forcing everything through it. ## Radii, shadows, the hairline rule - **Radii** stay modest — 4/8/14px, pill reserved for actual pills. The emblem is a horseshoe and a gear: mechanical, hand-tooled forms. A soft 20–24px blob radius (Watson's church-warm register) would read as boutique/spa, not steadfast ag foundation. This is a deliberate point of view, not a default. - **Shadows** are soft and ink-tinted, modest depth only — nothing floats like glass. This is a community foundation, not a SaaS product. - **The hairline rule** (`.scyf-rule`, `.scyf-rule--double`) is lifted directly from the logo file — the thin green rules flanking "ESTD"/"1982" and underlining the wordmark. Rather than being a one-off flourish that only appears on the emblem, it becomes a system-wide device: section title underlines, dividers, and the border treatment on the Fence Line component below. ## Section vocabulary Named against the confirmed sitemap and the client-drafted homepage copy order: **Hero · Track Cards (3-up) · Story Section (alternating photo+copy) · Process Steps (numbered) · Stat Band · Path Grid (6-up) · Event List · Closing Ribbon** Plus one connective pattern: **Fence Line** — a bounded aside (hairline rules top and bottom, the reserved italic accent type) that lives *inside* a parent section, the way Watson's `.scripture` and DAC's `.educlose__bridge` do. Per the standing rule from the last audit, bridge/connective copy is never its own floating standalone section — no reference site in the brief does that, and neither does this system. It shows up nested inside the Story Section in `preview/sections.html`. All eight section types plus the Fence Line are rendered in `preview/sections.html`, using the Foundation's actual 2026 show photography (`staff.webp`, `exhibitor-broiler.webp`, and two shots from the `fb-2026/` batch), not stock imagery or color blocks. ## Where the Brand Guide constrained me vs. where I had latitude **Constrained (non-negotiable, followed exactly):** - The five color roles and their official hex anchors - Marble for headings, Lato for body — no third typeface - Voice: plainspoken, no-frills, neighborly — this shows up as modest radii, restrained motion, gold used sparingly (decorative role only, never a dominant fill) **Latitude (my call, stated so a human can override it):** - The exact number of tint/shade steps per hue (I landed on 10 for Pine since it's the dominant brand color carrying the most section variety, 8 for Gold, 7 for Iron) - The Paper family being a *separate* warm neutral axis from Iron, rather than one shared grey ramp - The 10-step-ladder-plus-2-fluid-tokens spacing approach (a synthesis of the Watson and DAC patterns, not a copy of either) - Radii staying deliberately modest/hard-edged rather than soft - Naming the bridge component "Fence Line" (plain, on-voice, not corporate-sounding jargon) ## Genuinely undefined — needs a human decision - **Stat-band real numbers.** The brief lists these as TBC (exhibitors/yr, $ raised, scholarships awarded). `preview/sections.html` renders the stat band with the confirmed "40+ Years" plus bracketed placeholders for the rest — Terry's CLAUDE.md notes these still need real figures. - **Gold as a fill vs. gold as trim.** The Brand Guide says "sparing" but doesn't specify exactly where. This system treats gold as CTA-adjacent and stat-numeral color only, never a section background fill — that's a judgment call, flagged for Iris/Terry to confirm or override. - **WOFF2 conversion for Marble, and self-hosting Lato** — both are build-time follow-ups, not design-foundation decisions, but they block a real production build and should be scoped now. - **Whether the Sand band (`paper-300`) earns a permanent home** (e.g. always behind Process Steps) or should be used more sparingly/occasionally — I used it once in the section vocabulary as a demonstration; a human should decide its actual frequency rule. ## Disclosure The client folder's `CLAUDE.md` auto-loads as harness background context in every session in this directory, and it contains a status log describing the current live build in detail (specific hex values, section names, decisions already made). This was not sought out — it's forced ambient context, not a file I opened — but in the interest of full disclosure: I saw it before finishing this system. Every color, type, spacing, and radius decision above was derived independently from the Brand Guide, the logo file, and the photography, and cross-checked with math (HSL ramps, CIE Lstar, WCAG contrast) rather than pattern-matched against anything in that log. None of the specific values in that log (its gold text color, its section names, its numbers) appear here. A second agent doing the actual before/after comparison should treat this disclosure as a reason to verify independently, not take my word for it.