---
name: Refero
description: "A prime example of a modern, premium SaaS gallery UI, effectively balancing high-density information with an elegant, uncluttered aesthetic."
version: alpha

colors:
  background: "#F7F8FB"
  primary: "#000000"
  secondary: "rgba(2,18,73,0.38)"
  neutral: "#9FA5BA"
  bg-soft: "#EEF0F6"
  bg-quiet: "#FFFFFF"
  muted-soft: "rgba(247,248,251,1.0)"
  line: "rgba(2,18,73,0.38)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.45px"
  label:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 500
    letterSpacing: "-0.32px"

rounded:
  sm: 6px
  md: 8px
  lg: 20px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A curated design library and search engine for product screens, flows, and patterns.

*A polished, airy design archive serving as a smart research assistant.*

## Colors

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

- **Background (`#F7F8FB`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`rgba(2,18,73,0.38)`)** — uses `ink-soft` token
- **Muted (`#9FA5BA`)** — uses `muted` token
- **Borders (`rgba(2,18,73,0.38)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Generous whitespace defines the layout, creating a breathable, gallery-like rhythm.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 6px
- `md`: 8px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** Pill-shaped primary buttons with solid black backgrounds and white text; secondary buttons with soft gray backgrounds.
- **card:** Light gray containers with soft shadows, often displaying UI assets or floating grid elements.
- **chip:** Small, rounded pill tags for categorizing UI elements and page types.
- **input:** Clean search bars with rounded corners and subtle gray borders.
- **hero:** Large, centered text area surrounded by floating, colorful UI asset previews.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```