01Colors

Stone
Amber
Green
Red
Blue
Background
bg-base
bg-elevated
bg-sunken
Surface
surface-1
surface-2
surface-3
Border
border-subtle
border-default
border-strong
Text
text-primary
text-secondary
text-tertiary
text-inverse
Accent
accent
accent-subtle
accent-muted
Status
success
error
info

02Typography

DisplayThe quick brown fox jumps over the lazy dog.
H1The quick brown fox jumps over the lazy dog.
H2The quick brown fox jumps over the lazy dog.
H3The quick brown fox jumps over the lazy dog.
H4The quick brown fox jumps over the lazy dog.
LargeThe quick brown fox jumps over the lazy dog.
BaseThe quick brown fox jumps over the lazy dog.
SmallThe quick brown fox jumps over the lazy dog.
XSThe quick brown fox jumps over the lazy dog.
CodeThe quick brown fox jumps over the lazy dog.
LabelThe quick brown fox jumps over the lazy dog.
Font weights
300400500600700
Line height
Line height tight: The quick brown fox jumps over the lazy dog.
Line height snug: The quick brown fox jumps over the lazy dog.
Line height normal: The quick brown fox jumps over the lazy dog.
Line height relaxed: The quick brown fox jumps over the lazy dog.
Tracking
tighter
tight
normal
wide
wider

03Spacing

1
1_5
2
2.5
3
4
5
6
7
8
10
12
16

04Buttons

Variants
Sizes
Loading, disabled, tooltip

05Inputs

This field is required.

06Cards

Default card

Body content goes here.

Footer
Interactive card

Hover for effect.

Footer
Accent border

Accent border variant.

Footer

07Badges

Variants
DefaultPrimaryAccentSuccessErrorInfoOutline
Sizes
Default sizeLarge

08Alerts

Info

Informational message with icon, title and description.

Success

Operation completed successfully.

Warning

Please review before continuing.

Error

Something went wrong. Please try again.

09Avatars

Sizes
XSSMMDLGXL
Claude variant
C
Avatar group
ABC+2

10UI Components

Tabs (line)

Content for tab 1

Tabs (pill)

Content for pill 1

Spinner sizes
Progress bars
Default
Success
Error
Small
Large
Skeleton
Divider
or

12Shadows

xs
sm
md
lg
xl
2xl
focus