TeamFittingTeamFitting
V1.0

TeamFitting Design System

Every component on this page is a live import from src/components/. Change a token in globals.css or a variant in a component file, and it cascades here and throughout the entire app.

00

Brand

The TeamFitting mark. Use the Logo atom in headers, auth screens, and any surface where the brand should be present. Sourced from /logo.png in every consuming app.

Sizes
TeamFitting24px
TeamFitting32px (default)
TeamFitting48px
TeamFitting72px
With wordmark
TeamFittingTeamFitting

Use showWordmark in primary navigation headers where the brand should be legible.

01

Color

Monochrome foundations with a single hot-pink brand accent. Semantic colors for success, warning, destructive, informative.

Surfaces

Background

--background

Card

--card

Muted

--muted

Accent

--accent
Foreground

Foreground

--foreground

Muted Foreground

--muted-foreground

Card Foreground

--card-foreground

Primary Foreground

--primary-foreground
Brand

Brand

--brand

Brand Light

--brand-light

Brand Hover

--brand-hover

Brand Glow

--brand-glow

--primary and --ring both alias to --brand for shadcn compatibility. Change --brand in globals.css and the Light / Hover / Glow variants recompute automatically via color-mix().

Semantic

Success

--success

Warning

--warning

Destructive

--destructive

Informative

--informative
Borders

Border

--border

Input

--input
02

Typography

Inter on the Apple/editorial scale (13/15/17/20/24/30/36/48/60/72). Every heading and text node in the app flows through these components.

Heading Component
5xl

The quick brown fox

3xl

The quick brown fox

2xl

The quick brown fox

xl

The quick brown fox

lg
The quick brown fox
base
The quick brown fox
Text Component
xl

The quick brown fox jumps over the lazy dog

lg

The quick brown fox jumps over the lazy dog

base

The quick brown fox jumps over the lazy dog

sm

The quick brown fox jumps over the lazy dog

xs

The quick brown fox jumps over the lazy dog

Color Variants

Default foreground color

Muted foreground color

Primary (brand) color

Weight Variants

Normal weight (400)

Bold weight (700)

Specialized Typography
Eyebrow — 13px uppercase mutedSection label · 01
Lede — 24px muted, max-width constrained. Use once per page as a hero lead under the main H1.

An introductory paragraph that sits below the page title. Reserved for the one hero lead per page — everything else uses Text color="muted".

Caption — 13px muted (the thing you are reading)Small metadata text for helper copy, timestamps, counts.
03

Radius

Tight radii for a precise, engineered feel. Base 4px, integer multiples only.

sm
md
lg
xl
2xl
3xl
4xl
full
04

Elevation

Shadows for depth. Used sparingly — most surfaces sit flat on the canvas.

sm
md
lg
xl
2xl
05

Button

All variants and sizes. Imported from @teamfitting/ui/components/ui/button.

Default
Outline
Secondary
Ghost
Destructive
Link
Disabled
Icon
Icon Outline
Icon Ghost
06

Badge

Inline status and label badges. Imported from @teamfitting/ui/components/ui/badge.

All variants
defaultsecondaryoutlinedestructiveghostlink
07

Card

Container for grouped content. Composable header, content, footer.

Player Profile
Marcus Rashford — Forward
Motivational Drive 8/10. High coachability with strong emotional regulation.
Team Summary
Manchester United — Premier League
The FactoryNew Leadership
Compatibility
Overall Fit Score
82
x
size="sm" — compact variant
Compact Card
Tighter spacing
Used in dense dashboards and sidebars.
With Footer
Compact cards also support footers.
Header Only
Useful for metric tiles or row summaries.
AddCard — dashed ghost cell for grids
Manchester United
Premier League · Soccer
Los Angeles Lakers
NBA · Basketball
Add team
08

Forms

Input, Textarea, Label, and FormField. Same primitives used on the Generate page.

Any additional context for the research.

This field is required

09

Progress

Linear progress indicator.

x
x
x
x
10

Tabs

Accessible tab group.

Overview content.

11

Accordion

Expand/collapse groups.

12

Table

