feat(design): Visual coherence pass — sharp aesthetic site-wide

[jeromehardaway]

Summary

The Software Factory and Career Guides pages set a distinctive aesthetic — Captain America / Obama campaign / Palantir vibe: sharp zero-radius, navy + red + gold palette, GothamPro uppercase headlines, mono section eyebrows with the 16×2 red bar, monospaced metadata, status bars with pulsing dots. Most of the rest of the site doesn't carry that language. This PR closes the gap.

Two layers of change: foundation (token additions + global CSS guards) and surface (new shared components + page-level refits on the highest-traffic pages).

What changed

Foundation

• src/assets/css/globals.css — full design-system token scales now in :root (extended navy/red/gold scales, neutrals, dark-surface, dark-mode aliases, hero gradient, type/space/radius/shadow/motion/layout/focus tokens). Button press-squish :active { scale(0.95) }. Generic .eyebrow selector with the 16×2 red bar. @media (prefers-reduced-motion: reduce) block (production gap from DESIGN_DOC).
• Site-wide guards in the same file:
  • Zero-radius default on Tailwind radius utilities (tw-rounded, tw-rounded-md/lg/xl/2xl/3xl, plus button/anchor tw-rounded-full unless .vwc-avatar).
  • No soft drop shadows on dark sections.
  • No pastel / bluish-purple gradient backgrounds (tw-bg-gradient-to-*) unless explicitly opted in via .vwc-gradient.
  • .vwc-eyebrow and .vwc-sharp opt-in utilities.

Shared design-system components

src/components/ui/design-system/:

• SectionEyebrow — 16×2 red bar + mono label with optional sub-label, light/dark tone, left/center align.
• SharpHeadline — GothamPro uppercase clamp() sizing, h1/h2/h3 sizes, navy/white/cream tones, h1/h2/h3/h4 tag.
• MonoMeta — mono uppercase tracked labels, size (xs/sm/md), tone (muted/bright/accent/gold).
• StatStrip — bordered horizontal grid of stat cells (label/value/sub), light/dark tone, auto column count.

Page refits

• Home (src/pages/index.tsx) — operations-brief status bar across the top with pulsing dot, key stats (placement, alumni earnings, 501(c)(3), applications open). Carries the SF/CG signature on the front door without rewriting all the home containers.
• About-us (src/pages/about-us.tsx) — replaced rounded gradient Theory-of-Change card with a sharp link block: section eyebrow, sharp headline with red emphasis, square red CTA button. Zero-radius, no shadow.
• Sponsors (src/pages/sponsors.tsx) — full rewrite. Operations brief bar, dark-section hero with eyebrow / sharp headline / stat strip (placement, alumni earnings, 501(c)(3), WOTC), three numbered "engagement options" cards on cream with red top-border, dark-section case for "veterans are not charity hires," sharp contact band.
• Mentor (src/pages/mentor.tsx) — replaced the two generic h2 sections with sharp eyebrow + headline clusters. Replaced rounded-lg cards with red-top-bordered sharp cards. Replaced bullet dots with the 2px red dash marker.
• Programs (src/pages/programs.tsx) — replaced generic intro paragraph with a Hashflag-style index header: eyebrow ("Programs Index"), sharp headline with red accent, mono meta caption.

What is intentionally NOT in this PR

• Per-container rewrites (@containers/hero/layout-*, funfact/*, event/*, service/*, testimonial/*, etc.). The global CSS guards already sharpen them — full rewrites can land per-container in follow-ups.
• Pages I'd refit in follow-up PRs: theory-of-change, team, media, faq, contact-us, apply page-level chrome, donate page-level chrome, join-our-community, programs/core-curriculum. Each is a thin page composing legacy containers — refits go either at the container level or in dedicated PRs.
• Admin, auth-gated, course-detail, blog post template, profile, certificate, challenges, jobs, jodie, orders, store, events detail, zoom detail — different concerns, out of scope.

Test plan

• npm run typecheck (pre-existing errors in test files + swagger types only — none introduced)
• npm run lint — Biome clean
• npm test
• npm run dev and visit:
  • / — operations-brief status bar visible above hero
  • /about-us — Theory-of-Change link block is sharp (no rounded card, no gradient)
  • /sponsors — full SF-style layout (operations bar, dark hero with stat strip, numbered tracks, dark case section, contact band)
  • /mentor — eyebrow + sharp headline sections, red-top-bordered cards
  • /programs — Hashflag-style index header above the grid
• macOS Reduce Motion → fade-ups + hover-transforms suppressed
• Tab through interactive elements → gold 3px focus ring with 2px offset visible
• Tab a primary button → press-squish scale(0.95) on active
• Verify no off-brand gradient backgrounds anywhere
• Verify zero-radius on cards / inputs / modals across the affected pages

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
vets-who-code-app	Ready	Preview, Comment	May 26, 2026 9:19pm