Design tokens

Every visual value in Manti UI comes from the @manti-ui/tokens contract.

Three tiers

1. Primitives

Fixed color ramps and scale values for radius, control height, spacing, typography, elevation, and motion.

These values are generated into @manti-ui/styles. Contributors edit packages/tokens/src/index.ts, then run pnpm gen:tokens.

2. Semantic roles and variants

Purpose-based values such as:

--manti-bg
--manti-surface
--manti-border
--manti-text
--manti-text-muted
--manti-focus-ring
--variant-solid
--variant-soft-bg
--variant-ring

Use this tier for system-wide theming.

3. Component tokens

Public per-component overrides named --manti-{component}-{property}:

:root {
  --manti-button-radius: var(--manti-radius-full);
  --manti-switch-track-width: 3rem;
}

Use a component token only when that component should intentionally differ. Derived geometry stays private as --_*.

Scales

Radius: --manti-radius-xs through --manti-radius-2xl, plus full
Control height: --manti-control-height-sm | md | lg
Spacing: --manti-space-0 through --manti-space-16
Type: --manti-text-xs through --manti-text-5xl
Weight: --manti-weight-regular | medium | semibold | bold
Motion: --manti-duration-* and --manti-ease-*

--manti-radius-factor rescales the radius ramp. Use data-radius="none", "sharp", "default", "round", or "pill" for presets. none is the square mode; the other four are positive shape profiles.

Override scope

Custom properties can be changed globally or on a subtree:

.marketing {
  --manti-surface: var(--manti-surface-raised);
  --manti-radius-factor: 1.4;
}

See Theming with tokens for the decision guide and plain CSS for selector overrides.

Last updated 13 September 2026