{{THEME_NAME}} - Component Visualization

Color Palette

Core Colors

Primary

Secondary

Accent

Neutral

Semantic Colors

Success

Warning

Error

Info

Neutral Scale ({{SCALE_NAME}})

{{SCALE_NAME}} 50

{{SCALE_NAME}} 100

{{SCALE_NAME}} 200

{{SCALE_NAME}} 300

{{SCALE_NAME}} 400

{{SCALE_NAME}} 500

{{SCALE_NAME}} 600

{{SCALE_NAME}} 700

{{SCALE_NAME}} 800

{{SCALE_NAME}} 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

Email Address