Theme Presets
Ready-made theme presets: Default, Minimal, Bold, Earthy, and Dark Luxury — each a named bundle of token overrides ready to drop into any project.
Built-in Presets
Each preset is a named bundle of CSS custom property overrides.
Apply one by setting its variables on :root or any ancestor element —
no extra stylesheet, no class conflicts.
Default Preset
Clean, neutral base. Zinc grays with a blue accent. Works for any product without a strong visual identity.
[data-preset="default"] { --tp-bg: #ffffff; --tp-surface: #f5f5f5; --tp-surface-2: #ebebeb; --tp-border: #e0e0e0; --tp-text: #18181b; --tp-text-secondary: #52525b; --tp-accent: #2563eb; --tp-accent-hover: #1d4ed8; --tp-accent-text: #ffffff; --tp-radius: 0.375rem; --tp-font-display: "Inter", system-ui, sans-serif; --tp-font-body: "Inter", system-ui, sans-serif;}Minimal Preset
Maximum whitespace, zero radius, hairline borders. For tools and dashboards where content is the UI.
[data-preset="minimal"] { --tp-bg: #ffffff; --tp-surface: #fafafa; --tp-surface-2: #f0f0f0; --tp-border: #d4d4d4; --tp-text: #0a0a0a; --tp-text-secondary: #6b6b6b; --tp-accent: #000000; --tp-accent-hover: #333333; --tp-accent-text: #ffffff; --tp-radius: 0rem; --tp-font-display: "DM Sans", system-ui, sans-serif; --tp-font-body: "DM Sans", system-ui, sans-serif;}Bold Preset
High contrast. Punchy violet accent against an off-white surface. For brands that want to be remembered.
[data-preset="bold"] { --tp-bg: #fafaf9; --tp-surface: #f0effe; --tp-surface-2: #e4e2fd; --tp-border: #c7c4f9; --tp-text: #1e1b4b; --tp-text-secondary: #4c1d95; --tp-accent: #7c3aed; --tp-accent-hover: #6d28d9; --tp-accent-text: #ffffff; --tp-radius: 0.375rem; --tp-font-display: "Inter", system-ui, sans-serif; --tp-font-body: "Inter", system-ui, sans-serif;}Earthy Preset
Warm sand background, terracotta accent, and generous radius. For food, lifestyle, and craft brands.
[data-preset="earthy"] { --tp-bg: #fdf8f3; --tp-surface: #f5ede2; --tp-surface-2: #ecddd0; --tp-border: #d4bfaa; --tp-text: #3b2a1a; --tp-text-secondary: #7a5c42; --tp-accent: #c2622b; --tp-accent-hover: #a8521f; --tp-accent-text: #ffffff; --tp-radius: 0.75rem; --tp-font-display: "DM Serif Display", Georgia, serif; --tp-font-body: "Inter", system-ui, sans-serif;}Dark Luxury Preset
Near-black surface, muted gold accent, tight radius. For premium, editorial, and high-end e-commerce.
[data-preset="dark-luxury"] { --tp-bg: #0a0a0a; --tp-surface: #141414; --tp-surface-2: #1f1f1f; --tp-border: #2a2a2a; --tp-text: #f5f5f4; --tp-text-secondary: #a8a29e; --tp-accent: #c9a84c; --tp-accent-hover: #b8972d; --tp-accent-text: #0a0a0a; --tp-radius: 0.25rem; --tp-font-display: "DM Serif Display", Georgia, serif; --tp-font-body: "Inter", system-ui, sans-serif;}Side-by-side Comparison
The same button + input component rendered with each preset. Personality comes entirely from the token bundle — the markup is identical.
Default
Neutral
Minimal
Sharp
Bold
High contrast
Earthy
Warm
Dark Luxury
Dark
Live Switcher
Switch presets on a realistic page section. The canvas below reflects whichever preset is active — same markup throughout.
New release
Build faster with presets
One token bundle. Every component inherits the right colors, radius, and typography automatically.
Custom Preset Scaffolding
A preset is just a named group of CSS custom property values. Copy the
template below, fill in your brand values, and add it to
css/token.css as a [data-preset] selector block.
/* css/token.css — add below :root { } */[data-preset="brand"] { --tp-bg: #ffffff; /* page background */ --tp-surface: #f8f8f8; /* card / panel background */ --tp-surface-2: #f0f0f0; /* nested surface */ --tp-border: #e2e2e2; /* dividers, input borders */ --tp-text: #111111; /* primary text */ --tp-text-secondary: #666666; /* secondary / meta text */ --tp-accent: #your-brand-color; --tp-accent-hover: #your-brand-color-dark; --tp-accent-text: #ffffff; /* text on accent bg */ --tp-radius: 0.375rem; /* global border-radius */ --tp-font-display: "YourFont", system-ui, sans-serif; --tp-font-body: "YourFont", system-ui, sans-serif;}Keep it semantic
Name tokens by role (--tp-accent) not by value (--tp-blue-600). Roles survive rebrands; color names don't.
Radius is personality
0rem = tool/dashboard. 0.375rem = product/SaaS. 0.75rem+ = consumer/lifestyle. Pick one and apply it everywhere.
Font pairing matters
Set --tp-font-display to a characterful face and --tp-font-body to a neutral one. Swapping just those two values changes the entire mood.