Brand Presets

@themvora/core

Brand-inspired starting points built on Themvora's semantic system. Each one starts from a brand's signature colour and resolves a complete, contrast-checked light/dark family. These are examples, not official brand themes.

Explore Default →

Brand reference & interpretation›

Reference first, then interpretation

Each brand preset starts from the colours the brand publishes — its guidelines or its design system — not from a screenshot of its website. The published value anchors the identity; Themvora generates the surfaces, borders, interaction roles and status colours around it, then solves the whole system for contrast. Where an anchor survives untouched this section says so; where the solver had to move one, it says that too.

ANCHORpublished value; pinned exactly
DERIVEDgenerated from the anchors
SEMANTICseed-independent (status roles)
IMPLEMENTATIONspecific to the source's own implementation; not used

Apple

official-guidelineshttps://developer.apple.com/design/human-interface-guidelines/color

Brand identity

System Blue #007affANCHOR
System Gray (grouped background) #f2f2f7IMPLEMENTATION
Label (primary text) #000000DERIVED

Themvora interpretation

light primary#007aff
dark primary#007aff
surface#eff0f1
borderring

Pinned: primary = #007aff. Everything else is generated.

Accessibility normalization

Anchor preserved exactly. The published value already satisfied the contrast contract, so the solver left it untouched.

9/9 semantic checks passed.

Apple's guidance is to use an accent colour deliberately rather than covering the interface with it, and to provide adaptive semantic colours for both appearances.
The preset therefore reads as neutral and clean with a blue accent, not as "everything is Apple blue".
System Blue cannot carry white or near-black text at 4.5:1, so the solver normalizes the anchor. That normalization is reported on the brand page rather than hidden.

GitHub

official-design-systemhttps://primer.style/product/getting-started/foundations/color-usage/

Brand identity

Primer Blue (accent) #0969daANCHOR
Canvas default (light) #ffffffIMPLEMENTATION
Canvas default (dark) #0d1117IMPLEMENTATION
Border default #d0d7deIMPLEMENTATION

Themvora interpretation

light primary#0969da
dark primary#0969da
surface#eff0f1
borderring

Pinned: primary = #0969da. Everything else is generated.

Accessibility normalization

Anchor preserved exactly. The published value already satisfied the contrast contract, so the solver left it untouched.

9/9 semantic checks passed.

Primer is the strongest available source: it is already a token system (base → functional → component) with inverted light/dark neutral scales, which maps onto Themvora's architecture almost directly.
Its surface levels, borders and hover states are implementation-specific, so Themvora derives its own rather than freezing Primer's.

Vercel

official-design-systemhttps://vercel.com/geist/colors

Brand identity

Brand black #000000ANCHOR
Brand white #ffffffANCHOR
Background 1 (light) #ffffffIMPLEMENTATION
Background 2 (light) #fafafaIMPLEMENTATION
Gray 400 — default border #ebebebIMPLEMENTATION
Gray 1000 — primary text #171717IMPLEMENTATION

Themvora interpretation

light primary#000000
dark primary#ffffff
surface#f5f5f5
borderring

Pinned: primary = #000000. Everything else is generated.

Accessibility normalization

Anchor preserved exactly. The published value already satisfied the contrast contract, so the solver left it untouched.

9/9 semantic checks passed.

Geist publishes ten scales of ten steps, each step with a documented usage: default/hover/active background, default/hover/active border, high-contrast background, secondary and primary text.
Its gray scale is pure neutral — zero saturation at every step — which is the actual character of the Vercel look. The preset uses the `minimal` style to reproduce that zero-chroma neutral scale.
The scale steps are implementation-specific: they are Vercel's chosen lightness ladder, and Themvora derives its own rather than freezing ten values.

Slack

official-guidelineshttps://slack.com/brand-guidelines

Brand identity

Aubergine #4a154bANCHOR
Slack Blue #36c5f0ANCHOR
Slack Green #2eb67dANCHOR
Slack Yellow #ecb22eANCHOR
Slack Red #e01e5aANCHOR

Themvora interpretation

light primary#4a154b
dark primary#4a154b
surface#f1f0f1
borderring

Pinned: primary = #4a154b. Everything else is generated.

Accessibility normalization

Anchor preserved exactly. The published value already satisfied the contrast contract, so the solver left it untouched.

9/9 semantic checks passed.

Slack publishes brand colours but not a public design-token system, so only the palette is used as reference.
Slack's brand terms prohibit copying or imitating the distinctive look and feel of Slack products and sites, including their colour combinations and stylization. The preset is therefore brand-inspired: aubergine anchors the identity, and the surface system, borders and status colours are Themvora's own.
The four accent brand colours are recorded as reference but map to no Themvora role — the status roles are seed-independent by design.

Discord

official-guidelineshttps://discord.com/branding

Brand identity

Blurple #5865f2ANCHOR
Light Blurple #e0e3ffANCHOR
Discord Black #000000ANCHOR
Discord White #ffffffANCHOR

Themvora interpretation

light primary#5865f2
dark primary#5865f2
surface#f0f0f1
borderring

Pinned: primary = #5865f2. Everything else is generated.

