Turn your website into design tokens your agents can use.

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.md

Read from your website

acme.comfrom your website
Colors
TypefacesInter
Corners8px
Shadowssoft
Voiceplain, warm

Ready for your agents

DESIGN.mdread by 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.

Onefold only suggests what it can see on the page. Anything it can’t read stays open for you to decide.

Your brand is already live. It just isn’t written down.

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.

One file, the decisions agents need.

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.

02

Type, shape and depth

Your typefaces, corners and shadows, plus your dark theme, component library and icon set when the site shows them.

03

A voice to start from

A suggested voice read from your site’s copy, so agents write like your product instead of a template.

Built for the way agents read a project.

  1. 1

    Paste your website address.

    Onefold reads your public site and fills in the draft. Free, and no account needed.

  2. 2

    Keep or change each value.

    Every step shows what came from your site on a live preview. Keep it, adjust it or choose something else.

  3. 3

    Export for code and agents.

    Download a DESIGN.md, CSS variables and a Tailwind theme that use the same token names, and put them next to your code.

Start from what your website already says.

Enter your address and have a DESIGN.md draft in minutes. No website yet? One brand color is enough to start.
Start free