Default Presets

@themvora/core

Themvora's curated palette collection: nine families, each one a recipe that the semantic generator resolves into a complete light/dark theme. Click any card to apply that preset to this entire site — live, no reload.

Compare with Brand →

Oat

Warm · Soft · Neutral · soft

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Berry

Warm · Vibrant · vibrant

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Mint

Cool · Soft · Restrained · soft

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Citrus

Warm · Vibrant · Bright · vibrant

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Cocoa

Warm · Deep · Editorial · editorial

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Plum

Violet · Editorial · editorial

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Iris

Cool · Balanced · balanced

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Sky

Cool · Soft · Airy · soft

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Graphite

Neutral · Minimal · minimal

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Preview & use

Pick a family and mode to see a full application preview, the setup snippet for your framework, and the resolved CSS variables.

Preview theme

Neutral · light

Account settings

Manage how your workspace looks and behaves.

Email

✓ Verified

Save changesSelectedDisabledFocused

Healthy1 errorPending

primary

secondary

accent

success

destructive

muted

card

border

ring

Pick your framework

Filtered to this family

src/App.tsx

TSX / JSX

import { ThemeProvider } from "@themvora/react";
import { getPresetThemes } from "@themvora/core";

// default — light + dark in one family
const themes = getPresetThemes().filter((t) => t.meta?.family === "default");

export function App() {
  return (
    <ThemeProvider themes={themes} defaultTheme="default-light">
      {/* your app */}
    </ThemeProvider>
  );
}

All presets (no filtering)

src/App.tsx

TSX / JSX

import { ThemeProvider } from "@themvora/react";
import { getPresetThemes } from "@themvora/core";

// All default presets — every family, light + dark
const themes = getPresetThemes();

export function App() {
  return (
    <ThemeProvider themes={themes} defaultTheme="plum-light">
      {/* your app */}
    </ThemeProvider>
  );
}

Family picker with useProvidedThemes()

src/App.tsx

TSX / JSX

import { useProvidedThemes, useSetThemeFamily } from "@themvora/react";

export function App() {
  const families = useProvidedThemes();
  const setFamily = useSetThemeFamily();

  return (
    <main>
      <select
        value={families[0]?.family ?? ""}
        onChange={(e) => setFamily(e.target.value)}
      >
        {families.map((f) => (
          <option key={f.family} value={f.family}>
            {f.family}
          </option>
        ))}
      </select>
    </main>
  );
}

Contrast checks

TextPASS›

foreground/background15.12:1≥4.5
cardForeground/card16.40:1≥4.5
popoverForeground/popover15.80:1≥4.5
primaryForeground/primary17.45:1≥4.5
secondaryForeground/secondary12.00:1≥4.5
mutedForeground/muted4.75:1≥4.5
accentForeground/accent5.05:1≥4.5
destructiveForeground/destructive6.46:1≥4.5
successForeground/success5.49:1≥4.5

UI boundariesPASS›

input/background3.20:1≥3
input/card3.47:1≥3

Focus indicatorsPASS›

ring/background15.71:1≥3
ring/card17.05:1≥3
ring/popover16.42:1≥3
ring/muted14.35:1≥3
ring/secondary13.83:1≥3

Resolved CSS variables

For light — the preset you are previewing. 109 variables.

light.css

css

