Join the waitlist
Design system generator · Coming soon

Your taste, made exact.

Drop your images, colors, fonts and ideas on one board. RONA will turn them into a complete design system and brand guideline you can adjust, preview and export.

Waitlist opens soon.

No account to startFree editor
Light and dark modeBoth, from one board
Contrast checksWCAG AA before export
DESIGN.md guidelineFollows the open DESIGN.md format
[01]The problem

A moodboard shows a feeling. Your product needs exact values.

Hex codes, color scales, font pairs, type sizes, spacing, contrast checks, tokens, docs. It is slow, repetitive work, and many founders do not have a designer to do it.

[02]How it works

One board in. One system out.

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

Each step in detail

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
[03]Features

Everything your brand needs. None of the busywork.

Start from your ideas

Images, swatches, fonts, words, guided options or your Figma file. Mark anything "avoid" to say what you do not want.

A complete system, built for you

8 categories of design tokens, light and dark mode, and automatic contrast checks.

Compare and lock

Compare color schemes, font pairs and spacing options. Keep the values you love.

See every choice live

A live preview on components and sample pages: landing page, dashboard and article.

Know why

Every value shows where it came from: your image, your words, your options or your edit.

Normal or Expressive

One switch adds gradients, glass, grain and playful motion.

See all features

[04]Who it is for

Made for the person with the idea.

Founders and product owners

Get a consistent brand from your own ideas. No design team needed.

Board → brand system

Designers

Skip the scales and tokens. Keep your taste and full control.

Advanced view · every token

Developers

Get tokens, CSS and rules your AI coding tool can follow.

DTCG · CSS · DESIGN.md
[05]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
[06]On our roadmap

Next: see your brand everywhere.

We are working toward previews of your brand on more design types.

Ecommerce stores
Pitch decks
Brand manuals
Social posts
Product mockups
Bumper videos

Roadmap items are not part of the first release.

See the roadmap
[07]Privacy and trust

Your ideas stay yours.

No account to start

No sign-up to start. Sign in for free to save your projects and open them on any device.

AI when you ask

Rules and small models do most of the work. AI helps when you ask, and we tell you before an image goes to an AI model.

Contrast checked before export

Required text colors pass WCAG AA contrast before you can export.

Your designs, your choice

We never train on your saved projects. Only boards you choose to share go into training. Delete a project or your account at any time.

[08]FAQ

Short answers.

More questions about export, AI and privacy are on the FAQ page.

Read all questions
Do I need design skills?
No. You can start with images, words or a list of options. The app sets the values and checks contrast. Designers can use the Advanced view to edit each token.
I have no moodboard. Can I still use it?
Yes. Use the guided options: style, vibe, theme, emotion, density, corners, mode and brand color.
What do I get when I export?
One zip with design tokens (DTCG JSON), a ready HTML/CSS/JS codebase, a guideline file (DESIGN.md) and an HTML docs page.
Does it work with AI coding tools?
The guideline file (DESIGN.md) has a part for AI coding agents. It gives exact token names, class names and short rules.
Where is my data?
You can start with no account. Your work then stays as one draft in your browser. To save your projects and open them on any device, sign in with a free account: your projects and their images are saved on our server. We never use saved projects to train our models. You can also download a project file, and delete a project or your account at any time.
Coming soon

Your brand system starts with one board.

The waitlist for RONA opens soon.

Waitlist opens soon.