Skip to content
Domphy

Palette

Visual reference for all color families in the built-in light theme.

Each family is a sequential 18-step ramp built with Chromametry, guaranteeing WCAG 4.5 contrast (K = 9). Hover a swatch to see its CSS variable name.

CSS Variables

Colors are exposed as CSS custom properties scoped to [data-theme]:

--{family}-{step}
  • step 0 is always white (lightest)
  • step 17 is always black (darkest)
  • step 8–9 is near the mid-range — the base accent zone

Example:

background-color: var(--primary-9);
color: var(--primary-0);

Color Families

FamilyDescription
neutraldefault family for surfaces, text, and boundaries
primarymain accent for selected state and focus emphasis
secondaryalternate accent when primary would clash
infoinformational state and non-critical notices
successpositive state, confirmed action, completed status
warningcaution state, non-destructive attention UI
attentionheightened caution, stronger than warning
errorinvalid input, error state, failure feedback
dangerdestructive actions such as delete or remove
highlightmarked content and featured emphasis

Dark Theme

The built-in dark theme is auto-generated from light by reversing each ramp:

LightDark
step 0 (lightest)becomes step 17 (darkest)
step 9 (accent)becomes equivalent dark accent
step 17 (darkest)becomes step 0 (lightest)

The dark theme is generated automatically by reversing the color array. You never need separate color values for dark mode — the same --{family}-{step} variables work in both themes, and the theme layer handles the inversion automatically.

For custom themes and the full setup, see Setup.

Custom Palette

Register a theme with setTheme() to replace any color family or add entirely new ramps. Custom ramps should follow the 18-step model.

You don't have to hand-pick the 16 intermediate steps yourself — generateTheme builds the whole ThemeInput from one base hex per role, using @domphy/palette's WCAG-optimized generateRamp (see generateRamp):

import { generateTheme, setTheme, themeApply } from "@domphy/theme"

setTheme("brand", generateTheme({
  primary: "#4a7ff4",
  secondary: "#d8597d",
  neutral: "#8d8d8d",
}))

themeApply()

baseTones is filled in automatically — the step closest (CIEDE2000) to the hex you passed in.

To assemble a ramp by hand instead, pass the 18 hex strings directly:

import { setTheme, themeApply } from "@domphy/theme"

setTheme("brand", {
  colors: {
    primary: [
      "#ffffff",
      // ... 16 intermediate steps ...
      "#000000",
    ],
  },
  baseTones: {
    primary: 9,
  },
})

themeApply()

See Setup → Register A Custom Theme for the full example.