Design System
Color palette design
Build cohesive, accessible color systems that scale across your entire product.
Brand primitives
Start with two core hues that define your brand identity. Every derived token flows from these primitives.
Violet
#8B5CF6
Violet 400
#A78BFA
Pink
#F472B6
Pink 300
#F9A8D4
Neutral scale
A 9-step gray ramp provides surface, border, and text tokens. Tint neutrals with your brand hue for cohesion.
50 — Background950 — Text primary
Semantic tokens
Map abstract roles — success, warning, error — to concrete hex values. Keep contrast ratios above 4.5:1 for text.
| Token | Hex | Usage |
|---|---|---|
| --success | #34D399 | Confirmations, live indicators |
| --warning | #FBBF24 | Alerts, pending states |
| --error | #F87171 | Destructive actions, failures |
| --info | #60A5FA | Tooltips, neutral banners |
Gradient pairing
Combine brand primitives into directional gradients for hero sections, cards, and CTAs.
Violet → Pink
Primary CTA gradient
Dark → Violet fade
Section backgrounds