Join the waitlist
How it works

One board in. One system out.

Collect your ideas, let RONA build the system, adjust it, then export it. This is the plan for the first release.

[01]The flow

Four steps, one flow.

Four steps, from your ideas to a design system you can use.

1Board6 items
Drop images, or import a Figma file
2Generate8 categories
primary
accent
success
colortypespacingshapemotionsurfaceelevationvoice
3Adjust3 schemes
A
B ✓
C
Corners0 px
Densityairy
primary.500 locked
font.display locked
Why this blue?From your image 1 and the note "calm".
4Preview and exportlanding.html
Brand
Hello, galaxyGet started
LightDark
MobileDesktop
Contrast checkAll required text pairs pass WCAG AA.
Export ziptokens · code · docs
01 / 04
[02]Each step in detail

What happens in each step.

Collect

Put everything that shows your taste on one board. No moodboard? Pick from guided options.

  • Images

    Add images with the file picker, paste, drag and drop, or your phone camera.

  • Your own words

    Write notes such as "warm, calm, like a notebook". RONA will read vibe words, color names and comparisons.

  • Guided options

    Pick a style, vibe, theme, emotion, density, corner shape, mode and brand color.

  • Emotions

    Pick up to 3 emotions. They will change the style and the copy tone.

  • Weight, pin and avoid

    Make an item larger to give it more weight. Pin a must-have. Mark an item "avoid".

  • Figma import

    Paste a Figma link to add its colors, text styles, radius and spacing to the board.

Generate

RONA will merge your board into one style profile, then build every value from it.

Premium, with sign-in

  • Color

    11-step scales, color roles, status colors, and light and dark mode.

  • Typography

    Open-license font pairs and a type scale that fits mobile and desktop.

  • Spacing and shape

    Compact, balanced or comfortable spacing. Corner radius, borders and sizes.

  • Motion, surface, elevation

    Durations and easing, surface styles, and shadow levels from your palette.

  • Copy voice

    Voice rules, tone for each situation, and words to use and avoid.

  • Contrast checks

    Each required text pair will pass WCAG AA. RONA adjusts the color until it passes.

Adjust

Compare options, move sliders and lock what you like. The preview updates at once.

  • Color schemes

    Compare 3 to 5 palettes. Filter by harmony, for example analogous or complementary.

  • Fonts and spacing

    Compare the top 3 font pairs and the top 3 spacing options.

  • Sliders

    Move 8 style sliders, for example calm to energetic, and 4 voice sliders.

  • Locks

    A value that you change is locked. A new result will not overwrite it.

  • Know why

    Each value shows its source: your image, your words, your options or your edit.

  • Simple or Advanced

    Use sliders and swatches, or edit token names and raw values.

Preview and export

See your system on real layouts. Then download one zip.

  • Live preview

    A component gallery, a landing page, a dashboard and an article.

  • Modes and widths

    Light, dark and side by side. Mobile, tablet and desktop widths.

  • Select the parts

    Select the parts you want with check boxes. The zip is made in your browser.

  • Checks before export

    Broken references and failed contrast pairs will stop the download until you fix them.

[03]Plans

What needs an account.

Free · No account

Edit and export

  • Use the board
  • Edit each value and token by hand
  • Live preview
  • One draft in your browser
  • Export
Free account · Sign-in

Save your projects

  • All the free tools
  • Save your projects on our server
  • Open them on any device
Premium · Sign-in

Generate from your board

  • Generate the full system from your board
  • Edit the style profile
  • AI features, with a usage limit

Prices and limits are not final. With a free account, you can save your projects and open them on any device.

[04]What you get

One export. Ready to use.

One zip, made in your browser. Select the parts you want.

  • Design tokens

    In the DTCG standard, for light, dark and 3 density modes.

  • Ready code

    HTML, CSS and JS that opens in any browser. No build step.

  • Brand guideline

    A guide for your team, and a part written for AI coding tools. It follows the open DESIGN.md format.

  • Docs page

    One HTML page with live samples of your system.

  • Font guide

    Each font, its license and how to add it.

your-brand-2026-10-10.zipsample
your-brand.zip
├─ README.md
├─ FONTS.md
├─ tokens/
│  ├─ tokens.base.json
│  ├─ tokens.light.json
│  ├─ tokens.dark.json
│  ├─ tokens.effects.json
│  ├─ tokens.compact.json
│  └─ tokens.comfortable.json
├─ code/
│  ├─ index.html
│  ├─ landing.html
│  ├─ dashboard.html
│  ├─ article.html
│  ├─ css/  5 files
│  ├─ js/   dsg.js
│  └─ snippets/  7 components
└─ docs/
   ├─ DESIGN.md
   └─ docs.html
// tokens/tokens.base.json
{
  "color": {
    "primary": {
      "500": {
        "$type": "color",
        "$value": "#7B93FF"
      }
    }
  },
  "radius": {
    "md": {
      "$type": "dimension",
      "$value": "0px"
    }
  }
}
Made in your browserContrast checked before exportNo font files included
Coming soon

Your brand system starts with one board.

The waitlist for RONA opens soon.

Waitlist opens soon.