Color Palette
Core brand colors and semantic utilities. Click any swatch to copy the hex value.
Typography
System font stack with semantic scale. Optimized for readability and hierarchy.
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox jumps over the lazy dog.
npm install @webui/coreSpacing Scale
Consistent 4px-based spacing system used for padding, margins, and layout grids.
Inputs & Forms
Accessible form controls with clear focus states and validation styling.
Cards
Container components for grouping related content and actions.
Project Overview
Track progress, manage tasks, and collaborate with your team in real-time.
Pro Plan Active
Access to all premium components, priority support, and custom theming.
Feedback & Alerts
Communication patterns for system status, warnings, and confirmations.
Code & Tokens
Implementation guidelines and CSS custom properties for seamless integration.
:root {
--primary: #6C3CE1;
--secondary: #00D4AA;
--radius-md: 10px;
--font-sans: system-ui, -apple-system, sans-serif;
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.btn-primary {
background: var(--primary);
color: white;
border-radius: var(--radius-md);
padding: 10px 20px;
font-family: var(--font-sans);
}
All components support dark mode via [data-theme="dark"] attribute. Use CSS variables for consistent theming across your application.