Color System
A sophisticated palette anchored by deep indigo, accented with electric violet and warm gold. Built for dark-first interfaces.
Deep Indigo
#1E1B4B
--primary
Electric Violet
#7C3AED
--secondary
Warm Gold
#F59E0B
--accent
Dark Surface
#0A0A0F
--background
Elevated
#111118
--card
Border
#1E1E2A
--border
Muted Text
#71717A
--muted-foreground
Foreground
#EDEDF0
--foreground
Typography
Instrument Serif for editorial elegance in headings, Inter for crisp readability in body text. A pairing that balances warmth with precision.
Cards
Gradient-bordered cards with subtle hover effects, glow states, and staggered entrance animations. The building blocks of every layout.
AI Strategy
Intelligent analysis of your market, competitors, and audience to craft a strategy that converts.
Brand Design
Bespoke visual identities that capture your brand's essence with artisan-level attention to detail.
Web Development
Performant, accessible, and beautifully crafted web experiences built with modern technology.
SEO Intelligence
Data-driven optimization powered by AI to ensure your content reaches the right audience.
Design Systems
Scalable, token-based design systems that ensure consistency across every touchpoint.
Premium Support
White-glove partnership with dedicated artisans who understand your vision and deliver excellence.
Spacing Scale
A 4px base unit spacing scale following Tailwind's defaults. Generous whitespace is a core principle — let content breathe.
Motion Principles
Subtle, purposeful motion. Entrances use ease-out curves; exits use ease-in. Spring physics for interactive elements, smooth easing for ambient effects.
Fade In Up
Content entrance — 0.6s ease-out, 16px travel
Scale In
Modal / overlay entrance — 0.4s ease-out, 95% → 100%
Hover Lift
Interactive elements — spring physics, -4px Y travel
Glow Pulse
Ambient attention — 3s ease-in-out, infinite loop
Float
Decorative elements — 6s ease-in-out, 8px travel
Token Map
Quick reference for the design system's CSS custom properties and their Tailwind utility mappings.
| Token | CSS Variable | Tailwind Class |
|---|---|---|
| Deep Indigo | --primary | bg-primary / text-primary |
| Electric Violet | --secondary | bg-secondary / text-secondary |
| Warm Gold | --accent | bg-accent / text-accent |
| Dark Surface | --background | bg-background |
| Elevated Surface | --card | bg-card |
| Border | --border | border-border |
| Heading Font | --font-heading | font-heading |
| Body Font | --font-body | font-body |