Component Specifications

Detailed specs for core components with states and variants.

Button

Variants

Variant	Background	Text	Border	Use Case
default	primary	white	none	Primary actions
secondary	gray-100	gray-900	none	Secondary actions
outline	transparent	foreground	border	Tertiary actions
ghost	transparent	foreground	none	Subtle actions
link	transparent	primary	none	Navigation
destructive	red-600	white	none	Dangerous actions

Sizes

Size	Height	Padding X	Padding Y	Font Size	Icon Size
sm	32px	12px	6px	14px	16px
default	40px	16px	8px	14px	18px
lg	48px	24px	12px	16px	20px
icon	40px	0	0	-	18px

States

State	Background	Text	Opacity	Cursor
default	token	token	1	pointer
hover	darker	token	1	pointer
active	darkest	token	1	pointer
focus	token	token	1	pointer
disabled	muted	muted-fg	0.5	not-allowed
loading	token	token	0.7	wait

Anatomy

┌─────────────────────────────────────┐
│  [icon]  Label Text  [icon]         │
└─────────────────────────────────────┘
     ↑                      ↑
  leading icon         trailing icon

Input

Variants

Variant	Description
default	Standard text input
textarea	Multi-line text
select	Dropdown selection
checkbox	Boolean toggle
radio	Single selection
switch	Toggle switch

Sizes

Size	Height	Padding	Font Size
sm	32px	8px 12px	14px
default	40px	8px 12px	14px
lg	48px	12px 16px	16px

States

State	Border	Background	Ring
default	gray-300	white	none
hover	gray-400	white	none
focus	primary	white	primary/20%
error	red-500	white	red/20%
disabled	gray-200	gray-100	none

Anatomy

Label (optional)
┌─────────────────────────────────────┐
│ [icon] Placeholder/Value   [action] │
└─────────────────────────────────────┘
Helper text or error message

Card

Variants

Variant	Shadow	Border	Use Case
default	sm	1px	Standard card
elevated	lg	none	Prominent content
outline	none	1px	Subtle container
interactive	sm→md	1px	Clickable card

Anatomy

┌─────────────────────────────────────┐
│ Card Header                         │
│   Title                             │
│   Description                       │
├─────────────────────────────────────┤
│ Card Content                        │
│   Main content area                 │
│                                     │
├─────────────────────────────────────┤
│ Card Footer                         │
│   Actions                           │
└─────────────────────────────────────┘

Spacing

Area	Padding
header	24px 24px 0
content	24px
footer	0 24px 24px
gap	16px

Badge

Variants

Variant	Background	Text
default	primary	white
secondary	gray-100	gray-900
outline	transparent	foreground
destructive	red-600	white
success	green-600	white
warning	yellow-500	gray-900

Sizes

Size	Padding	Font Size	Height
sm	4px 8px	11px	20px
default	4px 10px	12px	24px
lg	6px 12px	14px	28px

Alert

Variants

Variant	Icon	Background	Border
default	info	gray-50	gray-200
destructive	alert	red-50	red-200
success	check	green-50	green-200
warning	warning	yellow-50	yellow-200

Anatomy

┌─────────────────────────────────────┐
│ [icon]  Title                    [×]│
│         Description text            │
└─────────────────────────────────────┘

Dialog

Sizes

Size	Max Width	Use Case
sm	384px	Simple confirmations
default	512px	Standard dialogs
lg	640px	Complex forms
xl	768px	Data-heavy dialogs
full	100% - 32px	Full-screen on mobile

Anatomy

┌───────────────────────────────────────┐
│ Dialog Header                      [×]│
│   Title                               │
│   Description                         │
├───────────────────────────────────────┤
│ Dialog Content                        │
│   Scrollable if needed                │
│                                       │
├───────────────────────────────────────┤
│ Dialog Footer                         │
│                     [Cancel] [Confirm]│
└───────────────────────────────────────┘

Table

Row States

State	Background	Use Case
default	white	Normal row
hover	gray-50	Mouse over
selected	primary/10%	Selected row
striped	gray-50/white	Alternating

Cell Alignment

Content Type	Alignment
Text	Left
Numbers	Right
Status/Badge	Center
Actions	Right

Spacing

Element	Value
cell padding	12px 16px
header padding	12px 16px
row height (compact)	40px
row height (default)	48px
row height (comfortable)	56px