Accessibility normalization

Anchor preserved exactly. The published value already satisfied the contrast contract, so the solver left it untouched.

9/9 semantic checks passed.

Blurple is pinned exactly rather than approximated: semantic-v2 would otherwise invent a similar purple, and the point of a brand preset is that it is the brand's own colour.
Discord publishes a brand palette but no public token system, so the semantic roles around the anchor are Themvora's.
Light Blurple and the brand neutrals are recorded as identity reference; Themvora has no role for a brand tint, and the neutral scale is generated.

A brand preset is a starting point, not a reproduction. The brand’s signature colour anchors the identity and everything else is generated by Themvora’s semantic rules — so the result is a complete, contrast-checked light/dark family you can ship. Apply one, then override individual tokens in your own theme.

These presets are brand-inspired examples for Themvora. They are not official brand themes, and they do not imply endorsement or affiliation.

The brand presets

Five recipes, each anchored to a different brand hue. Expand “Details” on any card to see what changed against the default baseline.

Apple

Brand-inspired · Blue accent · Restrained · brand

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

GitHub

Brand-inspired · Primer blue · Systematic · brand

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Vercel

Brand-inspired · Monochrome · Geist neutral · minimal

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Slack

Brand-inspired · Aubergine · Bold · brand

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Discord

Brand-inspired · Blurple · Playful · brand

PrimarySecondaryAlert

Card title

Muted supporting text on the card surface.

Input, focused

Compare & use

Preview a brand palette against the same interface used on the Default page. “Show changes from Default” isolates which tokens differ.

Preview theme

Apple · light

Account settings

Manage how your workspace looks and behaves.

✓ 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 { getBrandPresets } from "@themvora/core";

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

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

All presets (no filtering)

src/App.tsx

TSX / JSX

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

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

