Theme Overview & Colors

theme defines your design system as named tokens. Every token becomes a CSS custom property and a Tailwind utility class, so config-declared design decisions are available to every className in the app. Every category is optional — a usable theme can be colors and nothing else.

theme now lives inside design. design.theme is the canonical home for these tokens, and it accepts exactly what is documented on this page — every category, unchanged. Top-level theme remains a supported alias, so existing configs keep working; sovrium validate prints a deprecation notice and still exits 0. Declaring both theme and design.theme is an error, not a merge. See Design System, which also covers the principles, voice, tone and usage rules that live alongside the tokens.

Theme Properties

Property	Description
`colors`	Named color tokens. See below.
`darkColors`	Dark-mode overrides mirroring `colors`. See Baseline & Dark Mode.
`colorScheme`	Which scheme a first-time visitor gets: `light`, `dark`, or `system`.
`baseline`	`extend` (default) keeps Sovrium's default component look; `replace` starts from a neutral floor.
`fonts`	Typography per role. See Typography.
`spacing`	Named spacing tokens. See Spacing, Radius & Shadows.
`borderRadius`	Named radius tokens, each becoming a `rounded-{name}` utility.
`shadows`	Named box-shadow tokens, each becoming a `shadow-{name}` utility.
`codeBlock`	Syntax-highlighting theme for markdown fenced code blocks.
`breakpoints`	Responsive breakpoints. See Responsive Design.
`animations`	Keyframe and motion tokens. See Animations.

`colors`

Named color tokens as key-value pairs. Each name generates a --color-{name} CSS variable plus bg-{name}, text-{name} and border-{name} utilities.

app.yaml

theme:
  colors:
    primary: '#3b82f6'
    secondary: '#8b5cf6'
    accent: '#f59e0b'
    background: '#ffffff'
    text: '#0f172a'
    muted: '#64748b'
    muted-foreground: '#94a3b8'

Two constraints are enforced when the config is decoded, so a malformed palette fails sovrium validate rather than shipping a broken stylesheet:

Rule	Accepted
Token name	Lowercase kebab-case — `primary`, `muted-foreground`, `brand-2`. No camelCase, no underscores.
Value	6- or 8-digit hex, or a `rgb(`, `rgba(`, `hsl(` or `hsla(` function.

Named tokens are not a fixed list: define whatever vocabulary the design needs. Sovrium's own prebuilt components look for the conventional roles — primary, background, text, muted — so supplying those restyles the built-in chrome for free.

`fonts`

Typography moved to Typography.

`spacing`

Spacing tokens moved to Spacing, Radius & Shadows.

`baseline` & dark mode

baseline, colorScheme and darkColors moved to Baseline & Dark Mode.

Shadows, Border Radius & Code Blocks

These moved to Spacing, Radius & Shadows.

Responsive Breakpoints & Animations

breakpoints is documented on Responsive Design; animations on Animations.

Full Example

app.yaml

theme:
  baseline: extend
  colorScheme: system
  colors:
    primary: '#6366f1'
    background: '#ffffff'
    foreground: '#0f172a'
  darkColors:
    background: '#0f172a'
    foreground: '#f8fafc'
  fonts:
    body: { family: Inter, weights: [400, 600] }
  spacing:
    container: 'max-w-6xl mx-auto px-4'
  borderRadius:
    card: '0.75rem'

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

Typography — the fonts block.
Spacing, Radius & Shadows — the remaining token categories.
Baseline & Dark Mode — baseline, colorScheme, darkColors.
Responsive Design — breakpoints.
Animations — motion tokens.

Last updated August 28, 2026

← PreviousType Scale Next →Typography

Edit this page Report an issue

This documentation was written with AI, so errors or outdated content are possible. Sovrium is in beta. Contributions and corrections are welcome.

Theme Overview & Colors

Theme Properties

colors

fonts

spacing

baseline & dark mode