One shared language.

Primitives become purpose. Purpose becomes interface. Every layer has a name.

antiflex color roles

Neutral is the default theme: white and gray surfaces, charcoal actions in light mode, and light actions in dark mode. Links, selection, and focus use the same neutral scale. Success, warning, and error colors communicate feedback.

:root {
  --af-semantic-action: var(--af-color-neutral-900);
  --af-component-button-bg: var(--af-semantic-action);
}

[data-theme="dark"] {
  --af-semantic-action: var(--af-color-neutral-200);
}

Typography

Spacing

A four-pixel base keeps compact layouts consistent. Use semantic composition and component spacing rather than scattered values.

Shape and motion

Controls and panels use square corners with no radius. The small, medium, and large radius aliases all resolve to 0px; thin straight borders create structure. Feedback transitions use 120ms; general transitions use 200ms. Reduced motion removes decorative animation.

Change the source, once.

packages/tokens/src/tokens.json is the token source. Run pnpm tokens:build to regenerate CSS variables and Tailwind mappings. The Figma generation scripts consume this same source.

Themes

<html data-theme="light">...</html>
<html data-theme="dark">...</html>

The site honors a saved choice, otherwise the operating system preference. Theme selection persists locally.