export function App() {
  return (
    <ThemeProvider themes={themes} defaultTheme="apple-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.37:1≥4.5
popoverForeground/popover15.80:1≥4.5
primaryForeground/primary4.67:1≥4.5
secondaryForeground/secondary12.00:1≥4.5
mutedForeground/muted4.75:1≥4.5
accentForeground/accent4.84:1≥4.5
destructiveForeground/destructive6.46:1≥4.5
successForeground/success5.49:1≥4.5

UI boundariesPASS›

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

Focus indicatorsPASS›

ring/background3.62:1≥3
ring/card3.92:1≥3
ring/popover3.79:1≥3
ring/muted3.31:1≥3
ring/secondary3.19:1≥3

Resolved CSS variables

For apple-light — the preset you are previewing. 22 variables.

apple-light.css

css

:root {
  --theme-color-background: #eff0f1;
  --theme-color-foreground: #1a1b1c;
  --theme-color-muted: #e5e6e7;
  --theme-color-mutedForeground: #636465;
  --theme-color-card: #f8f9fb;
  --theme-color-cardForeground: #1a1b1c;
  --theme-color-popover: #f4f5f6;
  --theme-color-popoverForeground: #1a1b1c;
  --theme-color-primary: #007aff;
  --theme-color-primaryForeground: #111213;
  --theme-color-secondary: #e1e2e4;
  --theme-color-secondaryForeground: #232425;
  --theme-color-accent: #836eed;
  --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: #0078fb;
  --theme-radius-lg: 14px;
}

Define your own themes →

Reference first, then interpretation

ANCHORpublished value; pinned exactly

DERIVEDgenerated from the anchors

SEMANTICseed-independent (status roles)

IMPLEMENTATIONspecific to the source's own implementation; not used

Apple

official-guidelineshttps://developer.apple.com/design/human-interface-guidelines/color

Brand identity

System Blue #007affANCHOR
System Gray (grouped background) #f2f2f7IMPLEMENTATION
Label (primary text) #000000DERIVED

Themvora interpretation

light primary#007aff
dark primary#007aff
surface#eff0f1
borderring

Pinned: primary = #007aff. Everything else is generated.

Accessibility normalization

Anchor preserved exactly. The published value already satisfied the contrast contract, so the solver left it untouched.

9/9 semantic checks passed.

Apple's guidance is to use an accent colour deliberately rather than covering the interface with it, and to provide adaptive semantic colours for both appearances.
The preset therefore reads as neutral and clean with a blue accent, not as "everything is Apple blue".
System Blue cannot carry white or near-black text at 4.5:1, so the solver normalizes the anchor. That normalization is reported on the brand page rather than hidden.

GitHub

official-design-systemhttps://primer.style/product/getting-started/foundations/color-usage/

Brand identity

Primer Blue (accent) #0969daANCHOR
Canvas default (light) #ffffffIMPLEMENTATION
Canvas default (dark) #0d1117IMPLEMENTATION
Border default #d0d7deIMPLEMENTATION

Themvora interpretation

light primary#0969da
dark primary#0969da
surface#eff0f1
borderring

Pinned: primary = #0969da. Everything else is generated.

Accessibility normalization

Anchor preserved exactly. The published value already satisfied the contrast contract, so the solver left it untouched.

9/9 semantic checks passed.

Primer is the strongest available source: it is already a token system (base → functional → component) with inverted light/dark neutral scales, which maps onto Themvora's architecture almost directly.
Its surface levels, borders and hover states are implementation-specific, so Themvora derives its own rather than freezing Primer's.

Vercel

official-design-systemhttps://vercel.com/geist/colors

Brand identity

Brand black #000000ANCHOR
Brand white #ffffffANCHOR
Background 1 (light) #ffffffIMPLEMENTATION
Background 2 (light) #fafafaIMPLEMENTATION
Gray 400 — default border #ebebebIMPLEMENTATION
Gray 1000 — primary text #171717IMPLEMENTATION

Themvora interpretation

light primary#000000
dark primary#ffffff
surface#f5f5f5
borderring

Pinned: primary = #000000. Everything else is generated.

Accessibility normalization

Anchor preserved exactly. The published value already satisfied the contrast contract, so the solver left it untouched.

9/9 semantic checks passed.

Geist publishes ten scales of ten steps, each step with a documented usage: default/hover/active background, default/hover/active border, high-contrast background, secondary and primary text.
Its gray scale is pure neutral — zero saturation at every step — which is the actual character of the Vercel look. The preset uses the `minimal` style to reproduce that zero-chroma neutral scale.
The scale steps are implementation-specific: they are Vercel's chosen lightness ladder, and Themvora derives its own rather than freezing ten values.

Slack

official-guidelineshttps://slack.com/brand-guidelines

Brand identity

Aubergine #4a154bANCHOR
Slack Blue #36c5f0ANCHOR
Slack Green #2eb67dANCHOR
Slack Yellow #ecb22eANCHOR
Slack Red #e01e5aANCHOR

Themvora interpretation

light primary#4a154b
dark primary#4a154b
surface#f1f0f1
borderring

Pinned: primary = #4a154b. Everything else is generated.

Accessibility normalization

Anchor preserved exactly. The published value already satisfied the contrast contract, so the solver left it untouched.

9/9 semantic checks passed.

Slack publishes brand colours but not a public design-token system, so only the palette is used as reference.
Slack's brand terms prohibit copying or imitating the distinctive look and feel of Slack products and sites, including their colour combinations and stylization. The preset is therefore brand-inspired: aubergine anchors the identity, and the surface system, borders and status colours are Themvora's own.
The four accent brand colours are recorded as reference but map to no Themvora role — the status roles are seed-independent by design.

Discord

official-guidelineshttps://discord.com/branding

Brand identity

Blurple #5865f2ANCHOR
Light Blurple #e0e3ffANCHOR
Discord Black #000000ANCHOR
Discord White #ffffffANCHOR

Themvora interpretation

light primary#5865f2
dark primary#5865f2
surface#f0f0f1
borderring

Pinned: primary = #5865f2. Everything else is generated.

Accessibility normalization

Anchor preserved exactly. The published value already satisfied the contrast contract, so the solver left it untouched.

9/9 semantic checks passed.

Blurple is pinned exactly rather than approximated: semantic-v2 would otherwise invent a similar purple, and the point of a brand preset is that it is the brand's own colour.
Discord publishes a brand palette but no public token system, so the semantic roles around the anchor are Themvora's.
Light Blurple and the brand neutrals are recorded as identity reference; Themvora has no role for a brand tint, and the neutral scale is generated.

Compare & use

Preview a brand palette against the same interface used on the Default page. “Show changes from Default” isolates which tokens differ.

Preview theme

Apple · light

Account settings

Manage how your workspace looks and behaves.

✓ 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 { getBrandPresets } from "@themvora/core";

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

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

All presets (no filtering)

src/App.tsx

TSX / JSX

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

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

export function App() {
  return (
    <ThemeProvider themes={themes} defaultTheme="apple-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.37:1≥4.5
popoverForeground/popover15.80:1≥4.5
primaryForeground/primary4.67:1≥4.5
secondaryForeground/secondary12.00:1≥4.5
mutedForeground/muted4.75:1≥4.5
accentForeground/accent4.84:1≥4.5
destructiveForeground/destructive6.46:1≥4.5
successForeground/success5.49:1≥4.5

UI boundariesPASS›

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

Focus indicatorsPASS›

ring/background3.62:1≥3
ring/card3.92:1≥3
ring/popover3.79:1≥3
ring/muted3.31:1≥3
ring/secondary3.19:1≥3

Resolved CSS variables

For apple-light — the preset you are previewing. 22 variables.

apple-light.css

css

:root {
  --theme-color-background: #eff0f1;
  --theme-color-foreground: #1a1b1c;
  --theme-color-muted: #e5e6e7;
  --theme-color-mutedForeground: #636465;
  --theme-color-card: #f8f9fb;
  --theme-color-cardForeground: #1a1b1c;
  --theme-color-popover: #f4f5f6;
  --theme-color-popoverForeground: #1a1b1c;
  --theme-color-primary: #007aff;
  --theme-color-primaryForeground: #111213;
  --theme-color-secondary: #e1e2e4;
  --theme-color-secondaryForeground: #232425;
  --theme-color-accent: #836eed;
  --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: #0078fb;
  --theme-radius-lg: 14px;
}