> ## Documentation Index
> Fetch the complete documentation index at: https://doc.refero.design/llms.txt
> Use this file to discover all available pages before exploring further.

# Data Model

> What's inside styles, screens, and flows

Refero MCP returns structured design research data. The exact fields can grow over time, but these are the core shapes to expect.

## Styles

A style is a semantic design reference extracted from a real web marketing or product page. Use styles for visual direction before choosing screen-level patterns.

Search results include:

* **`uuid`** — style UUID used with `refero_get_style`
* **`title`** — source name, such as `Depot` or `Webflow`
* **`url`** — source website URL
* **`platform`** — usually `desktop`
* **`preview_url`** — preview image for the style
* **`description`** — rich summary of the visual language

Full style details may include:

* **`northStar`** — short visual thesis
* **`theme`** — light, dark, or mixed direction
* **`colors`** — named colors with roles and groups
* **`typography`** and **`typeScale`** — font families, roles, sizes, line-height, tracking
* **`spacing`** — density, base unit, radius, gaps, padding
* **`layout`** — composition and section rhythm
* **`elevation`** and **`elevationPhilosophy`** — how depth is created
* **`components`** — component treatments and sometimes HTML examples
* **`imagery`** — product screenshots, photography, illustration, graphics, or placeholder guidance
* **`dos`** and **`donts`** — rules to preserve the style's character
* **`customSections`** — implementation notes, prompt guidance, or extra style-specific material

<Note>Styles are guidance, not templates. Preserve token roles and media roles instead of copying the source wholesale.</Note>

## Screens

A screen is a single page or view from a real product. Screens are best for concrete UI decisions.

Search results and detail results can include:

* **`uuid`** — screen UUID used with `refero_get_screen`, `refero_get_similar_screens`, and `refero_get_screen_image`
* **`platform`** — `web` or `ios`
* **`thumbnail_url`** — small screenshot preview
* **`preview_url`** — larger preview URL, usually in detail results
* **`page_url`** — original page URL when available
* **`refero_url`** — link to the screen on Refero
* **`site`** — product metadata object
* **`page_types`** — page categories, such as `Dashboard`, `Settings`, or `Paywall & Subscription`
* **`ux_patterns`** — patterns used, such as `Billing & Plans`, `Empty State`, or `Dark Mode`
* **`ui_elements`** — visible UI elements, such as `Button`, `Table`, `Modal`, or `Switch & Toggle`
* **`fonts`** — detected or inferred fonts, often present in detail results
* **`hex_colors`** and **`colors`** — dominant colors, when available
* **`content.description`** — prose description of visual design and content
* **`content.layout`** — layout structure, when available
* **`content.functions`** — user actions and product behavior, when available
* **`flows`** — related flow references if the screen belongs to a captured flow

`site` usually looks like:

```json theme={null}
{
  "id": 400,
  "domain": "lu.ma",
  "name": "Luma",
  "description": "Luma is all you need to host a memorable event.",
  "refero_url": "https://refero.design/websites/400",
  "categories": ["Social Networking", "Entertainment"]
}
```

## Images

`refero_get_screen` returns text metadata. To inspect the actual screenshot, use `refero_get_screen_image` with the screen UUID.

Image sizes:

* **`thumbnail`** — useful for quick visual inspection
* **`full`** — useful when typography, fine spacing, or small UI details matter

## Similar screens

`refero_get_similar_screens` returns screens that are visually or functionally related to a screen UUID. Use it to expand from one strong reference into comparable examples.

The records use the same screen shape as search results: `uuid`, `site`, `thumbnail_url`, `page_types`, `ux_patterns`, `ui_elements`, `content.description`, and related fields.

## Flows

A flow is a multi-step user journey, such as onboarding, checkout, cancellation, account deletion, or password reset.

Flow search results include:

* **`id`** — numeric flow ID used with `refero_get_flow`
* **`platform`** — `web` or `ios`
* **`name`** — flow name
* **`screens_count`** — number of captured steps
* **`refero_url`** — link to the flow on Refero
* **`description`** — happy path, entry point, exit point, and assumptions
* **`problem`** — user goal and system responsibilities
* **`steps`** — compact list of step names
* **`site`** — product metadata object

Full flow details include:

* **`steps`** — array of detailed step objects
* **`related_queries`** — suggested searches for adjacent research

A detailed step can include:

```json theme={null}
{
  "name": "Account subscription overview",
  "screen_id": "76822c91-6db9-42f4-a1a4-b8f30f2a7ca7",
  "refero_url": "https://refero.design/pages/76822c91-...",
  "thumbnail_url": "https://images.refero.design/screenshots/...",
  "goal": "See current subscription status...",
  "action": "User reviews the subscription card...",
  "system_response": "Navigates to the subscription detail view...",
  "page_types": ["Settings"],
  "ux_patterns": ["Billing & Plans"],
  "ui_elements": ["Button", "Tabs", "Navigation Bar"],
  "fonts": ["Franklin Gothic", "Georgia"],
  "content": {
    "description": "Detailed screen description...",
    "layout": "Layout details...",
    "functions": "Available actions..."
  }
}
```

## Search vs detail

Search tools return compact records for scanning. Detail tools return deeper metadata and longer descriptions.

| Layer   | Search tool             | Detail tool         |
| ------- | ----------------------- | ------------------- |
| Styles  | `refero_search_styles`  | `refero_get_style`  |
| Screens | `refero_search_screens` | `refero_get_screen` |
| Flows   | `refero_search_flows`   | `refero_get_flow`   |

For screenshots and adjacent examples:

* use `refero_get_screen_image` for raw image content
* use `refero_get_similar_screens` for comparable screens

## Platform notes

* Screen and flow search use `platform: "web"` or `platform: "ios"`.
* Style search does not take a `platform` parameter. Style records usually describe desktop web pages.
* Screens use UUIDs. Flows use numeric IDs.

## Next

<Columns cols={2}>
  <Card title="Tools" icon="wrench" href="/mcp/tools">
    Current tools, parameters, and examples.
  </Card>

  <Card title="Examples" icon="code" href="/mcp/examples">
    Simple workflows showing how to combine styles, screens, and flows.
  </Card>
</Columns>