Stop prompting your website designs from scratch. Hand your agent a DESIGN.md.
styles.refero.design publishes 2,000+ AI-readable design systems from real product sites: the colors, the
type, the spacing, the components, as one file your coding agent reads. Pick the one that fits your project, drop it in,
tell the agent to build against it.
2,000+ design systemsCursor · Claude Code · Codex · v0 · LovableBetafree to browse, 6 Sep 2026
Use the DESIGN.md in this folder as the style guide. Match its colors, type scale, spacing, radii and components exactly. Do not invent new ones.
02 / 06HOW TO USE IT
Four steps, the same ones the reel shows
No install. A browser, a file, and the agent you already use.
01 / 04Search the brand you wantType a company into the search box, or browse the style chips (Minimal Design, Clean SaaS, Editorial Type, Soft Gradients, Monochrome UI, Playful, High Contrast, Premium). The three from the reel, Tesla, Apple and Anthropic, are all on the site.styles.refero.design → search Anthropic
02 / 04Open the style, copy the fileEvery style page has a panel on the right with four tabs: DESIGN.md, Tailwind v4, CSS Variables, Design Tokens. Compact or Extended. A Copy button, a .md download, and a Connect via MCP button.DESIGN.md tab → Extended → Copy (or download .md)
03 / 04Drop it in your projectSave it as DESIGN.md in the project root, next to your CLAUDE.md or AGENTS.md, or paste the contents into your first prompt.project/DESIGN.md
04 / 04Tell the agent to build against itOne line in the prompt does it. The agent stops guessing what looks good and uses the values in the file.Use DESIGN.md as the style guide. Match its colors, type scale, spacing and components.
Which agents: the site's own line reads "a DESIGN.md you can use in Cursor, Claude Code, Codex, v0, or Lovable". The MCP option connects Refero to Cursor, Claude, Windsurf and other AI coding tools, so the agent can search the library itself instead of you pasting a file.
03 / 06WHAT IS INSIDE ONE FILE
The Anthropic file, section by section
The reel scrolls through this exact file. Every value below is read off the Extended DESIGN.md on the site, not typed from memory.
Tokens, ColorsA name, a hex value, a CSS variable and the role of each colour. Slate Dark #141413 for text and headings, Ivory Medium #f0eee6 for the page canvas, Clay #d97757 for the one chromatic CTA, Clay Deep #c6613f for its hover, plus the ivory, cloud, stone, oat and manilla neutrals.
Tokens, TypographyAnthropic Serif for the editorial voice (substitutes Georgia, Source Serif Pro, Charter; weights 400 and 600; sizes 14, 18, 20, 24, 68; line heights 1.10, 1.40, 1.43) and Anthropic Sans for the UI chrome.
LayoutPage max-width 1280px, section gap 80 to 120px, card padding 24 to 32px, element gap 8px.
Border radiusNav 0, cards 24px, links 0, badges 0, buttons 8px bottom-only on filled variants and 12px outlined.
ComponentsEach button and card written out: the Filled Ivory Button (#faf9f5, text #141413, bottom-only radius 8px), the Outlined Dark Button (transparent, white text, 1px border #87867f, 12px radius), the Clay Filled Button (#d97757, white text, 8px radius, the single chromatic CTA).
REAL PAGEstyles.refero.design, Styles / Anthropic, captured 6 September 2026. The left half is the site preview and the one-paragraph read ("scientific field journal on warm parchment"), the right half is the file: the colour table, then typography.
04 / 06THE THREE FROM THE REEL
Tesla, Apple, Anthropic. All three are real entries.
Searched on the site the day the reel was written. Each one opens to the same four-tab panel.
REAL PAGEStyles / Tesla. "Automotive Showroom on Screen." Starkly achromatic, one electric Tesla Blue (#3e6ae1) reserved for the primary call to action, Universal Sans for the type. All of it in the file on the right.REAL PAGEApple, as it appears in the grid. Every card is a site preview plus the brand mark; the file sits one click in.REAL PAGEThe homepage, 6 September 2026. The 2,000+ line, the list of agents it works in, the search, the style chips, and the Beta tag above the title.
05 / 06THE HONEST BITS
What the reel could not fit
It is in Beta and publishes no pricing. The reel says "completely free to use right now". On 6 September 2026 the site has no pricing page, no free label and no paywall; you can open any style and copy the file. If that changes, this page changes with it. The page is the truth, not the reel.
The file describes the brand's site, it is not the brand's official design system. Refero's own wording is "AI-readable design systems from leading product websites". It is what the site looks like, written down for an agent. That is exactly what you want for a starting point; it is not a licence to use a brand's identity.
Copy the file, then constrain the prompt. Agents drift. "Match the tokens exactly, do not invent new colours or sizes" is the line that keeps the result on the file. The prompt at the top of this page is the one to paste.
Open styles.refero.design