🎨 Color System
Our palette is built around a primary brand hue, supported by semantic colors for feedback and state. Always use tokens, not raw hex values.
Copied!
Primary
#6C5CE7Copied!
Secondary
#00CEC9Copied!
Success
#00B894Copied!
Warning
#FDCB6ECopied!
Danger
#FF7675Copied!
Text Primary
#0A0E27Copied!
Text Secondary
#5A6188Copied!
Background
#F8F9FC🔤 Typography
We use Inter for UI text and Space Grotesk for headings, code, and technical data. Maintain a 1.25 modular scale.
That Is A Q
Build what's next
Design system tokens
Use this for paragraphs, descriptions, and readable content blocks across the app.
Standard UI text for labels, helper text, and list items. Never go below 14px for interactive text.
const token = "color-primary";
📐 Spacing & Layout
All spacing is based on a 4px base unit. Use the named tokens to maintain rhythm and consistency.
space-1 (4px)
space-2 (8px)
space-3 (12px)
space-4 (16px)
space-6 (24px)
space-8 (32px)
space-12 (48px)
space-16 (64px)
🧩 Core Components
Pre-built UI elements with standardized states, sizing, and behavior. Always import from the component library.
Buttons
Inputs & Forms
Cards & Containers
Analytics Dashboard
Track user engagement, conversion rates, and performance metrics in real-time.
API Gateway
Secure, rate-limited endpoints with automatic retry logic and webhook support.
♿ Accessibility Standards
We follow WCAG 2.1 AA guidelines. Every component must be usable via keyboard and screen reader.
| Rule | Requirement | Implementation |
|---|---|---|
| Color Contrast | Min 4.5:1 for normal text, 3:1 for large text | --text on --bg passes AAA. Never use --text-muted for interactive labels. |
| Focus States | Visible, high-contrast outline on :focus-visible | outline: 3px solid var(--primary-light) with outline-offset: 2px |
| Touch Targets | Min 44x44px for interactive elements | Buttons and inputs use min-height: 44px and min-width: 44px |
| Semantic HTML | Use native elements over divs | <button> for actions, <a> for navigation, <label> for forms |
| ARIA Labels | Provide context when visual text isn't enough | aria-label="Close menu", role="status" for dynamic updates |