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

# User Interviews · Design System

> Human research, drawn with warmth and clarity

**Theme:** light · **Industry:** saas · **Source:** https://www.userinterviews.com/ · **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._

A bright, illustration-led homepage introduces a platform for recruiting research participants. Elegant serif headlines, friendly line art, and restrained teal actions balance an approachable tone with a clear SaaS structure.

## North star

Use editorial serif messaging and expressive human illustrations on an airy white canvas, with teal reserved for clear actions.

## Overview

The page uses white as its dominant canvas, letting generous open space and black line-art illustrations establish a calm, approachable first impression. Teal is reserved for high-intent controls and small illustrative accents, while pale blue-green surfaces distinguish cards without creating heavy panels. A deep berry band marks the participant-focused callout; the closing footer shifts to a dark navy image treatment. Large P22 Mackinac serif headlines give the page an editorial voice, contrasted with Sofia Pro for navigation, body copy, and buttons. IBM Plex Mono appears in compact uppercase eyebrow labels. The hero centers its message between expansive hand-drawn scenes, while later content alternates broad sections, card groups, and proof points. Rounded pill CTAs, restrained hairlines, and mostly flat surfaces keep the interface light. Decorative illustration should remain supporting texture, not compete with the headline or conversion path.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas, navigation background, and contrast text on dark sections and teal buttons. |
| Research Ink | `#000000` | `--color-research-ink` | neutral | Primary navigation, headlines, body copy, and the dark strokes of hand-drawn illustrations. |
| Soft Jade | `#65b8a2` | `--color-soft-jade` | accent | Small links, highlights, and teal details; also appears in consent controls, so treat those as utility UI. |
| Slate Haze | `#808c9a` | `--color-slate-haze` | semantic | Measured gradient stop; not a defining flat brand color in the screenshots. |
| Mist Mint | `#f2f8f7` | `--color-mist-mint` | surface | Pale green-tinted feature-card surface within the recruiting and platform content. |
| Harbor Teal | `#1c5d5f` | `--color-harbor-teal` | brand | Primary Sign Up and hero conversion buttons, with occasional dark teal card treatments. |
| Forest Teal | `#156152` | `--color-forest-teal` | accent | Alternate Explore Recruit button treatment and secondary recruitment actions. |
| Berry Ink | `#662344` | `--color-berry-ink` | brand | Full-width participant earnings callout band, paired with white copy and illustration. |
| Tide Glass | `#e4f0f1` | `--color-tide-glass` | surface | Cool-toned testimonial and quote cards against the white canvas. |
| Midnight Blue | `#16325a` | `--color-midnight-blue` | semantic | Explore Research Hub button and dark interface details; not the page’s dominant navy footer image. |
| Rose Thread | `#d6aec1` | `--color-rose-thread` | semantic | Measured button border color; use only for subtle outlined details where present. |
| Lagoon Edge | `#2a7779` | `--color-lagoon-edge` | semantic | Thin teal border or decorative detail, not a major page surface. |
| Seafoam Line | `#a2cbcd` | `--color-seafoam-line` | semantic | Light teal button-border detail within the measured component palette. |
| Muted Plum | `#924f70` | `--color-muted-plum` | semantic | Sparse measured text detail related to the berry section, not a primary text color. |
| Night Navy | `#021020` | `--color-night-navy` | semantic | Small dark decorative or image detail; the footer’s navy appearance is image-led. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f8f7` (Mist Mint) · `--color-surface-2` → `#662344` (Berry Ink) · `--color-surface-3` → `#e4f0f1` (Tide Glass) · `--color-surface-4` → `#1c5d5f` (Harbor Teal) · `--color-text` → `#000000` (Research Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#d6aec1` (Rose Thread) · `--color-accent` → `#65b8a2` (Soft Jade) · `--color-accent-2` → `#1c5d5f` (Harbor Teal) · `--color-accent-3` → `#156152` (Forest Teal) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f2f8f7` | 19.55:1 | AAA |
| `#000000` | `#662344` | 1.89:1 | fail |
| `#000000` | `#e4f0f1` | 18.03:1 | AAA |
| `#ffffff` | `#f2f8f7` | 1.07:1 | fail |
| `#ffffff` | `#662344` | 11.12:1 | AAA |
| `#ffffff` | `#e4f0f1` | 1.16:1 | fail |
| `#65b8a2` | `#ffffff` | 2.35:1 | fail |
| `#65b8a2` | `#f2f8f7` | 2.19:1 | fail |
| `#65b8a2` | `#662344` | 4.73:1 | AA |

### Gradients

