Documentation

Getting Started

This guide walks you through creating your first design system, from signing up to publishing your first versioned release. By the end, you'll have a live token endpoint and a typed component package ready to install in any app.

1. Sign up & onboarding

Go to studio.reframeui.app and sign in with Google or GitHub. On first login you'll be asked two questions:

  • •Team or multiple design systems? Team gives you one production design system with unlimited preview branches. If you need more than one isolated design system (for multiple clients, brands, or products), you can add design system workspaces at $50/month each. Editor seats are shared across all of them. You can add workspaces at any time from billing settings.
  • •Name your design system. This becomes the npm package name (e.g., @acme/design-system).

After onboarding, Team accounts land directly on the Tokens editor. Accounts with multiple design systems see the workspace list first. Select one to enter that design system.

2. Create your first color token

In the Tokens tab, click the + button to add a new token:

  1. 1.Name it color.primary.500
  2. 2.Set the type to Color
  3. 3.Pick a value in the color picker (e.g., a deep blue)
  4. 4.Click Save

The token is now available as a CSS variable --ds-color-primary-500 on your live token endpoint.

2b. Create a semantic alias

Raw token values like color.primary.500 are base tokens that hold the actual hex value. You can (and should) create semantic tokens that alias them. In the Tokens tab, add a new token named color.interactive.default and set its value to {{color.primary.500}}.

Now your components reference the semantic name rather than the raw value. If you ever rebrand your primary color, you update one base token and every component that uses the semantic alias updates automatically. Nothing else to touch. The generated CSS makes both layers available:

Generated tokens.csscss
/* Generated CSS: both tokens available as variables */
--ds-color-primary-500: #2563eb;
--ds-color-interactive-default: var(--ds-color-primary-500);

3. Edit the Button component

Switch to the Components tab and select Button. In the style panel:

  1. 1.Find the Background property
  2. 2.Change it to {{color.primary.500}}
  3. 3.The live preview updates immediately

All components reference tokens by name. When you change a token value, every component that references it updates automatically.

4. Preview with the live endpoint

Every design system has a live token endpoint, a hosted CSS file with all your variables. You can use it in any prototype or static site immediately, without publishing:

index.htmlhtml
<!-- Add to <head> to use your tokens in any HTML page -->
<link
  rel="stylesheet"
  href="https://cdn.reframeui.app/acme/design-system/preview/tokens.css"
/>

<!-- Now use CSS variables in your styles -->
<style>
  .my-button {
    background: var(--ds-color-primary-500);
  }
</style>

Or import it in CSS:

styles.csscss
@import "https://cdn.reframeui.app/acme/design-system/preview/tokens.css";

.my-button {
  background: var(--ds-color-primary-500);
}

5. Publish your first version

When you're happy with your tokens and components, merge to main. This triggers:

  • •Your live token endpoint updates immediately. Every app linking the CDN URL gets the new values instantly
  • •A new versioned npm package is published automatically at 1.0.0, with no manual release step

Install your design system in any project:

Terminalbash
npm install @acme/design-system

Then import the CSS and components:

app/layout.tsxtsx
import '@acme/design-system/css';
import { Button, Badge } from '@acme/design-system/react';

Next steps

Now that you've published your first version, learn about the core concepts that power ReframeUI.

Key Concepts →