Foundations tokens

Umia DS design tokens exported from the Umia Foundations Figma file.

Pages

ColorsSemantic roles first, then the primitive ramps they alias. Light and dark are the resolved values.AaTypographyFont families, sizes, weights, leading and tracking, then the composed text styles.SpacingTailwind spacing multiplies one unit, --spacing (4px). p-3 is 3 × 4px.Radius and sizeCorner radii, control heights, icon and avatar sizes.ElevationShadows from Figma effect styles, plus blur, opacity, border-width and focus tokens.LayoutBreakpoints, layout metrics, motion and stacking. Layout tokens change by breakpoint.

Gotchas

1. Umia DS sets every token on :root; .dark (or [data-theme="dark"]) on <html> switches to the dark values, and [data-umia-direction="color-blind"] swaps positive and negative.
2. Apps that merge classes with cn() (tailwind-merge) must add textStyleUtilities from @umia/design/text-styles to the font-size group (extendTailwindMerge({ extend: { theme: { text: [...] } } })), or cn("text-heading-md text-muted-foreground") drops text-heading-md. The hub does this in web/hub/lib/utils.ts.
3. shadow-<color> modifiers do not recolour Umia DS shadows.