FOUNDATIONS
Generate a palette from a seed.
Build perceptual color scales, then tune typography, spacing, grids, radii, borders, elevation, overlays, and motion.
A workbench for design-system decisions
Shape color, type, spacing, components, and modes in one browser-based workspace. UIForma keeps the preview, accessibility checks, and exported tokens connected to the same configuration.
01 / One connected workspace
Every screen below is a simplified view of a real UIForma workflow. As the decisions change, the product frame changes with them.
FOUNDATIONS
Build perceptual color scales, then tune typography, spacing, grids, radii, borders, elevation, overlays, and motion.
SEMANTIC ROLES
Assign light and dark roles for surfaces, text, borders, actions, and states. UIForma flags contrast problems and suggests readable tones.
COMPONENTS + RECIPES
Configure shared geometry and interaction behavior, then inspect token-driven recipes across states like hover, focus, disabled, and error.
MODES + VARIANTS
Create color modes, density modes, responsive modes, and brand variants. Compare them side by side before committing.
VALIDATE + EXPORT
Export the same configuration as CSS, W3C tokens, Tokens Studio, Figma variables, Style Dictionary, Swift, or Android resources.
#4F46E5
neutral.50PASS
primary.600PASS
warning.400FIX
neutral.950PASS
Try warning.700 for a 5.34:1 ratio.
Your workspace is ready.
Your workspace is ready.
"color": {
"action": {
"primary": { "$value": "{color.primary.600}" }
}
}
LIVE PRODUCT STORYScroll or select a step
02 / The workflow
Build from a seed or import an existing DTCG or Tokens Studio project. Every edit updates one versioned configuration.
Preview themes and recipes, audit contrast and focus appearance, and compare named snapshots before restoring them.
Share a compressed project URL, download a portable UIForma file, generate documentation, or export implementation formats.
03 / Interoperable by default
Runs in your browser. Saves locally.
Open UIForma and start shaping a design system you can inspect, test, carry, and ship.
Open the builder ↗