# Refero Styles

> AI-readable DESIGN.md style references extracted from popular websites.

Refero Styles is a browsable directory of over 2,000 design systems extracted from top product websites into machine-readable formats. Each style profile breaks down color tokens, typography scales, spacing, shadows, and component rules so AI coding assistants can generate consistent, polished UIs.

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

## What it is for

- Provide design context to AI coding tools like Cursor, Claude Code, and v0
- Export site color palettes and typography rules as Tailwind v4 or CSS variables
- Explore UI patterns, aesthetics, and design direction for new web projects

## Features

- Over 2,000 indexed website design systems and style profiles
- Exports in DESIGN.md, Design JSON, Tailwind v4, CSS Variables, and Design Tokens
- Detailed breakdown of color tokens, typography specs, spacing, and radius rules
- DO and DON'T style guidelines for consistent AI generation
- Integration support for AI workflows via Model Context Protocol (MCP)

## Pricing

Free to browse and export during beta.

## Details

- Type: Web app
- Category: [Design](https://xiry.app/topics/design.md)
- Topic: [Design Systems](https://xiry.app/topics/design/design-systems.md)
- Open source: no
- Platforms: Web
- For: Developers and designers using AI tools to build web interfaces.
- Alternative to: Open Design, designmd.me
- Tags: design md, design systems, ui inspiration, tailwind, ai coding, design tokens

## Why it was saved

- [@bbssppllvv, 30 April 2026](https://x.com/bbssppllvv/status/2049924037111841027): Solves 'agents make ugly UIs because they've never seen good design': paste a URL or search a style (Minimal Design, Clean SaaS, Monochrome UI, High Contrast, etc.) and get an extended style reference — color tokens with hex values, typography specs, spacing/radius/shadow tables, DO/DON'T guidelines — exportable as DESIGN.md, Design JSON, Tailwind v4, CSS Variables or Design Tokens, with copy/download buttons.
- [@askwhykartik, 4 September 2026](https://x.com/askwhykartik/status/2095761291801485316): DESIGN.md generation is a trending workflow for design-consistent AI coding; keeps all generator options in one place.

## Related

- [Awesome DESIGN.md](https://xiry.app/resources/awesome-design-md): Curated collection of plain-text design systems extracted from popular tech websites. (GitHub repo, Open source)
- [Minimal Product Design Cheatsheet](https://xiry.app/resources/minimal-product-design-cheatsheet): Quick typography, color palette, and iconography reference for clean product interfaces. (Tip, Free)
- [Modulor](https://xiry.app/resources/modulor): Open-source, token-driven design system and Figma UI kit by GR8 Tech. (Website, Open source)
- [Building Effective Agents: Workflow and Agent Patterns](https://xiry.app/resources/building-effective-agents-workflow-and-agent-patterns): Architectural framework categorizing LLM workflows and autonomous agent patterns (Framework, Free)
- [Checklist Design](https://xiry.app/resources/checklist-design): Curated UI and UX checklists for websites, apps, and user flows (Website, Free)
- [Clean UI Blueprint](https://xiry.app/resources/clean-ui-blueprint): A concise spec sheet of typography, colors, and radii for minimal UI (Tip, Free)

Updated 10 October 2026. Page: https://xiry.app/resources/refero-styles

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.