- `linear-gradient(rgba(1, 25, 54, 0.5), rgba(1, 25, 54, 0.5)), url("https://cdn.prod.website-files.com/59ace8427353c50001765cbd/680022ed63cb18c40c108634_navy1.jpg")`
- `conic-gradient(rgb(189, 160, 240) 0deg, rgba(189, 160, 240, 0) 60deg, rgba(189, 160, 240, 0) 310deg, rgb(189, 160, 240) 360deg)`
- `linear-gradient(45deg, rgb(230, 215, 255), rgb(208, 217, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| sofia-pro | `--font-body` | webfont | 400, 700, 500 | Navigation, body copy, buttons, links, and compact supporting text. | Nunito Sans |
| IBM Plex Mono | `--font-mono` | webfont | 400, 500, 600 | Uppercase eyebrow labels and occasional compact technical-style metadata. | IBM Plex Mono |
| p22-mackinac-pro | `--font-display` | webfont | 400, 500 | Display, H1, H2, and editorial section headlines. | Lora |
| P 22 Mackinac italic | `--font-p-22-mackinac-italic` | webfont | 700 | Expressive italic emphasis in selected section headings. | Lora |

- **sofia-pro:** Friendly geometric sans; mostly regular weight, with heavier emphasis used sparingly.
- **IBM Plex Mono:** Use uppercase labels with visibly spaced tracking; keep this voice limited to small labels.
- **p22-mackinac-pro:** Distinctive literary serif in regular or medium weights; preserve natural mixed-case headlines.
- **P 22 Mackinac italic:** Use bold italic sparingly for a single emphasized phrase, not whole paragraphs.

### Type scale — Augmented Fourth (ratio ≈ 1.375, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1.16 | 0 | — | p22-mackinac-pro | Large editorial hero headline and prominent brand statement. |
| h1 | 50px | 400 | 1.2 | 0 | — | p22-mackinac-pro | Primary hero title or page-level headline. |
| h2 | 44px | 400 | 1.32 | 0 | — | p22-mackinac-pro | Major section titles across platform and proof-point content. |
| h3 | 36px | 700 | 1.17 | 0 | — | P 22 Mackinac italic | Emphasized feature headings, sometimes with expressive italic treatment. |
| h4 | 30px | 500 | 1.33 | 0 | — | p22-mackinac-pro | Subsection and card-level titles. |
| body | 13px | 400 | 1.46 | 0 | — | sofia-pro | Standard explanatory copy and supporting paragraphs. |
| caption | 12px | 400 | 1.5 | 0 | — | sofia-pro | Small testimonial, attribution, and supporting card text. |
| button | 16px | 400 | 1.38 | 0 | — | sofia-pro | Primary and secondary CTA labels. |
| nav | 16px | 400 | 1.5 | 0 | — | sofia-pro | Top-level header navigation links. |
| link | 13px | 400 | 1.46 | 0 | — | sofia-pro | Inline content links and feature destinations. |
| eyebrow | 17px | 600 | 2.24 | 0.059em | uppercase | IBM Plex Mono | Compact uppercase section labels with monospaced character. |
| code | 14px | 400 | 1.57 | 0 | — | IBM Plex Mono | Mono-styled technical snippets if required; not prominent in this homepage. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 12, 14, 16, 20, 22, 24, 32, 40, 48, 56, 88 px.
- Section rhythm 88px · element gap 16px · card padding 32px · max content width 1300px.

Use a broad centered content area with a measured maximum width of 1300px. The hero is vertically spacious, placing a centered text-and-CTA stack between large hand-drawn scenes. Subsequent white sections mix centered headings with split or multi-column content, including three-column proof points and a four-column footer. Preserve the comfortable density and clear section breaks; measured section rhythm is generous, with repeated 16px element gaps and 32px card padding. Align long-form content cleanly and let illustrations extend around, not over, the central message.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · xs `3px` · pill `9999px`
- Shadow `hairline` (other): `rgba(14, 71, 73, 0.15) 2px 2px 2px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat: cards use pale fills rather than pronounced shadows, and content sections rely on whitespace instead of stacked containers. Buttons are pill-shaped, with little or no visible elevation. Keep borders and hairlines restrained; the measured shadow is a subtle teal-tinted detail, not a general card treatment.

## Imagery

The hero relies on distinctive black hand-drawn scenes of researchers, participants, documents, and research tools, with selective teal and rose accents. Keep the line art loose, human, and expansive against white; pair it with occasional participant portraits or company marks in later proof sections. The participant callout uses an illustrated figure, while the footer uses a dark, graphic image treatment. Avoid glossy product mockups or dense photographic backgrounds.

## Components

### Header navigation

White horizontal header with black Sofia Pro links, a compact brand mark, and a teal pill-shaped Sign Up action.

### Announcement link

Slim outlined pill centered above the hero title, with a small icon, compact copy, and inline learn-more link.

### Hero CTA

