Garage Built Baseball
Garage Built Baseballv0.2 · Design System

The system
before the site.

Tokens, type, and components for Garage Built Baseball. Black and white do the work — green and ClayTan are used sparingly.

02 — Tokens

Color

Primary — black, white, neutral

Ink
ink#0A0A0B
White
white#FFFFFF
Gray 50
gray-50#F7F7F6
Gray 100
gray-100#EFEFED
Gray 200
gray-200#E0E0DC
Gray 400
gray-400#9B9B95
Gray 600
gray-600#54544F
Gray 800
gray-800#262623

Accents — used sparingly

Turf
turf#364934
Turf 600
turf-600#2B3A29
ClayTan
claytan#EDE9DB
ClayTan 600
claytan-600#DFD9C5
03 — Tokens

Typography

Display — Montserrat

Garage Built

Weights 400–900 · used for all headlines, buttons, badges, overlines

Body — Cabin

Real coaching, no facility prices.

Weights 400–700 · used for paragraphs, UI labels, hints

Display XL

text-display-xl · 900

Display LG

text-display-lg · 900

Display MD

text-display-md · 900

Heading 1

text-h1 · 800

Heading 2

text-h2 · 800

Heading 3

text-h3 · 600

Heading 4

text-h4 · 600

Eyebrow / Overline

text-h6 / text-overline · 700 · tracked

Body Large — Cabin, 18px. Lead copy on pricing and program pages. Comfortable at a long measure, sits well next to display type.

text-body-lg

Body — Cabin, 17px. Default paragraph size across the site. Hits roughly 70 characters per line at the container max width.

text-body

Body Small — 15px. For dense UI, cards, and supporting copy.

text-body-sm

Caption — 13px, hints and metadata.

text-caption
04 — Tokens

Radius

sm2px
DEFAULT4px
md6px
lg10px
full999px

Default UI runs sharp (sm / DEFAULT). Pill (`full`) is reserved for primary CTAs.

05 — Tokens

Shadow

sm
DEFAULT
md
lg
xl
06 — Components

Buttons

Variants
Sizes
On dark
07 — Components

Inputs

First name is enough

Required for booking confirmation

08 — Components

Cards

Default

White with a hairline border.

The workhorse card. Use for lesson types, pricing rows, blog cards.

Elevated

Floats above the page.

For featured items where you want extra visual weight.

Outline

Bold border, no fill.

Good for callouts inside content sections.

Ink

Inverse — high contrast.

For hero CTAs and feature blocks that need to interrupt the page.
09 — Components

Badges

DefaultLimitedPre-BookingFounding 10Free First Lesson

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.