A themeable starting point for every project. CSS custom properties, a consistent token system, and full light & dark mode support — so you can focus on what makes your product unique.
All form input types shown below. Validation fires only after you interact with a field, never on page load.
Everything you need to know to get up and running. Can't find what you're looking for? Reach out to us.
Design tokens are named variables that store visual design decisions —
colors, spacing, typography, and more. Instead of hard-coding
#3b82f6 across hundreds of files, you reference
--color-accent once. When you rebrand or tweak a theme,
you change one variable and every component updates automatically.
The semantic color tokens use the CSS light-dark() function,
which automatically resolves to the correct value based on the
color-scheme declared on :root. The browser reads
the user's system preference and switches the active scheme for you —
no prefers-color-scheme media queries or class toggling needed.
To add a manual toggle later, just set data-theme on
<html>.
oklch is a perceptually uniform color space, which means that stepping from shade 400 to shade 600 looks like an equal visual jump — unlike hex or hsl where the same numerical step can look very different depending on the hue. This gives you a more predictable and accessible color palette, especially when generating tints and shades programmatically.
Yes. Tokens defined inside @theme are automatically picked
up by Tailwind v4 and turned into utility classes — for example
--color-primary-500 becomes bg-primary-500 and
text-primary-500. For semantic tokens on :root
(like --color-canvas), use Tailwind v4's CSS variable shorthand:
bg-(--color-canvas).
Change the hue angle on the --color-primary-* scale inside
@theme in style.css. The entire scale is built
on a single oklch hue (currently 250 — a blue-violet).
Swap that to 145 for green, 25 for red, or any
angle you need. The semantic --color-accent tokens
automatically inherit the updated brand color.
Every visual decision lives in one of these tokens. Change a value here and the whole UI updates.
Canvas & Surfaces
--color-canvas
--color-canvas-subtle
--color-surface
--color-surface-raised
--color-surface-overlay
Text
--color-heading
--color-foreground
--color-foreground-muted
--color-foreground-faint
Borders
--color-border-subtle
--color-border
--color-border-strong
Accent
--color-accent-subtle
--color-accent
--color-accent-hover
--color-on-accent
Success
--color-success-subtle
--color-success
--color-on-success
Warning
--color-warning-subtle
--color-warning
--color-on-warning
Error
--color-error-subtle
--color-error
--color-on-error
Info
--color-info-subtle
--color-info
--color-on-info
rounded-interactive
inputs, buttons
rounded-card
cards, panels
rounded-overlay
modals, dropdowns
rounded-badge
badges, pills, tags
shadow-interactive
buttons, inputs on hover
shadow-card
cards, raised surfaces
shadow-overlay
dialogs, tooltips
--text-display
700 · clamp(2.5–4rem) · display
The quick brown fox
--text-title-lg
700 · clamp(1.75–2.5rem) · display
Section heading
--text-title-md
600 · clamp(1.25–1.75rem) · display
Card or panel title
--text-title-sm
600 · 1.125rem · primary
Subsection or sidebar title
--text-body-lg
400 · 1.125rem / 1.75 · primary
Lead paragraph or intro text that needs a little more presence.
--text-body
400 · 1rem / 1.65 · primary
Default body text used for paragraphs and general content throughout the page.
--text-body-sm
400 · 0.875rem / 1.6 · primary
Smaller body text for inputs, secondary descriptions, or dense UI.
--text-label
500 · 0.875rem / 1.25 · primary
Form labels, button text, nav items
--text-caption
400 · 0.75rem / 1.4 · primary
Hints, counters, timestamps, image captions
--text-code
400 · 0.875rem / 1.6 · mono
const token = 'var(--text-code)'
Section padding — block
· Vertical top/bottom padding on <section> and <article> elements. Use py-(--section-padding-block-*).
--section-padding-block-xs
1.5rem · 24px
Tight / hero sub-sections
--section-padding-block-sm
3rem · 48px
Compact sections
--section-padding-block-md
5rem · 80px
Standard section
--section-padding-block-lg
7rem · 112px
Generous section
--section-padding-block-xl
10rem · 160px
Hero / landing page
Section padding — inline
· Horizontal left/right padding on sections. Use px-(--section-padding-inline-*).
--section-padding-inline-xs
1rem · 16px
Mobile edge-to-edge
--section-padding-inline-sm
1.5rem · 24px
Small viewports
--section-padding-inline-md
2rem · 32px
Tablet / mid-size
--section-padding-inline-lg
4rem · 64px
Desktop gutter
--section-padding-inline-xl
6rem · 96px
Wide / max-width content
Section gap — block
· Vertical gap between elements inside a section. Use gap-(--section-gap-block-*) or space-y-(--section-gap-block-*).
--section-gap-block-xs
1.5rem · 24px
Tight / hero sub-sections
--section-gap-block-sm
3rem · 48px
Compact sections
--section-gap-block-md
5rem · 80px
Standard section
--section-gap-block-lg
7rem · 112px
Generous section
--section-gap-block-xl
10rem · 160px
Hero / landing page
Padding and gap values for buttons, links, and other interactive elements.
--interactive-padding-block
0.75rem · 12px
Vertical (top/bottom) padding inside buttons and interactive elements
--interactive-padding-inline
1.5rem · 24px
Horizontal (left/right) padding inside buttons and interactive elements
--interactive-gap-inline
0.5rem · 8px
Horizontal gap between buttons placed side by side in a row