Color.

Change the brand accent above: Delete stays destructive, Approve stays positive, and feedback retains its own roles. Personalities are configurations of the same semantic system.

Twelve stops. More possibilities.

Explore cool, warm, and tinted neutrals, the full color family set, and transparent black/white overlays. Choose a family and inspect any stop.

Overlays that blend with the surface.

Black and white alpha scales have 12 stops from 5% to 95% opacity. Modal scrims use color.background.overlay; subtle, strong, and inverse roles cover quieter washes and white overlays. Contrast depends on the surface underneath.

Use meaning in your interface.

Choose a role for backgrounds, text, icons, borders, and interactions. Override semantic variables at the Theme boundary; component aliases and portaled dialogs resolve that local theme.

Pairs, states, and contrast.

Solid actions use a dedicated foreground shared across default, hover, and pressed backgrounds. Amber uses a dark foreground in light mode. Validation errors use danger text and border roles, independently of destructive actions.

• Normal text pairs are tested at 4.5:1; focus indicators and interactive boundaries at 3:1.
• Subtle borders are decorative separators, not the sole boundary of a control.
• Tertiary text keeps a readable foreground. Disabled text and icons are reserved for unavailable controls.
• Custom seeds reduce chroma to fit sRGB and reject unsafe action pairs. These checks do not establish whole-page accessibility.

import "@dixy-ui/react/styles.css";
import { Theme, Button } from "@dixy-ui/react";

export function App() {
  return (
    <Theme appearance="light" accentColor="purple" neutralColor="neutral" radius="md" density="default" motion="system" dir="ltr">
      <Button>Save changes</Button>
      <Button color="danger">Delete</Button>
      <Button color="success">Approve</Button>
    </Theme>
  );
}

Plain CSS or Tailwind v4.

The token package works without React or Tailwind. The optional Tailwind entry maps utilities to the same semantic variables with @theme inline.

@import "tailwindcss";
@import "@dixy-ui/tokens/tailwind.css";

/* Plain CSS: import @dixy-ui/tokens/color.css instead. */
.workspace {
  background: var(--dixy-color-background-canvas);
  color: var(--dixy-color-text-primary);
}

<div data-appearance="dark" data-accent="purple" data-neutral="stone">
  <button class="bg-dixy-action-primary text-dixy-on-action-primary hover:bg-dixy-action-primary-hover active:bg-dixy-action-primary-pressed">
    Save changes
  </button>
</div>

Make a custom brand.

import { createColorPalette, colorThemeVariables } from "@dixy-ui/tokens";
import { Theme } from "@dixy-ui/react";

const palette = createColorPalette([0.54, 0.18, 260]);

export function CustomTheme() {
  return (
    <Theme appearance="dark" style={colorThemeVariables(palette, "dark")}>
      Your interface
    </Theme>
  );
}

Blue is the default library accent. Purple is Dixy’s documentation identity. Choose the neutral base independently with neutralColor="stone", for example. Earlier --dixy-accent and surface variables remain read aliases; new customization should target semantic names.

Design references: Tailwind palette families, Radix scale roles, Atlassian semantics, Tailwind theme variables, and CSS Color 4.