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

# Lyssna · Design System

> Calm editorial design for confident research

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

Lyssna pairs an airy editorial layout with a distinctive dark-teal palette to present its user-research platform. Fine grid lines, serif display headlines, product imagery, and clear signup actions balance a warm, human tone with SaaS product credibility.

## North star

Let generous white space and editorial typography lead, using teal as a precise action cue and product imagery as supporting evidence.

## Overview

The page builds its identity around white space, dark-ink typography, and a focused teal accent. The hero uses a delicate pale-blue grid as a quiet canvas rather than a competing graphic, centering a large Grenette serif headline above concise sans-serif copy and paired actions. White remains the dominant surface; warm ivory marks a broad transition band, while deep navy-teal sections create deliberate contrast. Mint and brighter teal details appear in links, accents, and the footer, with some vivid gradients confined to product mockups and decorative illustrations rather than defining the core palette. Layouts alternate between centered editorial moments and structured multi-column content, with generous vertical pauses. Real people and interface screenshots make the research workflow tangible, while outlined cards, restrained borders, and soft rounded corners keep components approachable. The overall system feels calm, precise, and human without relying on heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, cards, and open areas around centered content. |
| Deep Ink | `#061d29` | `--color-deep-ink` | brand | Main heading and body text, outlined cards, and dark security section. |
| Harbor Teal | `#006e75` | `--color-harbor-teal` | brand | Primary signup buttons, brand marks, selected media details, and footer background. |
| Reef Teal | `#0b978e` | `--color-reef-teal` | accent | Secondary teal accent details and small action or footer highlights. |
| Mist Grid | `#e1ebf5` | `--color-mist-grid` | semantic | Fine grid lines and faint pale-blue decorative gradients behind content. |
| Vanilla Veil | `#fffded` | `--color-vanilla-veil` | surface | Warm ivory transition band between the white feature areas and dark solution section. |
| Slate Blue | `#183547` | `--color-slate-blue` | neutral | Muted supporting copy and secondary text on light surfaces. |
| Mint Glow | `#a6f1dd` | `--color-mint-glow` | accent | Mint accent and text details, especially in the dark footer. |
| Pine Shadow | `#072626` | `--color-pine-shadow` | surface | Deep green-black section surface used for high-contrast content bands. |
| Ice Mint | `#b9ffe8` | `--color-ice-mint` | accent | Small bright mint highlights in footer and button details. |
| Harbor Slate | `#425d6d` | `--color-harbor-slate` | semantic | Subtle borders and outlines on navigation and secondary controls. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#fffded` (Vanilla Veil) · `--color-surface-2` → `#006e75` (Harbor Teal) · `--color-surface-3` → `#061d29` (Deep Ink) · `--color-surface-4` → `#072626` (Pine Shadow) · `--color-text` → `#061d29` (Deep Ink) · `--color-text-muted` → `#183547` (Slate Blue) · `--color-text-subtle` → `#a6f1dd` (Mint Glow) · `--color-border` → `#425d6d` (Harbor Slate) · `--color-accent` → `#006e75` (Harbor Teal) · `--color-accent-2` → `#0b978e` (Reef Teal) · `--color-accent-3` → `#a6f1dd` (Mint Glow) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#061d29` | `#ffffff` | 17.28:1 | AAA |
| `#061d29` | `#fffded` | 16.89:1 | AAA |
| `#061d29` | `#006e75` | 2.87:1 | fail |
| `#183547` | `#ffffff` | 12.81:1 | AAA |
| `#183547` | `#fffded` | 12.52:1 | AAA |
| `#183547` | `#006e75` | 2.13:1 | fail |
| `#183547` | `#061d29` | 1.35:1 | fail |
| `#a6f1dd` | `#ffffff` | 1.29:1 | fail |
| `#a6f1dd` | `#fffded` | 1.26:1 | fail |
| `#a6f1dd` | `#006e75` | 4.66:1 | AA |

### Gradients

