Logo
Colors
Brand Colors
Text & Background
Semantic Colors
Gradients
Typography
The quick brown fox jumps
The quick brown fox jumps over
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps
The quick brown fox jumps over
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Card Title Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is a paragraph with a default link that uses the info color and underlines on hover.
This is a paragraph with a primary link that uses the primary teal color.
Buttons
Cards
Default Card
This is a default card with border. On hover, the border changes to primary color.
Card with Shadow
This card uses the optional shadow modifier. It has a subtle hover effect that lifts it slightly.
Gradient Card (Light)
This card uses the light gradient background (10% opacity) with black text.
Badges
Form Elements
Shadows
Border Radius
Spacing Scale
Interactive Demo
Build something amazing
Create beautiful, responsive interfaces with our comprehensive design system. Learn more about our features.
Icons
All icons in this project are from Phosphor Icons.
Use inline SVG with viewBox="0 0 256 256". Unless specified otherwise, all icons should be from this set.
Usage: Copy the SVG code from Phosphor Icons website and use as inline SVG.
<svg width="20" height="20" viewBox="0 0 256 256" fill="currentColor">
<path d="..."/>
</svg>