What it is
Refero Styles is a Beta gallery of 2,000+ design-system references for product sites, written for artificial intelligence (AI) agents to read. Each page gathers colors, typography, spacing, components, prompt guidance, and a DESIGN.md-like account of a brand. It sits inside Refero, a larger product-design reference platform with 142,000+ web and iOS screens and 12,000+ user flows, according to its pricing page.
The deliverable is richer than a raw token list. A style page records observed values, turns them into roles and guidance, suggests prompts, and provides Cascading Style Sheets (CSS) custom properties. That is useful context, but the page itself says the result is normalized and interpreted.
First principles
A style reference built from a live site passes through three steps. Each one adds usefulness and moves further from the source.
- Measurement reads values off the rendered page: colors, font sizes, spacing. This is the step closest to the source.
- Normalization merges near-duplicates into a scale and assigns roles, such as naming one orange the accent. A rendered page does not label its own roles, so every role is a judgement.
- Interpretation writes prose, recommendations, prompts, and example markup. This is the most useful step for an agent and the furthest from the source.
A reader can only weigh a statement if they know which step produced it. Refero’s on-page caveat, quoted below, says exactly that, and it is the most important line on the page.
The second constraint is delivery. An agent works most easily with files and tool calls. A rendered page has to be fetched and parsed first, so the way an artifact is delivered decides how easily an agent can use it.
Who is behind it
Refero was founded by product designer Mike Bespalov. Product Hunt lists Stepan Smirnov and Denis Demidov among the team. The research found mike@refero.design for enterprise contact and support@refero.design for business and Model Context Protocol (MCP) partnerships. A claim that Refero has 350K+ users is UNVERIFIED. Search-indexed company details, such as a 2022 founding and 2 to 10 employees, are also UNVERIFIED from a primary source.
The useful primary evidence is the working product: a public style gallery, a paid reference library, an MCP integration, a skill repository, and a Figma plugin.
Format and how an agent consumes it
A Brex reference page shows the file-like format directly:
# Brex — Style Reference
> White concrete, single ember — a clinical financial instrument where one orange spark does all the talking.
**Theme:** light
Source measurements are normalized; roles and recommendations are interpreted.
Font summary lists are independent, not paired by position. HTML examples are
reconstructions, not source components.The page then has token tables and prose. Its color section looks like this:
## Tokens — Colors
| Name | Value | Token | Role |
|---|---|---|---|
| Ember | `#ff5900` | `--color-ember` | Orange supporting accent for decorative details... |
| Abyss | `#000710` | `--color-abyss` | Footer background, deepest dark surface... |It includes typography weights and sizes, named components, Do’s and Don’ts, prompt examples, and CSS variables. An agent can read a page directly, use the paid Refero MCP to search screens and flows in natural language, or install the Refero Skill:
npx skills add https://github.com/referodesign/refero_skillThe MCP setup lists ChatGPT/Codex, Claude Code, Cursor, Antigravity, Lovable, Manus, and other tools. It requires a Pro subscription and a browser authorization flow. The gallery can be browsed without the MCP search layer.
Pricing and access
At the September 23, 2026 research date, Refero’s pricing page listed Free at $0/month with access to roughly 3% of the collection; Pro at $10/month billed annually, $120/year; and Team at $12/seat/month billed annually, $140/year per seat. Pro included the full library, weekly screens, Figma plugin, Refero MCP, and Refero Skill. Students get 40% off Pro, and Enterprise is custom.
There is an unresolved conflict. The MCP page showed what appeared to be the same Pro plan at $45 quarterly, with different library-size figures. Whether this was an A/B test, a stale cache, or a different product tier is UNVERIFIED. It should not be reduced to one confident price without rechecking.
What works
The pages are unusually complete. They pair token values with intended roles, component behavior, Do’s and Don’ts, example prompts, and CSS. The on-page caveat about normalization and reconstruction is strong practice. It tells users not to treat a generated analysis as a source component.
Refero also supports the three practical paths: browser context, a skill, and programmatic search through MCP. “Similar Brands” links add useful comparative context instead of presenting every page in isolation.
What does not
The valuable search and agent integration are paid. The public artifact is a rendered page, not a clearly versioned .md file that an agent can fetch directly. That adds friction for automated pipelines. The entries are explicitly interpreted approximations, so their fidelity to a live product is not guaranteed.
The two pricing presentations conflict. Until they are rechecked, the free tier’s share of the library and the paid size figures are product claims, not durable facts.
What we take from it
Velofy could propose an entry format that combines concrete prompts, tokens, components, and clear labels for what was measured and what was inferred. It could propose versioned artifacts an agent can fetch directly, instead of scraping a rendered page. It could also label every inference by method and confidence.
Those are future proposals. Velofy has not shipped a Refero-like catalog, agent skill, npm package, or MCP server. The lesson is narrower: a generated spec earns more trust when it says what was measured, what was normalized, and what was inferred.