Foundations

Theming.

One foundation. Your own character.

Appearance, accent, and radius belong to the theme. Components consume semantic tokens so the whole interface changes together.

Build your theme in the playground

A theme is a set of relationships.

Surfaces, text, borders, and actions work together.

bg

surface

text

text-muted

border

accent

accent-soft

danger

Theme scope

Nested themes inherit settings unless explicitly overridden. Dialog portals reapply the nearest theme’s settings and inline token overrides. Keep a Theme around your application so its controls share the same contract.

<Theme appearance="light" accentColor="purple" neutralColor="neutral" radius="md" density="default" motion="system" dir="ltr">
  <Button>Start something</Button>
</Theme>

Three layers of meaning

01Palette--dixy-color-purple-9

02Semantic role--dixy-color-background-action-primary

03Component--dixy-button-primary-background

A component references a role. A theme maps that role to a palette. Change the mapping once and the interface stays coherent.

Theme API

Generated from the local ThemeProps interface. Native div props and inline style overrides are forwarded.

Prop	Type / description	Default
`skin`	`SkinDefinition \| null` Optional independently imported skin. Undefined inherits; null clears.	`—`
`ornamentRenderer`	`SkinOrnamentRenderer \| null` Optional code-rendered artwork from a separately imported skin entry. Null clears.	`—`
`animateOrnaments`	`boolean` Opt in to decorative skin animation; motion/effects reductions still win.	`false`
`ornament`	`OrnamentLevel` Decorative detail, separate from readable content.	`balanced`
`relief`	`SkinRelief` Surface relief; zero keeps borders and removes decorative depth.	`1`
`material`	`"matte" \| "glossy" \| "soft" \| "metal" \| "paper"` Default finish for supported controls and Box. Import materials.css.	`matte`
`effects`	`EffectsPreference` Optional rendering policy. Ancestor reduction always wins.	`static`
`shape`	`"rounded" \| "pill" \| "square"` Semantic geometry for supported controls and Box; no clipping.	`rounded`
`personality`	`"restrained" \| "playful" \| "tactile"` Coordinated finish, geometry and response. Explicit props override the preset.	`—`
`density`	`"compact" \| "default" \| "comfortable"` Semantic spacing density; control heights stay fixed.	`default`
`motion`	`MotionPreference` Respect the OS preference or reduce all Dixy motion. Reduction is inherited.	`system`
`appearance`	`"light" \| "dark"` The color appearance. Nested themes inherit unspecified settings.	`light`
`neutralColor`	`"neutral" \| "slate" \| "gray" \| "zinc" \| "stone" \| "taupe" \| "mauve" \| "mist" \| "olive" \| "sage" \| "sand"` Base neutral family for surfaces, readable text and neutral actions.	`neutral`
`accentColor`	`"ruby" \| "neutral" \| "slate" \| "gray" \| "zinc" \| "stone" \| "taupe" \| "mauve" \| "mist" \| "olive" \| "sage" \| "sand" \| "tomato" \| "red" \| "crimson" \| "rose" \| "pink" \| "fuchsia" \| "plum" \| ... 20 more ...` The brand accent; feedback roles stay independent.	`blue`
`radius`	`"none" \| "sm" \| "md" \| "lg" \| "full"` Contextual control/card/overlay rounding; full keeps panels rectangular.	`md`