v0.2 · Design SystemThe system
before the site.
Tokens, type, and components for Garage Built Baseball. Black and white do the work — green and ClayTan are used sparingly.
Logo
Placeholder typographic wordmark. Will be replaced by the proper SVG marks (GBB garage icon, diamond emblem, GB monogram) once they're delivered.
Color
Primary — black, white, neutral
ink#0A0A0Bwhite#FFFFFFgray-50#F7F7F6gray-100#EFEFEDgray-200#E0E0DCgray-400#9B9B95gray-600#54544Fgray-800#262623Accents — used sparingly
turf#364934turf-600#2B3A29claytan#EDE9DBclaytan-600#DFD9C5Typography
Garage Built
Weights 400 · 600 · 700 · 800 · 900 — used for all headlines, buttons, badges, eyebrows.
Real coaching, no facility prices.
Weights 400 · 500 · 600 — used for paragraphs, UI labels, hints.
Display — hero / page / quote
The three biggest typographic moments on the site. Hero is the homepage carousel; Page is every inner-page hero; Quote is the type-only motto breaks.
display-heroclamp(2.5rem, 7.5vw, 7rem) · 900Garage Built
display-pageclamp(2.5rem, 6.5vw, 5.5rem) · 900Pick a time. No payment.
display-quoteclamp(2.75rem, 8vw, 7.5rem) · 900Hit it. Watch it.
Section headings
Workhorse h2 sizes that punctuate every section. `h-lg` for the largest section openers, `h-md` for the standard 3/9 eyebrow + headline pattern, `h-sm` for tighter sections and in-image overlays.
h-lgclamp(2.25rem, 5vw, 4rem) · 900Two nets. Multiple tees. Real reps.
h-mdclamp(1.75rem, 3.4vw, 3rem) · 900From walk-in to weekly habit.
h-smclamp(1.5rem, 2.8vw, 2.75rem) · 900First lesson, start to finish.
Card / sub-section headings
Article-card and list-item titles inside sections.
h-cardclamp(1.5rem, 2.4vw, 2.25rem) · 900Coach Andy Layman
h-card-smclamp(1.25rem, 2vw, 1.75rem) · 900Free first lesson
h-card-xsclamp(1rem, 1.5vw, 1.25rem) · 9003 private lessons / month
Stat / number callouts
Always pair with the .stat-num helper so digits use tabular figures and align in columns.
stat-megaclamp(7rem, 18vw, 16rem) · 900 · tabular48
stat-xlclamp(6rem, 14vw, 12rem) · 900 · tabular10
stat-lgclamp(5rem, 12vw, 11rem) · 900 · tabular$35
stat-mdclamp(3.5rem, 7.5vw, 6.5rem) · 900 · tabular$199
stat-smclamp(2.5rem, 5vw, 4rem) · 900 · tabular$460
stat-xsclamp(2rem, 4vw, 3.25rem) · 900 · tabular03
Eyebrows + labels
Four utility classes for display caps. .eyebrow has a leading hairline rule — use it for section openers. The bare labels (no rule) come in three sizes for nav, metadata, and tiny annotations.
.eyebrow.label-md · 0.75rem / 0.20em.label-sm · 0.70rem / 0.20em.label-xs · 0.65rem / 0.22emBody
Cabin at three sizes. Wrap long prose in .prose-narrowto cap line length at 65ch.
Body Large — Cabin, 18px. Lead copy on pricing and program pages.
text-body-lgBody — Cabin, 17px. Default paragraph size across the site. Hits roughly 65 characters per line inside .prose-narrow.
text-bodyBody Small — 15px. For dense UI, cards, and supporting copy.
text-body-smCaption — 13px, hints and metadata.
text-captionLegacy scale
Original display-xl / lg / md and h1 – h6 tokens. Retained for backwards compatibility; prefer the semantic ladder above for new work.
display-xl
text-display-xldisplay-lg
text-display-lgdisplay-md
text-display-mdh1
text-h1h2
text-h2h3
text-h3h4
text-h4h5
text-h5h6
text-h6Radius
sm2pxDEFAULT4pxmd6pxlg10pxfull999pxDefault UI runs sharp (sm / DEFAULT). Pill (`full`) is reserved for primary CTAs.
Shadow
smDEFAULTmdlgxlInputs
First name is enough
Required for booking confirmation
Cards
Default
White with a hairline border.
Elevated
Floats above the page.
Outline
Bold border, no fill.
Ink
Inverse — high contrast.
Badges
Turf and ClayTan variants are the only place these accent colors should appear in UI by default — keep them rare so they read as signals.