WizlyTools Style Guide

Official design tokens and brand guidelines

Primary Colors

Primary
Hex#0f172a
HSL222.2 47.4% 11.2%
Primary Foreground
Hex#f8fafc
HSL210 40% 98%
Primary Light
Hex#3b82f6
HSL221.2 83.2% 53.3%
Primary Dark
Hex#2563eb
HSL224.3 76.3% 48%

Secondary Colors

Secondary
Hex#f1f5f9
HSL210 40% 96.1%
Secondary Foreground
Hex#0f172a
HSL222.2 47.4% 11.2%
Accent
Hex#8b5cf6
HSL262.1 83.3% 57.8%
Accent Foreground
Hex#f8fafc
HSL210 40% 98%

UI Colors

Background
Hex#ffffff
HSL0 0% 100%
Foreground
Hex#020617
HSL222.2 84% 4.9%
Muted
Hex#f1f5f9
HSL210 40% 96.1%
Muted Foreground
Hex#64748b
HSL215.4 16.3% 46.9%

Component Colors

Card
Hex#ffffff
HSL0 0% 100%
Card Foreground
Hex#020617
HSL222.2 84% 4.9%
Border
Hex#e2e8f0
HSL214.3 31.8% 91.4%
Input
Hex#e2e8f0
HSL214.3 31.8% 91.4%

Feedback Colors

Destructive
Hex#ef4444
HSL0 84.2% 60.2%
Destructive Foreground
Hex#f8fafc
HSL210 40% 98%
Ring
Hex#020617
HSL222.2 84% 4.9%

Color Usage Guidelines

  • Use the primary color for main actions, navigation items, and key UI elements
  • Use the accent color sparingly to highlight important features or content
  • Ensure sufficient contrast between text and background colors (minimum ratio of 4.5:1)
  • Always use color tokens from the design system instead of hardcoded hex values
  • For dark mode, use appropriate color mappings as defined in the tokens file