Design Systems,
Built Live.
Customize every visual token — colors, typography, spacing, radius, shadows — and watch your entire UI respond in real time. Export presets. Share themes. Ship premium.
Current Theme
Every Component, Themed Live
Watch your design system propagate across every UI primitive. Change a token — every component updates in under 16ms.
Buttons
Badges
Inputs
This field is required
Cards
Design Tokens
Every visual property expressed as a composable, reusable design token.
CSS Variables
Powered by native CSS custom properties for instant, zero-JS updates.
Real-time
Sub-16ms updates propagated across the full component tree simultaneously.
Alerts
Design system active
Your theme tokens are being applied across all 40+ components in real time.
Theme exported
Your theme JSON has been copied to clipboard.
Low contrast detected
The primary color may have insufficient contrast on the current background.
Invalid token
The border radius value must be between 0 and 64px.
Type at Every Scale
A modular type scale built from your base size and ratio. Every heading uses your heading font. Every body element uses your base font. All update live.
Base Font
Inter
16px base · 1.6 leading
Heading Font
Syne
Display → H5 scale
Scale Ratio
×1.25
Major Third
The quick brown fox
Heading Level One
Heading Level Two
Heading Level Three
Heading Level Four
Heading Level Five
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. Sphinx of black quartz, judge my vow.
Small body text for secondary information and captions.
Caption text for labels, metadata, and micro-copy.
const theme = useThemeSystem()
Real Pages. Real System.
The design system isn't limited to isolated components — it drives full page layouts. Features, testimonials, pricing, FAQs — all themed.
Feature Section
Token-Driven Architecture
Every visual property — color, size, spacing, shadow — is a composable design token stored in a single source of truth.
Instant Propagation
CSS custom properties cascade instantly. No re-renders. No JavaScript overhead. Native browser speed.
Export-Ready
Export your theme as JSON, raw CSS variables, or a Tailwind-compatible color object. Bring it anywhere.
Project Cards
ThemeForge Core
A real-time design token platform for scaling brand consistency across digital products.
Stellaris Analytics
Premium analytics platform with a modular design system powering 40+ dashboards.
Luminary Shop
Luxury brand storefront built on a custom token-driven component library.
Testimonials
“ThemeForge completely changed how our team communicates about design decisions. We speak in tokens now — not in hex codes.”
Sofia Andersson
Head of Design, Stellaris
“The live preview is a game-changer for pitching clients. We apply a preset, they see exactly what their brand looks like in 5 seconds.”
Marcus Chen
Creative Director, Luminary
FAQ
ThemeForge stores all design tokens in a Zustand store. When you change a value, a watch effect immediately writes the new CSS custom properties to document.documentElement. Because Tailwind utilities reference these CSS variables, every component in the tree updates without any re-rendering.
Absolutely. Export as JSON for a complete token map, as a CSS :root block to paste directly into your stylesheet, or as a Tailwind color config object. Your theme travels with zero lock-in.
Yes. The theme store uses Zustand's persist middleware with an SSR-safe storage guard. Tokens are hydrated from localStorage on the client without causing hydration mismatches.
CTA Section
Ready to Build Premium?
Start from a curated preset or build your own from scratch. Every brand deserves a design system that actually works.
Choose Your Visual Identity
Six hand-crafted presets. From polished dark to warm editorial. One click to apply — every token updates instantly.
Open the Theme Builder to customize any preset or build your own from scratch.
Take It Anywhere.
Export your complete theme in three formats. Drop the JSON into any ThemeForge instance. Paste the CSS block into any project. Extend Tailwind with the config object.
Theme JSON
Complete design token map. Import into any ThemeForge instance.
44 lines
{
"radius": {
"base": 8
},
"shadows": {
"intensity": 70
},
"spacing": {
"base": 16,
"density": "default"
},
"layout": {
"containerWidth": 1200
},
"components": {
"buttonStyle": "solid",
"cardStyle": "elevated"
},
"id": "midnight",
"name": "Midnight",
"mode": "dark",
"colors": {
"primary": "#6366f1",
"secondary": "#8b5cf6",
"accent": "#06b6d4",
"background": "#030712",
"surface": "#0f172a",
"surfaceElevated": "#1e293b",
"textPrimary": "#f8fafc",
"textSecondary": "#94a3b8",
"textMuted": "#475569",
"border": "#1e293b",
"borderSubtle": "#0f172a"
},
"typography": {
"fontFamilyBase": "'Inter', sans-serif",
"fontFamilyHeading": "'Syne', sans-serif",
"fontFamilyMono": "'Space Mono',
... (open Export panel for full output)CSS Custom Properties
Drop this :root block into any stylesheet for instant theming.
55 lines
:root {
--color-primary: 99 102 241;
--color-secondary: 139 92 246;
--color-accent: 6 182 212;
--color-bg: 3 7 18;
--color-surface: 15 23 42;
--color-surface-elevated: 30 41 59;
--color-text-primary: 248 250 252;
--color-text-secondary: 148 163 184;
--color-text-muted: 71 85 105;
--color-border: 30 41 59;
--color-border-subtle: 15 23 42;
--color-primary-hex: #6366f1;
--color-secondary-hex: #8b5cf6;
--color-accent-hex: #06b6d4;
--color-bg-hex: #030712;
--color-surface-hex: #0f172a;
--color-border-hex: #1e293b;
--font-base: 'Inter', sans-serif;
--font-heading: 'Syne', sans-serif;
--font-mono: 'Space Mono', monospace;
--font-size-base: 16px;
--text-xs: 0.7500rem;
--text-sm: 0.8750rem;
--text-base: 1.0000rem;
--text-lg: 1.2500rem;
--text-xl:
... (open Export panel for full output)Tailwind Config
Extend your tailwind.config.js with your brand color palette.
15 lines
{
"colors": {
"primary": "#6366f1",
"secondary": "#8b5cf6",
"accent": "#06b6d4",
"background": "#030712",
"surface": "#0f172a",
"surface-elevated": "#1e293b",
"text-primary": "#f8fafc",
"text-secondary": "#94a3b8",
"text-muted": "#475569",
"border": "#1e293b",
"border-subtle": "#0f172a"
}
}Share Your Theme
Generate a URL with your theme encoded as query parameters.