DocsBack to homepage

Start Here

  • Getting Started
  • Key Concepts

Design Tokens

  • Token Types
  • Token Modes
  • Token Enforcement
  • Deprecated Tokens
  • Quality and Accessibility

Components

  • Component Builder
  • Composition Rules

Publishing

  • Publishing
  • Docs Mode
  • Changelog Notifications
  • Notifications and Alerts

Integrations

CLI & Data

  • CLI Reference
  • CLI Configuration
  • Import Formats
  • Importing Tokens
  • Export Formats

Tooling

  • Studio AI Assistant
  • Figma Plugin
  • API Reference
  • Webhooks

Account & Billing

  • Audit Log
  • Security and Access
  • Account Security
  • Pricing and Payments

Build, publish, and manage your design system.

ReframeUI is a design system platform for brand guardians, platform engineers, and agencies. Define your tokens once. Every app, every platform, every client stays in sync automatically. No manual updates. No drift. No "did you update your version?"

How it works

  1. Step 1

    Define tokens

    Set your brand's colors, spacing, and typography in the visual editor. Every component references these values. Change a token, every component updates.

  2. Step 2

    Compose components

    Configure components from composable blocks: slots, variants, layout, behavior. Build what your brand needs, not what a preset allows.

  3. Step 3

    Publish instantly

    Merge to main: live endpoint updates immediately, versioned npm package publishes automatically. Every app consuming your design system reflects the change. No manual sync, no redeploy, no coordination.

Browse the docs

Getting Started →Getting Started →

Set up your first design system in under 10 minutes.

Key Concepts →Key Concepts →

Tokens, modes, branching, versioning. Understand how it all fits together.

Component Builder →Component Builder →

Build components from composable atoms on an infinite canvas. Bind design token slots to every property, define variants and states, and publish a fully documented component API.

Quality and Accessibility →Quality and Accessibility →

Studio checks token completeness, naming, and WCAG 2.1 AA compliance on every save. Scores and issues appear inline where you are working.

Integrations →Integrations →

Typed components for React, Vue, and Angular. CDN Web Components for any HTML page. One design system, every platform your apps target.

CLI Reference →CLI Reference →

reframe login, reframe dev, reframe publish. All commands documented.

Figma Plugin →Figma Plugin →

Designers always work from real token values, not a snapshot from last month. Two-way sync keeps Studio and Figma in lockstep.

Pricing and Payments →Pricing and Payments →

How editor seats, consumer seats, branches, and additional design system workspaces are priced and what each unlocks.