Tokens

Source#

tokens/
├─ primitives/
│  ├─ color.json        6 brand ramps + synthesized neutral, 0–1000
│  ├─ dimension.json    spacing, radius, border width
│  ├─ typography.json   Material-3 scale, Montserrat
│  ├─ motion.json       duration + easing (cubicBezier)
│  ├─ opacity.json      hidden/disabled/muted/visible scale
│  ├─ interaction.json  target size, focus ring, press, drag threshold
│  └─ z-index.json      base/raised/docked/focus/sticky/overlay scale
└─ semantic/
   ├─ color.light.json  aliases → semantic contract
   ├─ color.dark.json   synthesized
   └─ typography.json    composite text styles

All DTCG format ($value / $type), extracted from Figma variables.

Build#

pnpm build:tokens   # node style-dictionary/build.mjs

Style Dictionary v4 runs once per theme because two files defining the same token path would collide in a single run. The light pass emits every platform; the dark pass emits the web globals.dark.css and the native semantic theme files that a KinetixTheme needs real dark values for — Theme.dark.kt (Compose), KinetixColorsSwiftUI.dark.swift (SwiftUI) and kinetix_color_scheme.dark.dart (Flutter).

Output#

The KinetixColorsSwiftUI / KinetixColorScheme pairs are additive — the older Theme.swift / app_theme.dart outputs (light-only, colliding class names) are untouched. See SwiftUI and Flutter for why.

Motion + scale#

duration, easing, opacity, and z-index are theme-independent, like typography — defined once, the same in light and dark. Each platform's output groups them into KinetixDuration / KinetixEasing / KinetixOpacity / KinetixZIndex (native — which also get the spatial scale as KinetixSpacing and KinetixRadius, see Foundations) or --duration-* / --easing-* / --opacity-* / --z-index-* custom properties (web), and packages/ui's tailwind.config.ts wires the web ones into real Tailwind utilities — duration-fast, ease-standard, opacity-disabled, z-overlay — used directly in component source instead of the ad hoc duration-200 / z-50 literals components used to carry. A handful of pre-existing values that don't cleanly match a token step (e.g. a couple of opacity-40/opacity-60 icon dimmings) are left as literals with a comment, rather than silently changed to the nearest token.

Newly defined, not yet consumed by components: duration.instant (100ms) and the easing.enter, easing.exit and easing.emphasized curves (standard decelerate / accelerate / expressive), plus the larger spacing steps (spacing.10–spacing.32, 40–128) and radius.xxl (24). They are part of the contract and generated for every platform, but no component reads them yet and there are no Tailwind utilities for the new curves — adopting them is incremental, component by component.

Interaction tokens#

Behavioral values, not visual ones — how big a target has to be, how far a focus ring sits, how a press or a drag reads. Theme-independent, like motion:

Web-only in this slice — none of the native platform ports (ui-compose, ui-swiftui, ui-flutter) consume interaction.* yet.

Semantic contract#

The values every component actually resolves to, in both themes:

Deviations from raw Figma#

The build fixes the Primay typo, rounds letterSpacing float artifacts, and synthesizes what Figma lacks (--card, --popover, --ring, the neutral ramp, the dark theme, radius.lg, spacing.7). Each is documented in TOKENS.md with its rationale.