Design Tokens & Primitives
Sonu Car Accessories Design System
Comprehensive token palette, component states, and accessibility standards.
WCAG 2.2 AA VerifiedNext.js 16 + Tailwind v4
1. Color Tokens & Brand Surfaces
#0B0D10
Obsidian
Main Canvas Background
#15191F
Graphite
Card / Sheet Background
#20252C
Surface
Elevated Elements & Inputs
#2E3642
Border Dark
Subtle 1px Dividers
#FFFFFF
Paper
High-contrast Text
#A7AFB9
Cool Gray
Muted Typography
#E53935
Accent Red
Motorsport CTAs & Focus Glow
#16865C
Success Green
Verified Compatible & In-Stock
#B7791F
Warning Amber
Needs Confirmation / Low Stock
#C53030
Error Red
Validation Errors & Out-of-stock
2. Button Primitives & Interactive States
Sizes:
3. Badges & Fitment Statuses (India-First Automotive Standard)
Verified for Hyundai Creta 2021Needs ConfirmationFitment Not Verified20% OFF MRPIn Stock (14 Units)German Audio
4. Form Controls (Input & Select)
Used for courier delivery updates
Invalid GSTIN length (Must be 15 alphanumeric characters)
5. Overlays, Drawers & Skeletons
Skeleton Placeholders: