Start from your ideas
Images, swatches, fonts, words, guided options or your Figma file. Mark anything "avoid" to say what you do not want.
What RONA will do in the first release, and what is on our roadmap.
Six things that turn your taste into a system you can ship.
Images, swatches, fonts, words, guided options or your Figma file. Mark anything "avoid" to say what you do not want.
8 categories of design tokens, light and dark mode, and automatic contrast checks.
Compare color schemes, font pairs and spacing options. Keep the values you love.
A live preview on components and sample pages: landing page, dashboard and article.
Every value shows where it came from: your image, your words, your options or your edit.
One switch adds gradients, glass, grain and playful motion.
Start from what you already have: images, colors, fonts and words.
Pan and zoom. Add, move and resize images, swatches, notes, fonts and option chips.
Pick a color from an image on the board.
A short text that describes your style, for example "Warm, muted palette. Soft corners."
Ask AI to read an image in more detail. RONA will tell you before it sends the image.
No moodboard? Pick style, vibe, theme, emotion, density, corners, mode and brand color.
Paste a Figma link. Styles from Figma come in locked.
8 token categories, built from one style profile.
Palettes from color theory and classic color combinations. 11-step scales. Light and dark mode.
Curated open-license font pairs. A fluid type scale for mobile and desktop.
A scale from your density. Touch targets of 44 px or more on mobile.
Corners, borders and sizes. Durations and easing. Reduced-motion settings always win.
Flat, gradient, glass or textured surfaces. Shadow levels in your palette.
Tone for errors, success and empty states. Words to use and words to avoid.
Keep control of every value.
3 to 5 color schemes, and the top 3 font pairs and spacing options.
Browse classic color combinations, sorted by how close they are to your colors.
Make one section again. Locked values stay.
Unlock one value, one section or all. Go back to the generated value at any time.
For all edits in a session.
One switch adds gradients, glass, grain and playful motion.
See each choice on real layouts before you export.
Buttons, inputs, cards, badges, modals, navigation and more.
A landing page, a dashboard and an article.
Light, dark and side by side, at mobile, tablet and desktop width.
Contrast, reduced motion and reduced transparency, in the preview.
One zip with the parts you select.
DTCG JSON files for base, light, dark, effects and density modes.
Static HTML, CSS and JS. Open it in a browser. No build step.
A DESIGN.md file for your team, with a part for AI coding tools. It follows the open DESIGN.md format.
One HTML page with live samples, and a guide to each font and its license.
Download your full project as a file. Needs a free account.
Your work stays yours.
Sign in with a free account to save your projects and open them on any device. With no account, you keep one draft in your browser.
Small models read your images in the browser. A language model runs only for some tasks.
Edit, preview and export with no account. Generation from your board is a premium feature.
The editor targets WCAG 2.2 AA, with keyboard control and a screen reader list view.
The font picker shows open-license fonts. An unknown license gets a warning.
Opt-in only, with a consent screen. You can delete a shared board later.
Later, not in the first release. We are working toward these.
On our roadmap Vote for the next previewSee your brand on a store home page, product page and cart.
See your brand on title, content and chart slides.
A full brand manual with logo rules, print rules and brand applications.
See your brand on feed posts, stories and banners.
See your brand on stationery and merchandise.
See your brand in a short animated intro.
See your brand on a full marketing website, not only a sample landing page.
Export tokens for Tailwind, SCSS or Figma variables.
Share a project with a link.
The waitlist for RONA opens soon.