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
app.uiforma.comSaved locally
The real UIForma Colors workspace with its palette editor and live component preview

01 / One connected workspace

Watch one interface
become many.

The same interface responds as its system changes. Color, spacing, shape, type, elevation, and modes move together because they come from the same source.

01

COLOR SYSTEMS

Move the palette. Keep the relationships.

Generate perceptual scales from one seed and map them to semantic roles. Watch every action, surface, focus ring, and state update together.

02

SPACING + DENSITY

Give the interface a different rhythm.

Shift the spacing scale, control height, container padding, and component gaps without manually nudging every element.

03

SHAPE + SCALE

Change the character, not the structure.

Tune radii, borders, button geometry, type scale, and responsive sizing while the interface stays coherent.

04

ELEVATION + MOTION

Dial depth from quiet to expressive.

Grow and soften shadows, lift interactive surfaces, and coordinate motion timings from a shared elevation language.

05

MODES + VARIANTS

Change context without rebuilding.

Compare light, dark, density, responsive, and brand modes against the same live component surface before exporting.

UIForma / Foundations Tokens linked
UNIFIED DESIGN SYSTEM GENERATORSaved
STARTCOLORSTHEMES + VARIANTSBUILDFOUNDATIONSSTYLECOMPONENTS
OUTPUT PREVIEW / DESKTOP
LIGHT   DARK
KM
WORKSPACE OVERVIEW
Good afternoon,
Kevin.

Here’s what’s happening across your product workspace.

Active projects24↑ 12% this month
Open tasks12818 due this week
Team members163 recently joined
Project details

Native controls and nested patterns respond to the active system.

PRIMARY #4F46E5SPACE 16RADIUS 6SHADOW 02

UNIFIED DESIGN SYSTEM GENERATOR
UNDOREDOSaved
START
BUILD
STYLE
VALIDATE + EXPORT
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 ↗