What it is
Refero Styles is a curated library of design systems extracted from real websites and packaged as structured DESIGN.md files. Each entry breaks down a site's visual language into colors, typography, spacing, motion, and component patterns - all formatted as Markdown that AI coding agents can consume directly.
Search by brand name, mood (minimal, editorial, playful, high contrast), color, typography, or URL. Open any style and you get the full design token breakdown plus a DESIGN.md file ready to paste into your project context.
How it works
- Search or browse for a design reference (Apple, Linear, Cursor, ElevenLabs, etc.)
- Open the style card to see extracted colors, type hierarchy, spacing, and components
- Copy the DESIGN.md - a single Markdown file with structured design tokens
- Paste it into your AI agent's context (Cursor, Claude Code, Windsurf, Lovable, Bolt)
The agent now has precise visual constraints instead of vague prompts like "make it look clean."
Refero MCP
Refero also offers an MCP server at refero.design/mcp that gives AI coding agents access to thousands of real product screens and full user flows. The agent can search and study actual implementations before generating UI code.
Why it's useful
The gap between "design this page" and "design this page like Linear's dashboard" is massive when working with AI coding tools. Refero Styles bridges that gap by providing structured, machine-readable design references. Instead of describing a visual style in natural language (which AI interprets loosely), you hand it exact tokens.
Good for rapid prototyping where the visual bar is higher than default Tailwind. Also useful as a research tool - browse how top products handle dark mode, spacing systems, or component patterns.