---
name: Refero Styles
slug: refero-styles
url: "https://dontmakeitugly.com/resources/refero-styles"
website: "https://styles.refero.design"
type: collection
categories:
  - agent-resources
  - design-systems
tags:
  - design-md
  - design-systems
  - mcp
  - colours
  - typography
  - spacing
  - real-products
  - cursor
  - claude-code
frameworks:
  - agnostic
pricing: freemium
agentFriendly: excellent
agentAccessMethods:
  - public_web
  - copy_paste
  - mcp
difficulty: any
dateAdded: "2026-09-03"
lastVerified: "2026-09-03"
---

# Refero Styles

DESIGN.md files extracted from 2,000+ real product websites, written for agents.

- Type: Collection
- Categories: Agent Resources, Design Systems
- Pricing: Freemium
- Works with: Framework agnostic

## What it is

Refero Styles is a browsable collection of design systems pulled from real product sites: Linear, Notion, Mercury, Duolingo, ElevenLabs and a couple of thousand more. Each entry breaks a site down into colours, typography, spacing and components, and gives you a DESIGN.md you can drop into Cursor, Claude Code, Codex, v0 or Lovable. It's in beta and sits alongside the Refero MCP, which lets an agent search Refero's screens and flows directly.

## Why it's here

This solves a specific problem well. "Make it feel like Linear" is a useless prompt; a DESIGN.md that says what Linear's type scale, radii and greys actually are is not. Treat the extracted systems as a starting point to edit into your own, not a licence to clone someone's brand.

## Best for

- a DESIGN.md to start from
- describing a real product's style precisely
- colour and type references

## Links

- Website: https://styles.refero.design

## Can my agent use this?

Yes. Open a style, copy the DESIGN.md into your project and tell your agent to follow it, editing the parts that shouldn't be a copy of the source brand. For deeper access, connect the Refero MCP through your Refero account and the agent can search styles, screens and user flows itself.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: Public website, Copy/paste, MCP.

## Prompt to hand your agent

```text
Use Refero Styles as a design and implementation reference for this project.

What it is: DESIGN.md files extracted from 2,000+ real product websites, written for agents.

Website: https://styles.refero.design

Use it specifically for:
- a DESIGN.md to start from
- describing a real product's style precisely
- colour and type references

How you can access it: Public website, Copy/paste, MCP.
Works with: Framework agnostic.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [TypeUI](https://dontmakeitugly.com/resources/typeui.md): Design skills, UI prompts and a shared design system, handed to your agent over MCP.
- [Web Interface Guidelines](https://dontmakeitugly.com/resources/vercel-web-interface-guidelines.md): A concise, agent-readable checklist of what a well-built web interface must get right.
- [tweakcn](https://dontmakeitugly.com/resources/tweakcn.md): A visual theme editor that makes a shadcn/ui app stop looking like every other shadcn/ui app.
- [getdesign.md](https://dontmakeitugly.com/resources/getdesign-md.md): A 550-strong catalogue of DESIGN.md files, following Google's spec.

## In collections

- [Best resources for designing with Claude Code](https://dontmakeitugly.com/collections/building-with-claude-code.md)
- [Give your agent a DESIGN.md](https://dontmakeitugly.com/collections/design-md-for-agents.md)

Refero Styles is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.