Style Guide Showcase

Demonstrating our semantic color palette in action

Navigation

Buttons

Form Elements

Cards

Default Card

This card uses our standard semantic color palette for content.

Subtitle in muted color

Featured Card

This card has a primary color theme.

Featured
Accent Card

This card uses the accent color for highlights.

New

Typography

Heading 1 - Foreground

Heading 2 - Foreground

Heading 3 - Primary

Heading 4 - Foreground

This is body text using foreground color. It provides excellent readability and is the primary text color.

This is secondary text using muted foreground. Perfect for captions, timestamps, and less important information.

This is a highlighted link using our accent color.

Status & Feedback

Active status
Inactive status
Primary status
Success
Info
Neutral

Interactive Elements