# Saturday Circuit Design System

**Saturday Circuit** is a college football fandom site: featured-reporter news, game recaps, social reactions, and recruiting commitments. "Your home for all of the latest college football news and updates."

**Sources given:** company description only — no codebase, Figma, fonts, or logo files were provided. Everything here is authored from scratch as a professional sports-news aesthetic, built to be **reskinned in any school's colors** by overriding the `--team-*` tokens (example skins: `[data-team="crimson"|"burnt-orange"|"forest"|"royal"|"purple-gold"]` in `tokens/colors.css`).

**Logo:** a white "SC" mark was supplied by the user (`assets/logo-sc-white.png`, white-on-transparent — dark surfaces only). The full wordmark remains plain type (Archivo 800, uppercase, "SATURDAY CIRCUIT"); pair mark + wordmark in headers.

## Content fundamentals
- Voice: confident beat-reporter, present tense, punchy. Headlines are declarative, no clickbait ellipses: "Iron Valley flips 4-star QB from Ridgemont", "Takeaways: Coastal survives in overtime".
- Casing: sentence case for headlines and body; UPPERCASE reserved for overlines/kickers ("RECRUITING", "GAME RECAP", "FINAL"), nav, and buttons.
- Second person sparingly; the site speaks as a newsroom ("we", bylines by name). Bylines: "By Dana Whitfield · 2h ago".
- Numbers matter: rankings "#4", records "(8-1)", scores big and bold, star ratings for recruits.
- No emoji in editorial UI. Social-reaction modules may quote fan posts verbatim (emoji allowed inside quoted content only).

## Visual foundations
- **Color:** white paper base, ink neutrals for text, one team-primary + one team-secondary accent. Primary is used structurally (top bar, heavy rules, tags, links); secondary is a highlight (stars, accents), never a text color on white. Status reds/greens for LIVE/W/L are fixed, not skinnable.
- **Type:** Archivo (headlines + UI, 700–800, tight -0.015em), Source Serif 4 (article body, 17px/1.6), Barlow Condensed 600 (scores, stats, tabular numbers). Overlines: 12px, 700, 0.09em tracking, uppercase, team-primary.
- **Layout:** 1200px max container, 12-col editorial grid, heavy 3px team-primary rules under section headers, 1px ink hairlines between list items. Dense but airy — newspaper rhythm.
- **Backgrounds:** flat white / off-white sections; inverse navy (`--surface-inverse`) for scoreboards and footer. No gradients, no textures. Photos are the only imagery (16:9); use gray placeholder blocks until real photos are supplied.
- **Corners & borders:** squarish. Cards 4px radius, 1px hairline border, subtle `--shadow-card`; pills only for tags/badges. No colored left-border cards.
- **Motion:** minimal. 120–200ms ease (`--ease-standard`) on hover; LIVE dot pulses. No bounces, no parallax.
- **Hover:** links darken + underline; cards raise to `--shadow-raised`; buttons darken to `--team-primary-dark`. Press: darken further, no shrink.
- **Imagery:** editorial sports photography, warm natural color, no duotones. Text over photos uses a bottom protection gradient (rgba ink-900 0→.75).

## Iconography
- No icon assets were provided. UI uses **Lucide** (CDN, `https://unpkg.com/lucide-static@0.469.0/icons/<name>.svg` as `<img>`), 1.5px stroke — a substitution, flagged for replacement if the brand adopts its own set.
- Stars for recruit ratings use the ★ unicode glyph in `--star` gold. LIVE indicator is a CSS dot, not an icon. No emoji as icons.

## Fonts
No font files were provided. Google Fonts substitutes (loaded via `tokens/fonts.css`): **Archivo**, **Source Serif 4**, **Barlow Condensed**. If the brand has licensed fonts, replace the `@import` with `@font-face` rules + binaries.

## Index
- `styles.css` → imports `tokens/` (fonts, colors, typography, spacing, base element styles)
- `guidelines/` — specimen cards shown in the Design System tab
- `components/core/` — Button, Input, Select, Badge, Tag, Tabs
- `components/content/` — ArticleCard, ScoreBug, RecruitCard
- `ui_kits/web/` — the Saturday Circuit website: Homepage, Scores, Recruiting, Article (interactive, with team-skin switcher)
- `thumbnail.html`, `SKILL.md`

### Intentional additions
No source defined a component inventory, so a standard set was authored, plus three domain components the product plainly needs: ArticleCard (news feed unit), ScoreBug (scores/recaps unit), RecruitCard (recruiting unit).