Chili Boilerplate - Theme Preview
Preview your theme settings in real-time. Changes made in the theme editor will be reflected here.
Color Palette
Brand Colors
Status Colors
Neutral Colors
Typography
Heading 1 — The quick brown fox
Font: var(--atlas-h1-font-family) · Size: var(--atlas-h1-font-size)
Heading 2 — The quick brown fox
Font: var(--atlas-h2-font-family) · Size: var(--atlas-h2-font-size)
Heading 3 — The quick brown fox
Font: var(--atlas-h3-font-family) · Size: var(--atlas-h3-font-size)
Heading 4 — The quick brown fox
Font: var(--atlas-h4-font-family) · Size: var(--atlas-h4-font-size)
Heading 5 — The quick brown fox
Font: var(--atlas-h5-font-family) · Size: var(--atlas-h5-font-size)
Heading 6 — The quick brown fox
Font: var(--atlas-h6-font-family) · Size: var(--atlas-h6-font-size)
Text Utilities
text-xs — The quick brown fox jumps over the lazy dog.
Font: var(--atlas-text-xs-font-family) · Size: var(--text-xs) · Line height: var(--text-xs--line-height)
text-sm — The quick brown fox jumps over the lazy dog.
Font: var(--atlas-text-sm-font-family) · Size: var(--text-sm) · Line height: var(--text-sm--line-height)
text-base — The quick brown fox jumps over the lazy dog.
Font: var(--atlas-text-base-font-family) · Size: var(--text-base) · Line height: var(--text-base--line-height)
text-lg — The quick brown fox jumps over the lazy dog.
Font: var(--atlas-text-lg-font-family) · Size: var(--text-lg) · Line height: var(--text-lg--line-height)
text-xl — The quick brown fox jumps over the lazy dog.
Font: var(--atlas-text-xl-font-family) · Size: var(--text-xl) · Line height: var(--text-xl--line-height)
Body Text & Links
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is secondary text. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Click here to learn more about our services.
Buttons
Primary Buttons
Secondary Buttons
Tertiary (Accent) Buttons
Status Buttons
Loading State
Form Elements
Checkboxes & Radios
Progress Bar
Design Tokens
Border Radius
Box Shadow
Shadow Preview
This box uses your configured shadow style
Spacing Scale
Card Components
Card Title
This card uses your configured border radius, padding, and shadow settings.
Another Card
Cards automatically adapt to your theme's surface color and design tokens.
Third Card
Consistent styling across all components creates a cohesive design.