Introduction

The foundation is the single source of truth for design tokens: colors, spacing, radius, typography, elevation, plus the Aptos font. It ships as a package (@dtux/tokens) your apps install, and this site is its browsable reference. Figma is upstream; everything here is a faithful, regenerable projection of it.

Tokens are layered, and the layering is preserved — not flattened to hex. A component should consume the semantic layer, which references the primitive layer:

• Primitive — raw values (the Core Color ramps, the spacing scale). The bottom of every chain.
• Semantic — meaning-based tokens that alias a primitive, e.g. Background/accent/tinted/base/default → Accent/Light/Alpha/1.
• Component — per-component sizing/state tokens (list, form, button…).

Because aliases are kept, the generated CSS is also referential — --appearance-background-primary: var(--core-color-gray-neutral-light-white) — so switching a theme cascades automatically.

Each Figma collection maps its modes to a CSS mechanism:

• Light / Dark → :root / .dark
• Gray theme → [data-gray="zinc|slate|stone|midnight"]
• Accent theme → [data-accent="brand|purple|teal|hive|yellow"]
• Size / Radius / Viewport → [data-size] / [data-radius] / [data-viewport]

See Installation to add it to a project, or Documents for the machine-readable endpoints and the Figma refresh flow. Browse any collection in the sidebar to inspect its tokens.