Semantic tabular data.

PlayerTeamFit
Sample Player ASample Team92%
Sample Player BSample Team78%
Sample Player CSample Team64%
13

Layout

Container, Section, Stack, PageLayout, PageHeader, SectionHeader. Used by every page in the app.

PageHeader — canonical page header (H1 + description + breadcrumbs + action)

New Compatibility Report

Full player-team fit analysis with scoring.

PageHeader — no breadcrumbs, no action

Your teams

Run player evaluations against the teams you care about.

Stack direction="row" gap="md"
onetwothreefour
Stack direction="col" gap="sm"
onetwothree
14

Select

Native select dropdown with styled chevron.

15

Selection Controls

Checkbox, Radio, and Switch for forms and settings.

Checkbox
Radio
Switch
16

Alert

Inline banners for success, warning, destructive, and informative states.

17

Avatar

Single avatars at four sizes, plus stacked avatar groups.

Sizes
MRMRMRMR
Group
MRJSKD+4
18

Skeleton

Loading placeholders for content that is still fetching.

19

Spinner

Indeterminate loading indicator.

Loading results…

20

Empty State

Placeholder for sections with no data yet.

No reports yet

Create your first player, team, or compatibility report to see it here.

21

Breadcrumb

Hierarchical navigation trail.

22

Pagination

Navigate paged lists of records.

23

Dialog

Modal overlay for focused tasks and confirmations.

24

Dropdown Menu

Contextual menu anchored to a trigger.

25

Toast

Transient notification that slides in and auto-dismisses.

Default notification
This is a default toast message.
Report saved
Your changes have been saved successfully.
Partial data
Some sources were unavailable.
Save failed
We couldn't save your changes. Try again.
26

Tooltip

Hover-triggered contextual help.

27

Keyboard

Inline keyboard key indicators.

Press ⌘ K to search

Press Esc to close

Press Shift Enter to submit

28

Code Block

Preformatted code display with monospace font.

import { Button } from "@teamfitting/ui/components/ui/button"

export function Example() {
  return <Button>Click me</Button>
}
29

Score Gauge

Animated circular progress meter rendering a 0–100 score in the brand primary color. The same hue is used at every score band — only the fill length changes.

92/100

Near-Perfect Fit

77/100

Solid Fit

64/100

Challenging Fit

42/100

Critical Mismatch

30

Radar Chart

Radial profile visualisation for player and team attributes. Grid and labels are monochrome; the radar line itself is rendered in the brand pink as a subtle accent.

Player profile
Team profile
31

Spectrum Bar

A position marker on a low-to-high continuum. The knob is rendered in the brand accent so it reads against any editorial surface, while the track stays muted. Labels under the track are optional.

With labels (neutral spectrum)
Role-player cultureStar-heavy locker room
No labels (directional)
Value range comparison
Patient rebuildWin-now urgency
Patient rebuildWin-now urgency
Patient rebuildWin-now urgency
32

Attribute Block

Editorial composition for a single scouting attribute. No card chrome, no border, no box padding — it flows as content. Built from Heading, Text, Caption and SpectrumBar so every attribute on the product inherits the same type scale automatically.

Ego Density

High ego density — several strong personalities in the locker room

Role-player cultureStar-heavy locker room

The roster features two all-time-caliber stars — a 41-year-old LeBron James earning $52.6M and Luka Dončić just traded from Dallas — representing one of the highest individual ego loads in the NBA. External commentary explicitly questions whether Redick can manage this dynamic, and fan expectations on LeBron are described as intense. Counterbalancing this, LeBron's public endorsement of Redick's direct style suggests the ego environment is being managed rather than allowed to fester.

View 5 sources
The Athletic — Redick's first season challengeESPN — LeBron's expectations analysisBleacher Report — Lakers locker room dynamics

The Ringer — Luka trade fallout

Sports Illustrated — Hayes incident coverage
5 sources · Moderate evidence
compact + info (compare columns): light title, bar, short pole labels. Hover the title for the full read.

Cultural Composition

DiverseHomogeneous

Feedback Speed

SteadyRapid