CURATED · OPEN · FREE

Refero

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

designgallery

↓ Download design system (8 MB)Open in OpenDesign

Visit: https://refero.design

📦 Browse pack contents →

Identity DNA

design researchcurationAI agentreference libraryhuman-centric

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

Color

#000000Ink

rgba(2,18,73,0.38)Ink soft

#F7F8FBBG

#EEF0F6BG soft

#FFFFFFBG quiet

#9FA5BAMuted

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

Typography

transitional-serif · humanist-sans

display80px · 400
body20px · 400
label16px · 500

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.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 6px

md · 8px

lg · 20px

pill · 999px

1px solid rgba(2,18,73,0.38)

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

200mssmall

300msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth transitions on hover states (box-shadow, opacity, border-radius) · Floating or scaling animations for decorative UI assets in the hero section.

Subtle elevation changes via box-shadow and opacity adjustments. · Immediate response with scale or color changes.

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.

Voice & Don'ts

Tone Professional, helpful, and authoritative yet approachable.
Headlines Direct, action-oriented statements emphasizing human and AI collaboration.
CTAs Clear, action-oriented labels like 'Start Exploring' or 'Log In or Sign Up'.

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.
Avoid: Jargon-heavy descriptions
Avoid: Salesy or overly promotional language
Avoid: Aggressive call-to-actions

Inside the pack — real screenshots

Refero — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko