Tailwind Theme Preview
Pick your brand colors and fonts, watch a live CRM adopt them instantly, and copy a Tailwind v4 @theme block or DTCG-compatible JSON tokens straight into your project.
Brand
Good morning, Morgan
Here's what's moving in your pipeline today.
Pipeline value
Deals won (MTD)
Win rate
Contacts
4 shown| Name | Value |
|---|---|
Lena Rivera Northwind Labs | $48,200 |
Marcus Oduya Orbital Studio | $121,500 |
Priya Desai Helix Foods | $17,800 |
Jonas Weber Briar & Bramble | $63,400 |
Deal pipeline
Activity
- Sent proposal to Northwind Labs12m
- Closing call scheduled with Orbital Studio1h
- Added new contact at Helix Foods3h
/* Generated by thefrontkit Tailwind Theme Preview */
@theme {
/* Brand — Primary */
--color-primary-50: #f2f2fc;
--color-primary-100: #e1e2f9;
--color-primary-200: #c3c4f3;
--color-primary-300: #9d9eec;
--color-primary-400: #5154f0;
--color-primary-500: #1418eb;
--color-primary-600: #1013bc;
--color-primary-700: #0d109b;
--color-primary-800: #16176f;
--color-primary-900: #111255;
--color-primary-950: #0a0b33;
/* Brand — Accent */
--color-accent-50: #fdf9f2;
--color-accent-100: #faf1e0;
--color-accent-200: #f6e2c1;
--color-accent-300: #f0d099;
--color-accent-400: #f7b84a;
--color-accent-500: #f59f0a;
--color-accent-600: #c47f08;
--color-accent-700: #a26907;
--color-accent-800: #734f12;
--color-accent-900: #593d0d;
--color-accent-950: #352508;
/* Neutral */
--color-neutral-50: #f6f7f8;
--color-neutral-100: #ebedef;
--color-neutral-200: #d7dbe0;
--color-neutral-300: #bdc3cc;
--color-neutral-400: #929eb0;
--color-neutral-500: #6b7c94;
--color-neutral-600: #566376;
--color-neutral-700: #475262;
--color-neutral-800: #3a414b;
--color-neutral-900: #2c323a;
--color-neutral-950: #1b1e23;
/* Typography */
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-heading: "DM Sans", "Inter", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}How it works
1. Enter your brand
Paste a hex or pick colors for primary, accent, and neutral. Choose heading, body, and mono fonts from the curated Google Fonts list.
2. See the live CRM
A realistic CRM dashboard — sidebar, KPIs, contacts table, pipeline, activity feed — rebrands in real time. Toggle light or dark mode to sanity-check both.
3. Export your tokens
Copy or download a Tailwind v4 @theme block, or grab a DTCG-compatible JSON file that plugs straight into Style Dictionary.
100% client-side. Your brand colors never leave your browser.
Frequently Asked Questions
Common questions about Tailwind v4 themes, design tokens, and this preview tool.
Why preview Tailwind themes before you code?
A brand color on its own tells you very little. The 600 shade you picked for buttons lives alongside hovers, borders, focus rings, soft backgrounds, dark mode surfaces, and headings set in a completely different font. The only way to know whether the combination works is to see it in context — which usually means scaffolding a project, wiring Tailwind, and throwing together a dashboard. That's 30 minutes of work for a five-second decision.
This tool collapses that loop. Pick your colors, swap fonts, flip between light and dark, and watch a realistic CRM dashboard react instantly. When you land on something you like, copy a Tailwind v4 @theme block or download DTCG-compatible design tokens and drop them into your real project.
What you'll get
- Full 50-950 shade scales for primary, accent, and neutral — 33 colors total.
- Font stacks for heading, body, and mono with sensible fallbacks.
- A Tailwind v4
@themeblock ready to paste into your CSS. - A DTCG-compatible JSON file for Style Dictionary, Tokens Studio, or Supernova.
- Light and dark mode surfaces derived automatically from your neutral shade.
Ship branded UIs faster
Our starter kits already use the same Tailwind v4 @theme pattern. Drop your tokens in and you're done.