Theme Tester

Customize your theme

Theme Presets
Colors
#ff6b35
#004e89
#e0e0e0
Backgrounds
#fafafa
#ffffff
#fff5f0
Text
#0a0a0a
#1a1a1a
Typography
16px
Borders & Effects
16px
2px
40px
CSS Variables

Display Heading 1

Display Heading 2

Display Heading 3

This is a body paragraph showcasing how your typography looks with the current settings. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Design is not just what it looks like and feels like — design is how it works.

This is secondary text, typically used for supporting information or captions. It has reduced visual weight to create hierarchy.

Here's a link example and some accented text to show interactive elements.

Primary Badge Secondary Badge Secondary Outline
98%
Satisfaction
24/7
Availability
∞
Possibilities

Interactive Elements

Card Component

This is a card with hover effects. Try hovering over it to see the interaction.

Learn more →

Another Card

Cards are perfect for organizing content into digestible chunks.

Explore →

Third Card

Notice how the layout adapts and the design remains cohesive.

Discover →