Forge a complete design system from a single brand color — perceptually even OKLCH color ramps, contrast-checked light and dark themes, font pairings, a modular type scale, spacing, radii and shadows, all previewed live on a mini product page. Export CSS variables, Tailwind v4, a paste-ready shadcn/ui theme, or JSON tokens.
Everything on this page — colors, type, spacing, corners, shadows — comes from your theme.
Monthly revenue
$48,210
Join the waitlist
you@company.comNotify meSystem status
Primary button text passes WCAG at 4.58:1 — chosen by measured contrast, not guesswork.
:root {
--brand-50: #f5fcf8;
--brand-100: #e8f6ee;
--brand-200: #cfebdc;
--brand-300: #a9dbc2;
--brand-400: #6dc89e;
--brand-500: #00b07a;
--brand-600: #009365;
--brand-700: #007650;
--brand-800: #005f40;
--brand-900: #004d33;
--brand-950: #00321f;
--neutral-50: #f9fafa;
--neutral-100: #f0f2f1;
--neutral-200: #e0e4e2;
--neutral-300: #c9d0cc;
--neutral-400: #aab6b0;
--neutral-500: #8a9a91;
--neutral-600: #718078;
--neutral-700: #5a6760;
--neutral-800: #48534d;
--neutral-900: #3a423e;
--neutral-950: #252a27;
--background: #ffffff;
--foreground: #252a27;
--card: #ffffff;
--card-foreground: #252a27;
--muted: #f0f2f1;
--muted-foreground: #8a9a91;
--border: #e0e4e2;
--input: #e0e4e2;
--primary: #009365;
--primary-foreground: #171717;
--secondary: #f0f2f1;
--secondary-foreground: #3a423e;
--accent: #f5fcf8;
--accent-foreground: #004d33;
--destructive: #c55149;
--destructive-foreground: #ffffff;
--ring: #00b07a;
--font-heading: "Inter", sans-serif;
--font-body: "Inter", sans-serif;
--text-xs: 0.6875rem;
--text-sm: 0.84375rem;
--text-base: 1rem;
--text-lg: 1.1875rem;
--text-xl: 1.4375rem;
--text-2xl: 1.71875rem;
--text-3xl: 2.0625rem;
--text-4xl: 2.5rem;
--text-5xl: 3rem;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
--shadow-md: 0 2px 8px -2px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
--shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.05);
--ease: cubic-bezier(0.25, 1, 0.5, 1);
--duration: 200ms;
}
.dark {
--background: #252a27;
--foreground: #f9fafa;
--card: #3a423e;
--card-foreground: #f9fafa;
--muted: #48534d;
--muted-foreground: #aab6b0;
--border: #48534d;
--input: #48534d;
--primary: #00b07a;
--primary-foreground: #171717;
--secondary: #48534d;
--secondary-foreground: #f0f2f1;
--accent: #00321f;
--accent-foreground: #cfebdc;
--destructive: #e46b60;
--destructive-foreground: #171717;
--ring: #6dc89e;
}