Theme Kit ships with 9 curated families + 5 brand presets — each with carefully chosen, WCAG-conscious light and dark variants. Click any preset to apply it to this site live.

1What's included

Every preset is a complete design system with light and dark token pairs. The nine default families cover warm, cool, and neutral palettes. The five brand presets replicate real-world design languages.

Default Presets

9 curated families: oat, berry, mint, citrus, cocoa, plum, iris, sky, graphite. Each ships a light and dark variant with distinct border radii and accent colors.

Browse all defaults →

Brand Presets

5 real-world palettes: Apple, GitHub, Vercel, Slack, Discord. Faithful reproductions of each brand's color language, radius, and tone.

Browse all brands →

2Try them live

Click any card below to apply that theme to this entire site — live, no reload. Every card shows the preset's light and dark variants side-by-side.

Applied now on this site

This page is themed by the live runtime — every card above calls setFamily() on this very page.

theme-kit-default-light · system · theme-kit

Resolved CSS variables

--theme-color-background: #fafbff;
--theme-color-foreground: #0d0f1f;
--theme-color-card: #ffffff;
--theme-color-cardForeground: #0d0f1f;
--theme-color-popover: #ffffff;
--theme-color-popoverForeground: #0d0f1f;
--theme-color-primary: #5b54e8;
--theme-color-primaryForeground: #ffffff;
--theme-color-secondary: #eef0fb;
--theme-color-secondaryForeground: #171a2e;
--theme-color-muted: #f2f3fb;
--theme-color-mutedForeground: #5a6172;
--theme-color-accent: #e8e6ff;
--theme-color-accentForeground: #4f46c9;
--theme-color-destructive: #ef4444;
--theme-color-destructiveForeground: #ffffff;
--theme-color-success: #16a34a;
--theme-color-successForeground: #ffffff;
--theme-color-border: #e4e6f2;
--theme-color-input: #e4e6f2;
--theme-color-ring: #5b54e8;
--theme-radius-lg: 12px;
--theme-code-background: #f6f7fc;
--theme-code-foreground: #0f172a;
--theme-code-comment: #6b7280;
--theme-code-keyword: #7c3aed;
--theme-code-string: #07865c;
--theme-code-number: #d97706;
--theme-code-function: #2563eb;
--theme-code-variable: #0f172a;
--theme-code-type: #db2777;
--theme-code-property: #0284c7;
--theme-code-operator: #7c3aed;
--theme-code-punctuation: #475569;
--theme-code-tag: #be185d;
--theme-code-attribute: #0284c7;
--theme-code-lineNumber: #9ca3af;
--theme-code-selection: rgba(91, 84, 232, 0.12);
--theme-code-highlight: rgba(91, 84, 232, 0.06);
--theme-code-gutter: #f6f7fc;
--theme-code-border: #e4e6f2;

Curated palettes from @theme-kit/core — the nine signature families.

Neutral

neutral

Light

TKDefault

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Oat

oat

Oat Light

TKoat

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Berry

berry

Berry Light

TKberry

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Mint

mint

Mint Light

TKmint

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Citrus

citrus

Citrus Light

TKcitrus

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Cocoa

cocoa

Cocoa Light

TKcocoa

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Plum

plum

Plum Light

TKplum

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Iris

iris

Iris Light

TKiris

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Sky

sky

Sky Light

TKsky

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Graphite

graphite

Graphite Light

TKgraphite

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

3Install instructions

Import preset families and brand palettes directly from the core package. No extra styling required.

Default presets

1import { getPresetThemes } from "@theme-kit/core";
2
3// Default presets — nine families, light + dark
4const themes = getPresetThemes();
5
6// Restyle one family's tokens
7const custom = getPresetThemes({
8  plum: {
9    light: { tokens: { colors: { primary: "#6d28d9" } } },
10  },
11});

Brand presets

1import { getBrandPresets } from "@theme-kit/core";
2
3// Apple, GitHub, Vercel, Slack, Discord — light + dark each
4const themes = getBrandPresets();
5
6const github = themes.filter((t) => t.meta?.family === "github");
7createThemeRuntime({ themes: github, defaultTheme: "github-light" });

Tip

You can override any preset's tokens by passing a PresetOverrides map to getPresetThemes(). See the custom themes guide for details.

4Create your own

Presets are a starting point — you can compose, extend, or generate your own families.

Custom Themes Guide

defineTheme, extendTheme, composeTheme and the generation studio.

→

Semantic Tokens

Typography, spacing, radius, shadows, border widths, z-index and breakpoints.

→