{{THEME_NAME}}

Component Visualization & Design Token Reference

Color Palette

Core Colors

Primary
{{PRIMARY}}
Secondary
{{SECONDARY}}
Accent
{{ACCENT}}
Neutral
{{NEUTRAL}}

Semantic Colors

Success
{{SUCCESS}}
Warning
{{WARNING}}
Error
{{ERROR}}
Info
{{INFO}}

Neutral Scale ({{SCALE_NAME}})

{{SCALE_NAME}} 50
{{SCALE_50}}
{{SCALE_NAME}} 100
{{SCALE_100}}
{{SCALE_NAME}} 200
{{SCALE_200}}
{{SCALE_NAME}} 300
{{SCALE_300}}
{{SCALE_NAME}} 400
{{SCALE_400}}
{{SCALE_NAME}} 500
{{SCALE_500}}
{{SCALE_NAME}} 600
{{SCALE_600}}
{{SCALE_NAME}} 700
{{SCALE_700}}
{{SCALE_NAME}} 800
{{SCALE_800}}
{{SCALE_NAME}} 900
{{SCALE_900}}

Typography

text-4xl The quick brown fox
text-3xl The quick brown fox
text-2xl The quick brown fox
text-xl The quick brown fox
text-lg The quick brown fox jumps over the lazy dog
text-base The quick brown fox jumps over the lazy dog
text-sm The quick brown fox jumps over the lazy dog
text-xs The quick brown fox jumps over the lazy dog
mono const theme = '{{THEME_ID}}';

Spacing Scale

4px
8px
12px
16px
24px
32px
48px
64px

Border Radius

{{RADIUS_SM}} (sm)
{{RADIUS_MD}} (md)
{{RADIUS_LG}} (lg)
16px (xl)
full

Shadows

shadow-sm
shadow-md
shadow-lg

Components

Buttons

Card

Card Title

This is a sample card component with the {{THEME_NAME}} theme styling applied.

Form Input

Links

Default Link Bold Link Small Link

Badges

Default Success Warning Error

Navigation

Home Features Pricing About