- `linear-gradient(90deg, rgb(225, 235, 245) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgb(225, 235, 245) 1px, rgba(0, 0, 0, 0) 1px)`
- `radial-gradient(closest-side, rgb(255, 255, 255) 30%, rgba(0, 0, 0, 0))`
- `linear-gradient(to right, rgb(225, 235, 245) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgb(225, 235, 245) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(in oklab, rgba(0, 0, 0, 0) 0%, rgb(255, 255, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MintGrotesk-606ffdc570cb3ecf | `--font-body` | webfont | 500, 400 | Primary sans-serif for navigation, body copy, buttons, cards, and most interface text. | DM Sans |
| GrenettePro-59491dde564b7ff5 | `--font-display` | webfont | 400 | Editorial serif for display and main page headings. | Lora |

- **MintGrotesk-606ffdc570cb3ecf:** Mostly regular and medium weights; sentence case throughout, with uppercase reserved for compact captions.
- **GrenettePro-59491dde564b7ff5:** Regular weight, generous line spacing, and natural tracking; gives centered hero and section titles a distinctive editorial voice.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1.05 | 0 | — | GrenettePro-59491dde564b7ff5 | Large editorial hero and campaign-style display headlines. |
| h1 | 46px | 400 | 1.2 | 0 | — | GrenettePro-59491dde564b7ff5 | Primary page headline and major section statements. |
| h2 | 26px | 500 | 1.25 | 0 | — | MintGrotesk-606ffdc570cb3ecf | Feature and section headings in the content flow. |
| h3 | 22px | 500 | 1.25 | 0 | — | MintGrotesk-606ffdc570cb3ecf | Subsection titles and feature-card headings. |
| h4 | 20px | 400 | 1.5 | 0 | — | MintGrotesk-606ffdc570cb3ecf | Supporting headings and compact content labels. |
| body | 16px | 400 | 1.5 | 0 | — | MintGrotesk-606ffdc570cb3ecf | Paragraphs, explanatory copy, and card descriptions. |
| caption | 13px | 500 | 1.22 | 0 | uppercase | MintGrotesk-606ffdc570cb3ecf | Compact uppercase labels and metadata. |
| nav | 16px | 500 | 1.5 | 0 | — | MintGrotesk-606ffdc570cb3ecf | Header navigation links and menu labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 23, 24, 32, 75, 80 px.
- Section rhythm 80px · element gap 4px · card padding 32px · max content width 1290px.

The desktop page uses a wide centered content area, measured at a 1290px maximum, with a comfortable density and generous section pauses. The hero is centrally aligned over a faint square grid; logo rows and the how-it-works cards form horizontal bands, while feature content shifts to split layouts. Deep-color sections span the page to reset the rhythm. Keep content grouping clear, use broad margins, and avoid crowding interface screenshots or copy.

## Shape & elevation

- Radius: button `8px` · card `24px` · media `8px` · badge `8px` · nav `12px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `24px` · pill `9999px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 30px 20px inset`
- Motion: standard transition `0.1s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The system is mostly flat: clear canvas changes, fine outlines, and generous whitespace establish hierarchy instead of prominent drop shadows. Cards use broad rounded corners and dark, precise borders where measured. UI panels may overlap photographs to suggest product depth, while the grid remains extremely subtle and backgrounds stay clean.

## Imagery

Use real people in natural work settings alongside crisp product-interface mockups that show surveys, participant controls, and research workflows. Images sit in rounded frames and are layered with compact UI panels or labels. Keep photography bright and credible, with illustrations used sparingly for decorative accents. Colorful gradients belong primarily to mockup screens and campaign artwork, not as a blanket treatment for the page.

## Components

### Primary signup button

Harbor Teal (#006e75) fill, white text, medium Mint Grotesk, rounded 8px corners, and measured 16px vertical by 24px horizontal padding.

### Secondary action

White or transparent surface with a fine slate outline and dark text; visually quieter than the filled signup action.

### Navigation

White horizontal header with dark medium-weight links, understated search and login controls, and a teal signup button.

### Outlined testimonial card

White card with dark ink text, a 1px dark border, 24px radius, and measured 32px padding; no prominent shadow.

### Product mockup

Rounded screenshot or survey panel layered beside people photography, with small controls and selective mint or gradient interface details.

### Logo cloud

A horizontal strip of customer marks on white, separated from surrounding sections by ample breathing room.

### Dark content band

Full-width Deep Ink or Pine Shadow background, white headings, muted explanatory text, and restrained mint icon accents.

### Measured component styles

- **Primary button** (“Sign up for free Sign up for free Sign u”): background #006e75 · text #ffffff · radius 8px · padding 16px 24px · 500 16px MintGrotesk-606ffdc570cb3ecf
- **Secondary button** (“Learn more Learn more Learn more”): background #b9ffe8 · text #061d29 · border 1px solid #425d6d · radius 8px · padding 15.1px 24px · 500 16px MintGrotesk-606ffdc570cb3ecf
- **Link** (““After conducting a card sort, I realize”): transparent background · text #061d29 · radius 0px · padding 0px · 400 16px MintGrotesk-606ffdc570cb3ecf
- **Card** (““After conducting a card sort, I realize”): background #ffffff · text #061d29 · border 1px solid #061d29 · radius 24px · padding 32px · 400 16px MintGrotesk-606ffdc570cb3ecf
- **Badge** (“1”): transparent background · text #061d29 · border 1px solid #061d29 · radius 8px · padding 0px · 500 13px MintGrotesk-606ffdc570cb3ecf
- **Navigation item** (“Get paid to test”): transparent background · text #061d29 · radius 0px · padding 0px · 400 16px MintGrotesk-606ffdc570cb3ecf

## Do

- Use #ffffff as the main canvas.
- Set main headings in the measured editorial serif.
- Reserve #006e75 for primary actions and brand emphasis.
- Keep pale grid lines behind content, not over it.
- Alternate open white space with purposeful dark bands.
- Pair research interfaces with authentic human photography.

## Don't

- Do not make gradients the dominant page background.
- Do not add heavy shadows to otherwise flat cards.
- Do not use saturated teal for large areas of body text.
- Do not compress the hero or remove its generous whitespace.
- Do not use generic geometric sans-serif styling for every heading.
- Do not let mockup colors redefine the brand palette.

## Agent prompt

Build a new SaaS page in Lyssna’s calm, editorial style. Use Gallery White (#ffffff) for the main canvas, Deep Ink (#061d29) for headings and body text, and Harbor Teal (#006e75) for primary actions. Set major headlines in the measured serif-like display face and use a clean sans-serif for navigation, paragraphs, and controls. Keep content centered within the measured wide page width, with generous vertical pauses and a faint Mist Grid (#e1ebf5) only where a grid backdrop is useful. Use warm Vanilla Veil (#fffded) for occasional transition bands and reserve dark full-width sections for contrast. Combine real people photography with rounded research-interface mockups. Prefer precise borders and flat surfaces over shadows; keep gradients inside interface art rather than spreading them across the page.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | logo-cloud | A horizontal customer-logo strip on white, following the introductory content. | Social proof, Customer recognition | Logo row, Centered supporting statement |
| 2 | feature-grid | A full-width dark band with a security illustration at left and a two-column set of safeguards. | Trust building, Security detail | Dark surface, Icon-led feature grid, Muted supporting copy |
| 3 | logo-cloud | A short white horizontal strip of customer logos between the security band and CTA. | Social proof, Trust reinforcement | Horizontal brand marks, White canvas |
| 4 | footer | A full-width Harbor Teal footer with brand details and multiple link columns. | Site navigation, Resource discovery | Teal footer surface, Multi-column links, Social and trust marks |

## Source CSS custom properties (selected)

```css
--font-grenette: GrenettePro-59491dde564b7ff5,"GrenettePro-59491dde564b7ff5 fallback: Arial",sans-serif;
```

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