Color System
Our color palette is built on a clean, light foundation with emerald and sky blue accents. Colors are defined as CSS custom properties for easy theming.
Primary Colors
Primary (Dark)
--primary
Primary Foreground
--primary-foreground
Background
--background
Foreground
--foreground
Surface Colors
Card
--card
Secondary
--secondary
Muted
--muted
Muted Foreground
--muted-foreground
Chart / Accent Colors
Emerald
--chart-1
Sky
--chart-2
Rose
--chart-3
Orange
--chart-4
Violet
--chart-5
Typography
We pair Syne, a bold geometric sans-serif, with Instrument Serif for elegant italic accents. This combination creates an editorial, magazine-like aesthetic.
Font Families
Primary / Sans-Serif
Syne
font-family: 'Syne', sans-serif
Display / Serif
Instrument Serif
font-family: 'Instrument Serif', serif
Type Scale
Aa
Heading One
Heading Two
Body text for paragraphs and content.
Small text for captions and labels.
Headline Pattern
Our signature headline style pairs bold Syne with italic Instrument Serif using a gradient text effect.
Everything you need to ship fast
<h2 className="text-4xl font-bold tracking-tight">
Everything you need to
<span className="font-display italic text-gradient"> ship fast</span>
</h2>UI Components
Pre-built components from shadcn/ui customized with our design tokens. Each component supports variants and is fully accessible.
Buttons
Primary actions, secondary options, and ghost buttons for navigation.
Button Sizes
Buttons come in multiple sizes for different contexts.
Buttons with Icons
Icons can be added before or after button text.
Elevated CTA Button
High-emphasis button with shadow for primary CTAs.
Badges
Labels and tags for categorization and status indicators.
Badge with Icon
Badges can include icons for additional context.
Input
Text inputs for forms and search fields.
Input with Button
Combined input and button for subscription forms.
Card
Container for grouped content with clean styling.
Card Title
Card description text goes here.
Feature Card
Card with icon and hover effect for feature sections.
Feature Title
Feature description goes here.
Pricing Card
Card variant for pricing tiers with feature list.
Pro
- Unlimited projects
- Priority support
Testimonial Card
Card for customer quotes with star ratings.
“This product transformed our workflow!”
Jane Doe
CEO at Company
Visual Effects
Background patterns, gradients, and animations that create depth and atmosphere throughout the interface.
Grid Background
Subtle grid pattern for depth
Radial Gradient
Top glow effect for hero sections
Noise Texture
Subtle grain overlay for texture
Shadow Effect
Elevated shadow for emphasis
Text Gradient
Emerald to sky gradient for headlines
Backdrop Blur
Frosted glass effect for overlays
Animations
CSS animations for page transitions, hover effects, and micro-interactions. All animations use CSS only for optimal performance.
Slide Up
Entry animation for staggered reveals
Float
Gentle floating motion for illustrations
Pulse Shadow
Pulsing shadow for CTAs
Staggered Animation Delays
Use animation delays for orchestrated page reveals.
.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
/* ... */Icons
We use Lucide React for consistent, accessible icons throughout the interface. Icons are sized using Tailwind utilities.
Import from lucide-react
Spacing & Layout
Consistent spacing using Tailwind's spacing scale. We use generous padding and max-width containers for readability.
Container
Max-width container with horizontal padding.
<div className="max-w-7xl mx-auto px-6">
{/* Content */}
</div>Section Spacing
Vertical padding for major sections.
<section className="py-24 md:py-32">
{/* Section content */}
</section>Card Padding
Standard padding for card components.
<Card className="p-6 md:p-8">
{/* Card content */}
</Card>Grid Gaps
Common gap values for grid layouts.
<div className="grid md:grid-cols-2 gap-6">
{/* Grid items */}
</div>
<div className="grid md:grid-cols-3 gap-6 lg:gap-8">
{/* Grid items */}
</div>