Centered supporting copy followed by a Harbor Teal (#1c5d5f) pill button with white Sofia Pro text.

### Feature cards

Flat, square-corner cards using Mist Mint (#f2f8f7) or Tide Glass (#e4f0f1), black copy, and generous internal padding.

### Participant callout

Full-width Berry Ink (#662344) band with white headline and supporting copy, accompanied by a celebratory illustration.

### Testimonial proof

Quote-led social proof on cool pale surfaces, with compact Sofia Pro copy and surrounding company or platform marks.

### Dark footer

Deep navy image-led footer with white headings and compact multi-column navigation links.

### Measured component styles

- **Primary button** (“Sign Up”): background #1c5d5f · text #ffffff · radius 48px · padding 14px 22px 16px 22px · 400 16px sofia-pro
- **Secondary button** (“Explore Recruit”): background #156152 · text #ffffff · radius 48px · padding 14px 22px 16px 22px · 400 16px sofia-pro
- **Link** (“Recruit”): transparent background · text #ffffff · radius 0px · padding 8px 0px · 400 13px sofia-pro
- **Card** (“"It has drastically increased the pace a”): background #e4f0f1 · text #000000 · radius 0px · padding 32px · 400 12px sofia-pro
- **Navigation item** (“Platform”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px sofia-pro

## Do

- Keep the main page canvas white and visually open.
- Use Mackinac-style serif headlines for editorial emphasis.
- Reserve Harbor Teal for clear primary actions.
- Use hand-drawn human scenes as the signature visual motif.
- Keep feature cards flat with pale blue-green fills.
- Use monospaced uppercase labels sparingly.
- Maintain a strong distinction between the berry callout and white sections.

## Don't

- Do not replace the line-art identity with glossy product renders.
- Do not make every section teal or dark.
- Do not use heavy shadows to separate ordinary cards.
- Do not crowd the hero headline with illustration details.
- Do not apply monospaced styling to body paragraphs.
- Do not round feature cards; reserve pill shapes for navigation and buttons.

## Agent prompt

Build a new page in the User Interviews visual style. Keep a generous white Gallery White (#ffffff) canvas, black Research Ink (#000000) typography, and editorial Mackinac-style serif headlines. Use friendly Sofia Pro-like sans-serif for navigation, body copy, and controls; reserve IBM Plex Mono for small uppercase labels. Make Harbor Teal (#1c5d5f) the primary CTA color with white text, and use Soft Jade (#65b8a2) only as a restrained accent. Organize content in broad, spacious sections with clear alignment and comfortable gaps. Include loose, human hand-drawn line art as supporting imagery, not as a backdrop to dense copy. Use Mist Mint (#f2f8f7) and Tide Glass (#e4f0f1) for flat cards, and a single Berry Ink (#662344) band for a contrasting callout. Keep borders and shadows subtle; use pill-shaped controls and square-corner content cards.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White, illustration-framed hero with centered headline, supporting copy, and primary CTA. | top announcement link, single primary action, header navigation | editorial serif headline, hand-drawn scenes, teal pill CTA |
| 2 | logo-cloud | Centered heading above a horizontal band of company marks. | trust proof, brand recognition | white canvas, logo row, serif heading |
| 3 | feature-grid | Centered section heading followed by two-column feature content and cards. | feature discovery, linked destinations, scan-friendly lists | pale green cards, black copy, small inline links |
| 4 | how-it-works | Two-column section with an introductory heading and sequential steps. | step-by-step explanation, process scanning | white canvas, numbered steps, thin rules |
| 5 | cta | Full-width berry band with copy, CTA link, and participant illustration. | participant conversion, earnings proof | Berry Ink background, white typography, illustrated figure |
| 6 | testimonials | White proof section with quotes and supporting marks across three columns. | social proof, testimonial scan | cool-toned quote cards, company logos, serif section title |
| 7 | footer | Dark image-led closing area with CTA at top and multi-column link groups below. | signup conversion, resource navigation, company navigation | navy graphic backdrop, white links, compact columns |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(1,25,54,0);
--osano-button-border-color: #fff;
--osano-button-background-color: #177863;
--osano-button-foreground-color: #FFFFFF;
--osano-dialog-background-color: #011936;
--osano-dialog-foreground-color: #FFFFFF;
--osano-info-dialog-overlay-color: rgba(255,255,255,0);
--osano-link-color: #65b8a2;
--osano-toggle-off-track-color: #65b8a2;
--osano-toggle-off-thumb-color: #FFFFFF;
--osano-toggle-on-track-color: #65b8a2;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-button-close-color: #FFFFFF;
--osano-button-accept-background-color: #177863;
--osano-button-accept-border-color: #fff;
--osano-button-accept-foreground-color: #FFFFFF;
--osano-button-deny-background-color: #177863;
--osano-button-deny-border-color: #fff;
--osano-button-deny-foreground-color: #FFFFFF;
--osano-button-reject-all-background-color: #177863;
--osano-button-reject-all-background-color-hover: #2b8c77;
--osano-button-reject-all-border-color: #fff;
--osano-button-reject-all-foreground-color: #FFFFFF;
--osano-button-manage-background-color: #177863;
--osano-button-manage-border-color: #fff;
--osano-button-manage-foreground-color: #FFFFFF;
--osano-info-dialog-link-color: #65b8a2;
--osano-info-dialog-button-close-color: #FFFFFF;
--osano-info-dialog-toggle-off-track-color: #65b8a2;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #65b8a2;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #177863;
--osano-info-dialog-button-border-color: #FFFFFF;
--osano-info-dialog-button-foreground-color: #FFFFFF;
--osano-dialog-gpc-background-color: #011936;
```

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