Color
Palette
Indigo anchors the brand. Periwinkle handles primary action and links. Neon is the single splash accent — one per viewport, never on body. Secondary colors are reserved for splashy moments and seasonal accents.
Primary
Indigo
#090031
Background · dark / Primary · light
Periwinkle
#6070E2
Primary · dark / Ring + link
Neon
#E6F083
Accent · splash
Cyan
#C5FCFF
Foreground · dark
Secondary
Mint
#99E99E
Teal
#002221
Salmon
#F7ADAD
Oxblood
#5C1412
Typography
Type system
Industry Inc Base for splashy display. Geist for body — refined, modern, distinctive. Tenacious for tags, eyebrows, micro-labels.
Display · Industry Inc Base
Welcome to your
home yard
Tag · Tenacious Heavy
Open · 6am – 10pm
Premier baseball & softball
Established · Long Island NY
Body · Geist Sans
Multi-sport training, on demand. Book a HitTrax cage, lock in a lesson with a coach, or block out the bullpen for an hour.
Smaller body sizes carry secondary information — captions, helper text, and metadata.
Mono · Geist Mono
Time
10:30 AM
Velocity
88 mph
Rate
$80/hr
Ref
YARD-042
Brand
Logo & marks
Primary lockup is the default. Eye variants and Y-stroke marks are reserved for accent moments. Texture backgrounds are hero-only at 30-50% opacity.
Primary / Black
Primary / White
Eye / Neon Green
Eye / Neon Blue
Y-Stroke marks · accent only
Neon Blue
Neon Green
Salmon
Light Blue
Yellow
Textures · hero only
Blue · primary
Green · secondary
Red · secondary
Primitives
Buttons & badges
Forms
Inputs & controls
Coach
Jordan Diaz
Next session
10:30 AM
Navigation
Tabs
Status
Booking states
Color-coded status tokens for booking types and lifecycle states. Each pair (bg + fg) is theme-aware and passes WCAG AA. Always paired with a label — never communicate via color alone.
Booking type
Lifecycle
Cage 2 · HitTrax
Mason Diaz · 12yrs
Sat May 4 · 10:30 AM
Bullpen 1 · Trackman
Self-serve · 1hr
Sun May 5 · 9:00 AM
Loading
Skeleton states
Use Skeleton primitive for any awaiting-data state. Match the shape and rhythm of the real content so the layout doesn't shift on data arrival.
Motion
Animations
Layout animations, stagger reveals, and mount/unmount transitions. All patterns respect prefers-reduced-motion. Framer Motion handles complex sequences; Tailwind transitions handle hover/focus chrome. See .claude/rules/motion.md for the decision matrix.
Stagger reveal · viewport-triggered
Coach · Diaz
Cage 2 — HitTrax
10:30 AM
Coach · Park
Bullpen 1 — Trackman
12:00 PM
Self-serve
Cage 4 — Modular
3:00 PM
Layout animation · shared element via layoutId
Hover lift · per-card whileHover
Hover me
Cage 2 — HitTrax
Hover me
Bullpen 1 — Trackman
Hover me
Cage 4 — Modular
Mount + unmount · animated height pushes content below smoothly
Anything below the detail (this paragraph, the section divider, section 10) reflows organically as the panel grows or collapses.
List reorder · layout prop animates position changes
Coach · Diaz
Cage 2 — HitTrax
10:30 AM
Coach · Park
Bullpen 1 — Trackman
12:00 PM
Self-serve
Cage 4 — Modular
3:00 PM
Product · Data
Stat sheet
Admin + product surfaces read like an athletic stat sheet — mono tag-labels, oversized tabular figures, a brand accent rule. Compose tables, KPI cards, and metrics from this vocabulary so data stays cohesive across the app.
.tag-label
This month
Mono micro-label. Column headers, stat captions, product eyebrows. (Marketing eyebrows use the Tenacious .font-tag.)
.stat-value
$1,995
Scoreboard figure. Display face, tabular numerals, tight tracking. Size at the call site.
.accent-rule
A quiet periwinkle hairline that fades out. Tops a data card or underlines a section — present, not loud.
.gradient-border
A subtle, theme-aware gradient ring (border-only, painted via a masked pseudo-element — it never touches the element's background). This is the default on every <Card>; the element supplies its own bg-card. Light is a quiet neutral gray fade; dark is periwinkle → cyan.
.no-gradient-border
Colored / hero cards opt OUT of the ring with .no-gradient-border so a periwinkle/gray frame never sits on a colored surface. Inputs, selects, separators, and internal table dividers keep the standard --border — the ring is for Card-level containers only.
Today's revenue
$2,480
18 sessions
Utilization
74%
Across 9 spaces
Active members
126
+8 this month
| Coach | This month | Visibility |
|---|---|---|
MD Maria Diaz Head Hitting | $1,99510 lessons | |
JR Jamal Reed Pitching | $1,56311 lessons | |
SP Sam Park Catching | $6004 lessons |