Theme

The theme property defines your design system with 7 optional token categories. All tokens generate CSS custom properties and Tailwind CSS utility classes.

colors

Named color tokens as key-value pairs. Each becomes a CSS variable (--color-{name}) and Tailwind class (bg-{name}, text-{name}).

PropertyDescription
{name}Token name (e.g., primary, accent). Used to generate CSS variable --color-{name} and Tailwind utilities.
CSS outputGenerates --color-{name} CSS variable plus bg-{name}, text-{name}, border-{name} utility classes.
YAML
theme:
  colors:
    primary: "#3b82f6"
    secondary: "#8b5cf6"
    accent: "#f59e0b"
    background: "#0a0e1a"
    text: "#e8ecf4"
    muted: "#64748b"

fonts

Typography configuration for heading, body, and mono fonts. Supports family, fallback, weights, style, size, line height, letter spacing, transform, and url.

PropertyDescription
familyFont family name (e.g., "Inter", "Roboto"). Maps to CSS font-family.
fallbackFallback font stack used when primary font is unavailable (e.g., "system-ui, sans-serif").
weightsArray of numeric font weights to load (e.g., [400, 600, 700]). Optimizes download size.
styleFont style: normal, italic, or oblique (default: normal).
sizeBase font size as CSS value (e.g., "16px", "1rem"). Applied to body text.
lineHeightLine height multiplier or CSS value (e.g., "1.5", "1.2"). Controls vertical spacing between lines.
letterSpacingLetter spacing as CSS value (e.g., "0.05em", "-0.01em").
transformText transformation: none, uppercase, lowercase, or capitalize.
urlFont file URL or Google Fonts URL. Injected as <link> in <head>.
YAML
theme:
  fonts:
    heading:
      family: Inter
      weights: [600, 700]
      lineHeight: "1.2"
    body:
      family: Inter
      size: "16px"
      url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700"

Google Fonts

Add a url to automatically load custom fonts. The URL is injected as a <link> tag in the page head.

spacing

Named spacing tokens as Tailwind class strings. Define container widths, section padding, gaps, and component spacing.

YAML
theme:
  spacing:
    container: "max-w-7xl mx-auto px-4"
    section: "py-16 sm:py-20"
    card: "p-6"
    gap: "gap-8"

Shadows, Animations & More

Additional design tokens for shadows, animations, responsive breakpoints, and border radius.

shadows

Named shadow tokens as CSS box-shadow values. Each becomes a shadow-{name} utility.

animations

Custom @keyframes animations with enabled flag, duration, timing function, iteration count, and keyframe definitions.

breakpoints

Custom responsive breakpoints as pixel values. Each becomes a min-width media query for responsive utilities.

borderRadius

Named border radius tokens as CSS values. Each becomes a rounded-{name} utility class.

YAML
theme:
  shadows:
    card: "0 4px 6px rgba(0, 0, 0, 0.1)"
    elevated: "0 10px 30px rgba(0, 0, 0, 0.2)"
  borderRadius:
    card: "0.75rem"
    button: "0.5rem"
  breakpoints:
    tablet: 768
    desktop: 1024

Full Example

A complete theme configuration combining colors, fonts, spacing, and shadows.

YAML
theme:
  colors:
    primary: "#6366f1"
    secondary: "#8b5cf6"
    accent: "#f59e0b"
    background: "#0f172a"
    surface: "#1e293b"
    text: "#f8fafc"
    muted: "#94a3b8"
  fonts:
    heading:
      family: Inter
      weights: [600, 700]
      url: "https://fonts.googleapis.com/css2?family=Inter:wght@600;700&display=swap"
    body:
      family: Inter
      weights: [400, 500]
  spacing:
    container: "max-w-6xl mx-auto px-4"
    section: "py-16 sm:py-20"
Sovrium app with custom theme applied

A CRM application rendered with custom theme colors, fonts, and spacing.

OverviewPages & Components