01
Colors with a job
Your brand color, grays and status colors as full scales, with roles like action, border and muted text instead of a flat list of hex values.
Paste your URL and Onefold extracts your brand colors, typefaces, corners, shadows and tone from the live site. You get a DESIGN.md draft, CSS variables and a Tailwind theme, and every value stays yours to change.
Create your DESIGN.mdRead from your website
Ready for your agents
## Color
color-action #6d4aff Primary buttons
color-danger #dc2626 Errors
## Voice and tone
We sound warm, plain and encouraging.
## Avoid generic AI-generated UI
No decorative gradients or em dashes.
Most products already have a design system in practice: a brand color on every button, a typeface, a corner radius that repeats. It lives in your CSS, and nobody wrote it down. Copying hex values out of dev tools gets you a list of colors, not which one is for buttons, which gray is for borders or how the product sounds.
Onefold reads which color carries your actions, which grays hold text and borders, how round your corners are, how deep your shadows go and whether you have a dark theme. It turns that into named design tokens with the reasoning attached, so an agent knows where each value belongs.
01
Your brand color, grays and status colors as full scales, with roles like action, border and muted text instead of a flat list of hex values.
02
Your typefaces, corners and shadows, plus your dark theme, component library and icon set when the site shows them.
03
A suggested voice read from your site’s copy, so agents write like your product instead of a template.
Onefold reads your public site and fills in the draft. Free, and no account needed.
Every step shows what came from your site on a live preview. Keep it, adjust it or choose something else.
Download a DESIGN.md, CSS variables and a Tailwind theme that use the same token names, and put them next to your code.