---
title: "Refero — MCP for AI Agents design system"
variant: extended
source: https://refero.design/mcp
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/refero-design-mcp)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Refero — MCP for AI Agents · Design System

> Quiet editorial clarity for design-aware AI tools

**Theme:** light · **Industry:** ai · **Source:** https://refero.design/mcp · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Refero’s MCP landing page pairs a restrained black-and-white interface with an expressive serif hero and practical product demonstrations. A persistent side rail anchors the page while generous whitespace gives way to feature cards, installation instructions, pricing, and a compact brand-signoff footer.

## North star

Keep the shell monochrome and spacious; let the serif hero and real product-interface examples provide the visual character.

## Overview

The page uses Gallery White (#ffffff) as its dominant canvas, keeping the interface bright and unhurried. Near-black (#13151b) anchors the selected navigation item, primary actions, and compact brand details; pure black (#000000) carries the most prominent text. Two muted text colours distinguish softer supporting copy from stronger secondary reading, while Pale Line (#eef0f6) and muted borders keep controls and content regions defined without heavy boxes. Typography creates the key contrast: a distinctive, regular-weight serif headline sits above compact sans-serif body copy and bold utility labels. A fixed-feeling vertical rail organizes navigation beside a broad central content column. Sections alternate open editorial text with softly tinted feature panels and product-interface imagery. The product demonstrations supply most of the page’s colour, so keep the surrounding UI neutral. Whitespace and subtle hairlines, rather than saturated backgrounds or dramatic shadows, establish hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and open section background. |
| Soft Slate | `#777d90` | `--color-soft-slate` | neutral | Muted supporting copy, footer text, and secondary links. |
| Pale Line | `#eef0f6` | `--color-pale-line` | neutral | Hairline borders separating quiet controls and interface details. |
| Deep Slate | `#525769` | `--color-deep-slate` | neutral | Darker muted text for secondary explanatory content. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Primary headings and prominent text; also appears in product content. |
| Cloud Lilac | `#c2c6d7` | `--color-cloud-lilac` | neutral | Subtle outlined control border, notably around the account action. |
| Night Graphite | `#13151b` | `--color-night-graphite` | brand | Dark navigation selection, primary CTA, badge outline, and compact UI text. |
| Mist Panel | `#f7f8fb` | `--color-mist-panel` | surface | Subtle pale backing and text-area tint; secondary to the white canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#777d90` (Soft Slate) · `--color-text-subtle` → `#525769` (Deep Slate) · `--color-border` → `#eef0f6` (Pale Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#777d90` | `#ffffff` | 4.1:1 | AA-large |
| `#525769` | `#ffffff` | 7.18:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Base-Variable | `--font-body` | webfont | 500, 600 | Navigation, body copy, controls, section headings, and most interface text. | Inter |
| Title | `--font-display` | webfont | 400 | Large hero headline and expressive display text. | DM Serif Display |
| monospace | `--font-mono` | system | 500 | Installation commands and code-like snippets. | Roboto Mono |

- **Base-Variable:** Measured weights 500 and 600; compact negative tracking, with stronger weight for utility actions.
- **Title:** Regular weight; use an editorial serif contrast against the clean sans-serif interface.
- **monospace:** Medium weight; reserve for short technical strings rather than general copy.

### Type scale — Perfect Fourth (ratio ≈ 1.33, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 50px | 400 | 1.2 | -0.02em | — | Title | Centered hero headline introducing the MCP product. |
| h2 | 40px | 500 | 1.2 | -0.03em | — | Base-Variable | Major explanatory, installation, and pricing section headings. |
| h3 | 25px | 500 | 1.28 | -0.025em | — | Base-Variable | Feature-card and secondary content headings. |
| h4 | 20px | 600 | 1.4 | -0.022em | — | Base-Variable | Compact subheadings within instructions and supporting content. |
| body | 16px | 500 | 1.5 | -0.02em | — | Base-Variable | Explanatory paragraphs, descriptions, and navigation copy. |
| caption | 14px | 500 | 1.43 | -0.02em | — | Base-Variable | Small labels, supporting notes, and compact metadata. |
| button | 16px | 500 | 1.5 | -0.02em | — | Base-Variable | Navigation actions and primary or secondary CTA labels. |
| link | 16px | 500 | 1.5 | -0.02em | — | Base-Variable | Inline references and navigational text links. |
| code | 15px | 500 | 1.6 | -0.021em | — | monospace | Install command snippets and technical instructions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 22, 23, 24, 32, 48, 53, 57, 59, 96 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width —.

A slim vertical navigation rail sits left of a broad central content area, with a search-like bar and filter chips near the top. The hero is centered, while later editorial sections use a narrower reading column and feature content expands into paired cards. The measured page is comfortably spaced, with recurring section gaps and open white intervals. Keep content alignment deliberate: centered for the hero and mostly left-aligned for informational sections. Avoid inventing a fixed maximum width; preserve the screenshot’s generous side margins and responsive breathing room.

## Shape & elevation

- Radius: button `12px` · media `32px` · badge `4px` · link `12px` · xs `8px` · sm `12px` · md `24px` · lg `64px` · pill `9999px`
- Shadow `sm` (button, other): `rgba(12, 41, 126, 0.09) 0px 1px 3px 0px, rgba(12, 41, 126, 0.03) 0px 0px 1px 0.4px`
- Shadow `hairline` (media): `rgba(12, 41, 126, 0.07) 0px 0px 0px 2px`
- Shadow `inset` (text): `rgba(55, 80, 155, 0.04) 0px 0px 0px 1px inset`
- Shadow `inset-2` (other): `rgba(12, 41, 126, 0.07) 0px 0px 0px 1px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is predominantly flat: white canvas, subtle section panels, and thin pale borders do most of the separating. Controls may use a very restrained cool-tinted shadow, and media can carry a faint outline or inset edge. Keep layering quiet; reserve the near-black fill for selected navigation and key CTA emphasis.

## Imagery

Use product-interface demonstrations rather than generic lifestyle photography. The top media area presents a restrained, mostly white interface preview; later feature cards show design canvases, app examples, and AI research output. Some preview imagery is colorful and dense, but that colour belongs to product illustrations, not the surrounding brand palette. Frame previews in soft pale panels with rounded media corners and minimal decoration.

## Components

### Side navigation

Vertical icon-and-label rail; selected New research action uses #13151b with white text, while other links remain quiet.

### Hero

Centered product label, large regular serif headline, muted explanatory copy, and a dark rounded How to install CTA.

### Search and filters

Pale, rounded search field with prompt text and adjacent compact chips for research mode and app categories.

### Feature cards

Paired pale panels combine interface imagery with concise headings and supporting copy; imagery carries any strong colour.

### Installation timeline

Sequential setup steps use concise labels, small explanatory text, and compact action controls.

### Pricing panel

Soft-tinted wide panel pairs a plan-benefit list with billing selection, price display, and a dark sign-in CTA.

### Outlined controls

Secondary account action and small status badge use quiet outlines, restrained radii, and near-black text.

### Measured component styles

- **Primary button** (“New research”): background #13151b · text #ffffff · radius 12px · padding 0px 12px · 600 16px Base-Variable
- **Secondary button** (“Log In/Sign Up”): transparent background · text #13151b · border 1px solid #c2c6d7 · radius 12px · padding 0px 12px · 500 16px Base-Variable · shadow rgba(12, 41, 126, 0.09) 0px 1px 3px 0px, rgba(12, 41, 126, 0.03) 0px 0px 1px 0.4
- **Link** (“Web apps”): transparent background · text #13151b · radius 12px · padding 0px 12px · 500 16px Base-Variable
- **Input**: transparent background · text #000000 · radius 0px · padding 0px 0px 0px 14px · 500 20px Base-Variable
- **Badge** (“Beta”): transparent background · text #13151b · border 1px solid #13151b · radius 4px · padding 0px 6px · 500 12px Base-Variable

## Do

- Keep the overall canvas white and the interface monochrome.
- Use the editorial serif only for display moments.
- Maintain clear contrast between hero headings and muted supporting copy.
- Give informational sections generous whitespace.
- Use pale borders instead of heavy card outlines.
- Let product screenshots carry their own illustrative colour.

## Don't

- Do not introduce a bright brand accent that is absent from the measured palette.
- Do not turn every section into a boxed card.
- Do not use heavy shadows or dramatic gradients.
- Do not set all headings in the display serif.
- Do not let colorful mockups dictate the page chrome.
- Do not crowd the hero or informational reading column.

## Agent prompt

Build a new Refero-style AI product page with a white Gallery White (#ffffff) canvas and a restrained, editorial interface. Anchor navigation in a narrow left rail; keep the main content broad, centered for the hero and comfortably narrow for long-form sections. Use a regular serif display face for the main headline, Base-Variable-style sans-serif for navigation, body, and controls, and monospace only for technical snippets. Set primary actions in Night Graphite (#13151b) with white labels. Use Soft Slate (#777d90) and Deep Slate (#525769) for supporting text, Pale Line (#eef0f6) for subtle separators, and Mist Panel (#f7f8fb) for quiet surfaces. Keep borders and shadows faint. Show authentic interface previews in softly framed panels; their internal colours must not become new page-brand accents. Preserve generous whitespace and crisp hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Persistent left navigation beside a broad centered hero, followed by open content sections and paired feature panels. | Side-rail navigation, Hero CTA to installation, Search and category filters, Sequential setup instructions | Serif display headline, Near-black primary actions, Muted explanatory copy, Soft product-preview panels, Pale hairline separators |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/refero-design-mcp