Presets and color methods

Choose coordinated defaults and a color-generation strategy without losing exact brand action colors.

Use presets as product starting points

minimal: balanced general-purpose defaults.
glass: translucent structural surfaces and blur.
enterprise: restrained depth for product dashboards.
editorial: stronger typography-led hierarchy.
dense: compact controls and spacing.
mobile: touch-oriented sizing and density.
monochrome: strict neutral structure with exact action anchors.

Apply product-specific values in the same config. Explicit nested values always override their preset counterparts.

Choose how colors become structure

analogous builds tonal primary, secondary, and neutral ramps and uses shade-driven surfaces.
monochromatic uses strict white and black canvases with neutral structure while preserving exact configured action colors.
glass emits translucent surfaces, borders, and backdrop-filter values while retaining solid action colors.

fixShade controls how the source color is placed in the interior ramp. It defaults to true so related primary and secondary colors align around a common center.

Use exported color utilities in tooling

The public package includes normalization, conversion, ramp, luminance, readable-text, and contrast helpers. These are useful for inspectors and custom token tooling that must explain how a theme result was produced.

tsimport {
  contrastRatio,
  generateColorRamp,
  normalizeHex,
  readContrastColor
} from "@tavojs/ui-core";

const primary = normalizeHex("#7C5CFF");
const ramp = generateColorRamp(primary, "analogous", true);
const text = readContrastColor(primary);
const ratio = contrastRatio(text, primary);