# Refero · Design system migration spec

> Source: https://refero.design  ·  Curated by OpenDesign  ·  en

> A prime example of a modern, premium SaaS gallery UI, effectively balancing high-density information with an elegant, uncluttered aesthetic.

## 1. Identity DNA

Refero functions as a polished, airy design archive, a reference library that operates with the quiet authority of a curated museum. Its system is built to serve both the human researcher and the AI agent, balancing elegant aesthetics with functional clarity. This is a space where curation meets computation, designed to feel less like a tool and more like a trusted assistant.

**One-liner:** A curated design library and search engine for product screens, flows, and patterns.
**Keywords:** design research · curation · AI agent · reference library · human-centric
**Analogy:** A polished, airy design archive serving as a smart research assistant.

## 2. Color

The palette is defined by a strict separation: a light, cool-gray field provides the canvas, while deep black typography commands absolute attention. Color itself is a reserved resource, appearing only as the vibrant, multi-chromatic accents of the floating UI assets under study.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F8FB` | main background |
| `--bg-soft` | `#EEF0F6` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `rgba(2,18,73,0.38)` | secondary text |
| `--muted` | `#9FA5BA` | placeholder |
| `--muted-soft` | `rgba(247,248,251,1.0)` | weak hint |
| `--line` | `rgba(2,18,73,0.38)` | divider |

**Color principle:** High-contrast black typography on light, airy cool-gray backgrounds, with a multi-chromatic palette only in floating UI assets.

The principle is clear: the system's own interface recedes, allowing the curated content to be the sole source of chromatic energy.

## 3. Typography

The typographic voice is a dialogue between tradition and modernity, pairing a transitional serif for authoritative display with a clean humanist sans-serif for body and UI. This combination establishes a tone that is both elegant and approachable, relying on a medium-weight baseline for a contemporary, readable feel.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -1px | Main hero headline and page titles. |
| body | 20px | 1.4 | 400 | -0.45px | Subheadings and introductory paragraph text. |
| label | 16px | 1.5 | 500 | -0.32px | Body text, navigation items, tags, and UI labels. |

**Type rules:**
- Display type uses a transitional serif for elegant, authoritative headings.
- Body and UI text use a clean humanist sans-serif.
- Typography relies heavily on weight 500 for a modern, medium-weight feel.

## 4. Spacing

Generous whitespace is the primary structural element, establishing a breathable, gallery-like rhythm that defines the layout's premium character.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace defines the layout, creating a breathable, gallery-like rhythm.

## 5. Surfaces

Depth is communicated through a hierarchy of soft, cool-toned shadows and subtle borders, creating layers without visual weight. Surfaces feel like floating panes of glass over the airy background, never heavy or enclosing.

- **Radius:** sm 6px · md 8px · lg 20px · pill 999px
- **Shadows:**
  - 0px 0px 0px 2px #F7F8FB inset
  - 0px 0px 0px 2px rgba(45, 49, 63, 0.2)
  - 0px 1px 3px 0px rgba(12, 41, 126, 0.09)
  - 0px 3px 8px 0px rgba(12, 41, 126, 0.09)
  - 0px 8px 16px 0px rgba(12, 41, 126, 0.07)
- **Borders:** 1px solid rgba(2,18,73,0.38)

## 6. Layout

The skeleton is a fluid, centered container that breathes within generous margins. Its clean grid structure provides a flexible framework for displaying dense information without sacrificing clarity.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Fluid, centered container with generous margins and a clean, airy grid structure.

## 7. Motion & Interaction

Motion philosophy favors subtlety and purpose, employing smooth transitions to signal interactivity rather than to decorate. Animations are functional cues, like gentle elevation changes on hover or the floating of decorative assets, applied over a consistent 0.2s duration.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on hover states (box-shadow, opacity, border-radius)
  - Floating or scaling animations for decorative UI assets in the hero section.

- **Hover:** Subtle elevation changes via box-shadow and opacity adjustments.
- **Click:** Immediate response with scale or color changes.
- **Transition:** Smooth transitions applied via 'all' or specific properties (opacity, box-shadow) over 0.2s.
- **Keyboard:** Standard focus states with clear visual outlines.

## 8. Voice & Don'ts

The editorial voice is professional and helpful, delivering direct, action-oriented statements that frame human and AI collaboration. Language avoids jargon and promotion, opting instead for clear, authoritative guidance.

- **Tone:** Professional, helpful, and authoritative yet approachable.
- **Headline style:** Direct, action-oriented statements emphasizing human and AI collaboration.
- **CTA style:** Clear, action-oriented labels like 'Start Exploring' or 'Log In or Sign Up'.
- **Avoid:** Jargon-heavy descriptions / Salesy or overly promotional language / Aggressive call-to-actions

### Don'ts
- ❌ don't use flat, sans-serif headlines — screenshot shows elegant, high-contrast transitional-serif display type.
- ❌ don't use a single, monochromatic brand color palette — screenshot shows a multi-chromatic array of floating colorful UI assets.
- ❌ don't use heavy, dark containers or dark mode by default — screenshot shows a predominantly white and light gray airy background.
- ❌ don't use sharp, 4px corners on all elements — screenshot shows a mix of 8px, 20px, and fully rounded pill shapes.
- ❌ don't use dense, cluttered layouts — screenshot shows generous whitespace and a breathable gallery structure.
- ❌ don't use harsh, bright accent colors for primary buttons — screenshot shows solid black pill buttons.

By design, the system deliberately refuses dense containers, dark modes, and aggressive accents, committing instead to an open, high-contrast, and breathable visual language.

## System Prompt (paste into AI tool)

```
Refero is a design research tool and gallery providing curated product screens, flows, and patterns for both humans and AI. The design is characterized by a light, airy color palette with soft cool-grays (#F7F8FB, #EEF0F6), deep black (#000000) typography, and a diverse range of colorful accents only present in floating UI asset previews. Typography pairs a classic transitional-serif for display with a modern humanist-sans for body text. Critical design rules include: prioritize generous whitespace and a breathable layout; never use heavy, dense containers; ensure high contrast between the black text and light backgrounds. The interface relies on subtle elevation changes and smooth, micro-interactions for a polished, premium feel.
```
