UIForma Open the builder ↗

A workbench for design-system decisions

Build the rules.
See the system.

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.

Start building ↗ Take the product tour ↓
  • Local-first
  • No account required
  • Portable project files

01 / One connected workspace

Scroll through the system,
not a slideshow.

Every screen below is a simplified view of a real UIForma workflow. As the decisions change, the product frame changes with them.

01

FOUNDATIONS

Generate a palette from a seed.

Build perceptual color scales, then tune typography, spacing, grids, radii, borders, elevation, overlays, and motion.

02

SEMANTIC ROLES

Turn values into decisions.

Assign light and dark roles for surfaces, text, borders, actions, and states. UIForma flags contrast problems and suggests readable tones.

03

COMPONENTS + RECIPES

Test the system in context.

Configure shared geometry and interaction behavior, then inspect token-driven recipes across states like hover, focus, disabled, and error.

04

MODES + VARIANTS

Compare more than light and dark.

Create color modes, density modes, responsive modes, and brand variants. Compare them side by side before committing.

05

VALIDATE + EXPORT

Handoff what you actually previewed.

Export the same configuration as CSS, W3C tokens, Tokens Studio, Figma variables, Style Dictionary, Swift, or Android resources.

UIForma / Foundations Saved locally
FOUNDATIONS / COLOR

Primary palette

SEED COLORCobalt#4F46E5
CONTRAST7.18:1AAA
COLOR SPACEOKLCHPerceptual
STEPS1050—950
SEMANTIC ROLES / LIGHT

Make color mean something

Surface / canvasneutral.50PASS
Action / primaryprimary.600PASS
Text / warningwarning.400FIX
Text / defaultneutral.950PASS
!
Warning text misses AA contrast

Try warning.700 for a 5.34:1 ratio.

RECIPES / BUTTON

Primary action

DefaultOutlineGhost
DEFAULT
HOVER
FOCUS
DISABLED
height 44pxradius 8pxgap 8pxtarget PASS
MODES / COMPARE

One system, multiple contexts

LightDarkHigh contrastDim
LIGHT / STANDARD
Welcome back

Your workspace is ready.

DARK / COMFORTABLE
Welcome back

Your workspace is ready.

EXPORT / PRODUCTION

Choose your handoff

"color": {
  "action": {
    "primary": { "$value": "{color.primary.600}" }
  }
}
✓Ready to export96 semantic aliases · Light + Dark

LIVE PRODUCT STORYScroll or select a step

02 / The workflow

Explore freely.
Keep the output honest.

01

Decide

Build from a seed or import an existing DTCG or Tokens Studio project. Every edit updates one versioned configuration.

02

Stress-test

Preview themes and recipes, audit contrast and focus appearance, and compare named snapshots before restoring them.

03

Move it forward

Share a compressed project URL, download a portable UIForma file, generate documentation, or export implementation formats.

03 / Interoperable by default

Your system shouldn’t end at the mockup.

CSS Custom PropertiesW3C Design TokensTokens StudioFigma VariablesStyle DictionarySwiftAndroid XMLGenerated Docs

Runs in your browser. Saves locally.

Make the hidden system
visible.

Open UIForma and start shaping a design system you can inspect, test, carry, and ship.

Open the builder ↗