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 @/components/ui/button.

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

Badge

Inline status and label badges. Imported from @/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.
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. Used by every page in the app.

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 "@/components/ui/button"

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

Score Gauge

Animated circular progress meter for compatibility scores. Color cascades from semantic tokens (success/warning/destructive) based on score thresholds.

92/100

Near-Perfect Fit

77/100

Solid Fit

64/100

Challenging Fit

42/100

Critical Mismatch