:root {
  --theme-color-background: #eff0f1;
  --theme-color-foreground: #1a1b1c;
  --theme-color-muted: #e5e6e7;
  --theme-color-mutedForeground: #636465;
  --theme-color-card: #f9f9fb;
  --theme-color-cardForeground: #1a1b1c;
  --theme-color-popover: #f4f5f6;
  --theme-color-popoverForeground: #1a1b1c;
  --theme-color-primary: #0d162e;
  --theme-color-primaryForeground: #fbfcfd;
  --theme-color-secondary: #e1e2e4;
  --theme-color-secondaryForeground: #232425;
  --theme-color-accent: #897fa7;
  --theme-color-accentForeground: #111213;
  --theme-color-destructive: #bb0916;
  --theme-color-destructiveForeground: #fbfcfd;
  --theme-color-success: #00782d;
  --theme-color-successForeground: #fbfcfd;
  --theme-color-border: #d8d9db;
  --theme-color-input: #858687;
  --theme-color-ring: #0d162e;
  --theme-spacing-0: 0px;
  --theme-spacing-1: 4px;
  --theme-spacing-2: 8px;
  --theme-spacing-3: 12px;
  --theme-spacing-4: 16px;
  --theme-spacing-5: 20px;
  --theme-spacing-6: 24px;
  --theme-spacing-7: 28px;
  --theme-spacing-8: 32px;
  --theme-spacing-9: 36px;
  --theme-spacing-10: 40px;
  --theme-spacing-11: 44px;
  --theme-spacing-12: 48px;
  --theme-spacing-14: 56px;
  --theme-spacing-16: 64px;
  --theme-spacing-20: 80px;
  --theme-spacing-24: 96px;
  --theme-spacing-px: 1px;
  --theme-spacing-0.5: 2px;
  --theme-spacing-1.5: 6px;
  --theme-spacing-2.5: 10px;
  --theme-spacing-3.5: 14px;
  --theme-radius-sm: 4px;
  --theme-radius-md: 8px;
  --theme-radius-lg: 12px;
  --theme-radius-xl: 16px;
  --theme-radius-2xl: 24px;
  --theme-radius-full: 9999px;
  --theme-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --theme-shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --theme-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --theme-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --theme-shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
  --theme-shadow-2xl: 0 25px 50px rgba(0,0,0,0.25);
  --theme-border-width-0: 0px;
  --theme-border-width-1: 1px;
  --theme-border-width-2: 2px;
  --theme-border-width-4: 4px;
  --theme-border-width-8: 8px;
  --theme-z-index-0: 0;
  --theme-z-index-10: 10;
  --theme-z-index-20: 20;
  --theme-z-index-30: 30;
  --theme-z-index-40: 40;
  --theme-z-index-50: 50;
  --theme-z-index-auto: auto;
  --theme-breakpoint-sm: 640px;
  --theme-breakpoint-md: 768px;
  --theme-breakpoint-lg: 1024px;
  --theme-breakpoint-xl: 1280px;
  --theme-breakpoint-2xl: 1536px;
  --theme-typography-font-family-sans: ui-sans-serif, system-ui, sans-serif;
  --theme-typography-font-family-serif: ui-serif, Georgia, serif;
  --theme-typography-font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --theme-typography-font-size-xs: 0.75rem;
  --theme-typography-font-size-sm: 0.875rem;
  --theme-typography-font-size-base: 1rem;
  --theme-typography-font-size-lg: 1.125rem;
  --theme-typography-font-size-xl: 1.25rem;
  --theme-typography-font-size-2xl: 1.5rem;
  --theme-typography-font-size-3xl: 1.875rem;
  --theme-typography-font-size-4xl: 2.25rem;
  --theme-typography-font-size-5xl: 3rem;
  --theme-typography-line-height-none: 1;
  --theme-typography-line-height-tight: 1.25;
  --theme-typography-line-height-snug: 1.375;
  --theme-typography-line-height-normal: 1.5;
  --theme-typography-line-height-relaxed: 1.625;
  --theme-typography-line-height-loose: 2;
  --theme-code-background: #f1f5f9;
  --theme-code-foreground: #0f172a;
  --theme-code-comment: #64748b;
  --theme-code-keyword: #dc2626;
  --theme-code-string: #0891b2;
  --theme-code-number: #c2410c;
  --theme-code-function: #7c3aed;
  --theme-code-variable: #0f172a;
  --theme-code-type: #0369a1;
  --theme-code-property: #0369a1;
  --theme-code-operator: #dc2626;
  --theme-code-punctuation: #475569;
  --theme-code-tag: #dc2626;
  --theme-code-attribute: #0369a1;
  --theme-code-lineNumber: #94a3b8;
  --theme-code-selection: rgba(15, 23, 42, 0.12);
  --theme-code-highlight: rgba(15, 23, 42, 0.06);
  --theme-code-gutter: #f1f5f9;
  --theme-code-border: #e2e8f0;
}

Define your own themes →Brand presets →

Default Presets — Themvora