WAVE Design System
Enterprise-grade design patterns and components built for scalability, accessibility, and consistency across all WAVE products.
OKLCH Color System
WAVE uses the OKLCH color space for perceptually uniform colors that look consistent across light and dark modes. All colors are semantic tokens designed for WCAG AA/AAA accessibility compliance.
Primary
Brand identity, primary actions, links
oklch(0.975 0.150 250)Backgrounds, subtle highlights
oklch(0.950 0.180 250)Hover states, light backgrounds
oklch(0.900 0.200 250)Borders, dividers
oklch(0.825 0.210 250)Muted text, disabled states
oklch(0.700 0.220 250)Placeholder text
oklch(0.550 0.220 250)Default primary color
oklch(0.480 0.210 250)Primary buttons, active states
oklch(0.420 0.200 250)Hover states, focus rings
oklch(0.350 0.200 250)Text on light backgrounds
oklch(0.280 0.220 250)Headings, emphasis
Secondary
Secondary actions, complementary UI elements
oklch(0.975 0.150 290)Backgrounds
oklch(0.600 0.230 290)Default secondary color
oklch(0.520 0.220 290)Secondary buttons
oklch(0.320 0.220 290)Dark text
Accent
Highlights, call-to-action, special features
oklch(0.975 0.150 210)Backgrounds
oklch(0.650 0.220 210)Default accent color
oklch(0.550 0.210 210)Accent elements
Success
Success messages, positive actions, confirmations
oklch(0.975 0.080 145)Success backgrounds
oklch(0.650 0.190 145)Success indicators
oklch(0.580 0.190 145)Success buttons
Warning
Warnings, cautionary messages
oklch(0.975 0.080 85)Warning backgrounds
oklch(0.750 0.170 85)Warning indicators
oklch(0.680 0.165 85)Warning buttons
Danger
Errors, destructive actions, critical alerts
oklch(0.975 0.080 25)Error backgrounds
oklch(0.550 0.220 25)Error indicators
oklch(0.480 0.210 25)Destructive buttons
Color Usage Guidelines
✓ DO: Use semantic tokens (bg-primary-600, text-success-500)
✗ DON'T: Use hardcoded colors (hex values, rgb values)
✗ DON'T: Use non-semantic Tailwind colors (bg-blue-*, text-red-*)
Enforcement: Pre-commit hooks and CI/CD checks will block commits with hardcoded colors.
Typography System
Consistent type scale with responsive sizing for optimal readability across all devices.
H1 Example
Page titles, hero headings
text-4xl md:text-6xlLine Height: 1.1
Weight: font-bold
H2 Example
Section headings
text-3xl md:text-5xlLine Height: 1.2
Weight: font-bold
H3 Example
Subsection headings
text-2xl md:text-4xlLine Height: 1.3
Weight: font-bold
H4 Example
Card titles
text-xl md:text-3xlLine Height: 1.4
Weight: font-semibold
H5 Example
Component headings
text-lg md:text-2xlLine Height: 1.4
Weight: font-semibold
H6 Example
Small headings
text-base md:text-xlLine Height: 1.5
Weight: font-semibold
Body Large Example
Large body text, leads
text-lgLine Height: 1.6
Weight: font-normal
Body Example
Default body text
text-baseLine Height: 1.5
Weight: font-normal
Body Small Example
Captions, metadata
text-smLine Height: 1.5
Weight: font-normal
Caption Example
Fine print, labels
text-xsLine Height: 1.4
Weight: font-normal
Font Stack: System fonts for optimal performance
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serifComponent Library
Production-ready components with accessibility, dark mode, and animation support built-in.
Buttons
Interactive button variants with ripple effects and loading states
Variants
Sizes
States
<Button variant="primary" size="lg">Click me</Button>Cards
Flexible container components for content organization
Simple Card
Basic card with header
Card content goes here with proper spacing and typography.
Highlighted Card
Card with accent border
Use colored borders to emphasize important content.
Gradient Card
Card with gradient background
Subtle gradients for visual interest.
Badges
Labels for status, categories, and metadata
Spacing & Layout
8px base grid system for consistent spacing and alignment throughout the application.
xssmmdlgxl2xl3xlResponsive Breakpoints
Brand Guidelines
Voice, tone, and writing style for consistent brand communication.
Product Naming
Voice & Tone
Professional: Enterprise-grade, reliable, trustworthy
Clear: Simple language, avoid jargon, be direct
Confident: Assert capabilities without overpromising
Helpful: User-focused, solution-oriented
Balanced: Accessible yet professional, not too casual
Accessibility Standards
WAVE is committed to WCAG 2.1 AA compliance across all products and features.
Color Contrast
✓ All text maintains minimum 4.5:1 contrast ratio (AA)
✓ Primary colors achieve 7:1 contrast (AAA)
✓ Automated contrast checking in CI/CD
✓ Dark mode support with proper contrast
Keyboard Navigation
✓ Full keyboard accessibility for all interactive elements
✓ Visible focus indicators with 2px outline
✓ Logical tab order throughout the application
✓ Skip navigation links for efficiency
Screen Reader Support
✓ Semantic HTML for proper structure
✓ ARIA labels for interactive components
✓ Alt text for all images and icons
✓ Tested with NVDA, JAWS, and VoiceOver
Motion & Animation
✓ Respects prefers-reduced-motion setting
✓ No auto-playing animations over 5 seconds
✓ Pause/stop controls for moving content
✓ Smooth, non-jarring transitions
Accessibility Testing
Every component is tested with:
- axe-core automated accessibility scanner
- Manual keyboard navigation testing
- Screen reader compatibility verification
- Color contrast validation tools
Resources
Component Library
Explore all available components with live examples and code snippets
API Documentation
Comprehensive API reference for WAVE platform integration
GitHub Repository
Access source code, contribute, and report issues