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

# Voicenotes · Design System

> Warm editorial calm meets practical AI utility.

**Theme:** light · **Industry:** ai · **Source:** https://voicenotes.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._

Voicenotes pairs a warm off-white canvas and expressive serif headlines with crisp, understated sans-serif interface text. Product screens, trust signals, testimonials, and restrained black calls to action make the long homepage feel approachable and credible.

## North star

Keep the page warm and quiet, letting editorial serif headlines and vivid product imagery carry emphasis while controls stay crisp and functional.

## Overview

The page is built on a consistent warm ivory canvas (#faf9f5), with near-black text and generous open areas that keep its long sales story calm rather than busy. Instrument Serif supplies the large editorial headlines, while Inter handles navigation, explanatory copy, labels, and buttons with a compact, legible rhythm. The layout alternates centered feature introductions with carefully aligned image-and-copy compositions, then moves through security proof, testimonials, and a final setup CTA. Product imagery is the main source of visual color: vivid meeting artwork and interface mockups sit inside rounded frames, while the surrounding interface stays restrained. Black pill-shaped CTAs create clear action contrast; fine gray borders and white cards organize proof and product details without making the page feel heavily boxed. Spacing is roomy between major sections but compact within cards and supporting copy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#faf9f5` | `--color-warm-canvas` | brand | Dominant page canvas behind the navigation, hero, feature sections, CTA, and footer. |
| Soft Ink | `#0d0d0d` | `--color-soft-ink` | neutral | Primary headings, navigation, links, and the black backgrounds of primary CTA buttons. |
| Quiet Gray | `#717171` | `--color-quiet-gray` | neutral | Main muted body copy and supporting explanatory text. |
| Stone Hairline | `#cbcac7` | `--color-stone-hairline` | neutral | Thin outlines around testimonial and product cards. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Card and navigation surfaces; also the light text on filled black CTAs. |
| Slate Caption | `#646462` | `--color-slate-caption` | neutral | Secondary muted copy and small supporting text within card content. |
| Mist Blue | `#eaf2f8` | `--color-mist-blue` | surface | Pale blue card surface behind product-interface content. |
| Linen Divider | `#eeedea` | `--color-linen-divider` | neutral | Subtle footer and card-area details; a quiet supporting neutral rather than a defining brand color. |
| Charcoal Note | `#222222` | `--color-charcoal-note` | neutral | Occasional heading text variation; visually subordinate to the primary near-black. |
| Graphite Note | `#18181b` | `--color-graphite-note` | neutral | Sparse supporting text shade, not a major page color. |
| Deep Gray Note | `#333333` | `--color-deep-gray-note` | neutral | Minor body-text variation; use only where a softer near-black is needed. |

### Semantic aliases

`--color-canvas` → `#faf9f5` (Warm Canvas) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#eaf2f8` (Mist Blue) · `--color-text` → `#0d0d0d` (Soft Ink) · `--color-text-muted` → `#717171` (Quiet Gray) · `--color-text-subtle` → `#646462` (Slate Caption) · `--color-border` → `#cbcac7` (Stone Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0d0d0d` | `#faf9f5` | 18.45:1 | AAA |
| `#0d0d0d` | `#ffffff` | 19.44:1 | AAA |
| `#0d0d0d` | `#eaf2f8` | 17.17:1 | AAA |
| `#717171` | `#faf9f5` | 4.63:1 | AA |
| `#717171` | `#ffffff` | 4.88:1 | AA |
| `#717171` | `#eaf2f8` | 4.31:1 | AA-large |
| `#646462` | `#faf9f5` | 5.63:1 | AA |
| `#646462` | `#ffffff` | 5.93:1 | AA |
| `#646462` | `#eaf2f8` | 5.24:1 | AA |

### Gradients

- `linear-gradient(0deg, rgba(250, 249, 245, 0.2), rgba(250, 249, 245, 0.2)), radial-gradient(47.01% 47.01%, rgba(250, 249, 245, 0.18) 0px, rgba(250, 249, 245, 0.6))`
- `linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0))`
- `linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0))`
- `linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(209, 250, 219, 0.7) 15%, rgba(102, 240, 224, 0.7) 50%, rgba(0, 136, 255, 0.7) 100%, rgba(255, 255, 255, 0.7) 0px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Regular | `--font-body` | webfont | 400 | Body copy, navigation, captions, and most interface labels. | Inter |
| Inter SemiBold | `--font-inter-semibold` | webfont | 400 | Emphasized navigation and button labels. | Inter |
| Inter Medium | `--font-inter-medium` | webfont | 400 | Links and button labels. | Inter |
| InstrumentSerif-Regular | `--font-display` | webfont | 400 | Large display headlines, especially the hero and centered section titles. | Instrument Serif |
| -apple-system | `--font-apple-system` | system | 400, 500 | System-font fallback for minor interface or platform-rendered text. | Inter |

- **Inter Regular:** Regular-weight sans-serif with unembellished casing and neutral tracking; prioritize compact, readable copy.
- **Inter SemiBold:** Use sparingly for action emphasis; retain sentence case and the page’s clean sans-serif voice.
- **Inter Medium:** Medium emphasis rather than heavy bold; labels remain sentence case with neutral tracking.
- **InstrumentSerif-Regular:** Regular serif with tight negative tracking on display text; use mixed-case headlines, not all caps.
- **-apple-system:** Use as a restrained native sans-serif fallback; preserve the page’s regular-weight, compact interface tone.

### Type scale — Custom (ratio ≈ 2.07, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1 | -0.02em | — | InstrumentSerif-Regular | Large serif hero headline and editorial section headings. |
| h1 | 18px | 400 | 1.56 | 0 | — | Inter Regular | Small supporting hero and primary explanatory copy. |
| body | 14px | 400 | 1.43 | 0 | — | Inter Regular | Feature descriptions, testimonials, and general page copy. |
| caption | 12px | 400 | 1.33 | 0 | — | Inter Regular | Compact helper text, metadata, and card details. |
| button | 16px | 400 | 1.31 | 0 | — | Inter Medium | Primary and secondary CTA labels. |
| link | 14px | 400 | 1.71 | 0 | — | Inter Medium | Navigation links and inline text links. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 32, 40 px.
- Section rhythm 40px · element gap 8px · card padding 16px · max content width 1240px.

Use a centered content area capped at the measured 1240px maximum, with two-column hero composition and centered section titles. The page alternates feature demonstrations, security proof, testimonial cards, a final CTA, and a multi-column footer. Major sections have generous vertical separation; within cards, supporting copy and controls stay compact. Feature content shifts between three-column steps and image-led split layouts, while the trust and testimonial areas use denser grids.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `50%` · xs `5px` · sm `6px` · md `8px` · lg `12px` · xl `16px` · 2xl `18px` · pill `9999px`
- Shadow `sm` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 3px 4px 0px`
- Shadow `sm-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 2px 8px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 24px 60px -12px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 2px 5px 0px, rgba(0, 0, 0, 0.04) 0px 8px 40px 0px, rgba(0, 0, 0, 0.15) 0px 0px 2px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with thin stone-gray card outlines doing much of the separation work. White cards sit quietly against the ivory canvas, and rounded corners soften product and testimonial panels. Use subtle shadows only to lift media or selected layered mockups; avoid broad, dark shadows on ordinary content.

## Imagery

Use product interface mockups and colorful meeting-related artwork as the primary visual storytelling. The hero places a large rounded media panel beside copy; later feature sections show screenshots in framed compositions. Bright blues and greens belong mainly to illustrations and mockups, not the core UI palette. Keep media sharp and colorful against the muted canvas.

## Components

### Primary CTA

Near-black pill button with white Inter label; used for Book a demo and Start for free actions.

### Secondary CTA

Light canvas or white pill with a fine dark outline and dark text, paired beside the filled primary action.

### Hero media panel

Large rounded product illustration or interface composition opposite the hero copy; its saturated artwork supplies color.

### Feature card

Rounded screenshot or demonstration surface with concise title and supporting copy, arranged in three-step or split-section layouts.

### Proof card

White testimonial card with a thin #cbcac7 outline, rounded corners, compact quote text, and author details.

### Trust row

Small icon-led reassurance statements beneath the hero CTA, covering privacy, supported platforms, and meeting-app compatibility.

### Footer link columns

Four compact groups of text links above a fine footer divider, with copyright and social icons along the bottom.

### Measured component styles

- **Primary button** (“Book a demo”): background #0d0d0d · text #ffffff · radius 9999px · padding 12px 24px · 400 15px Inter SemiBold
- **Secondary button** (“Download”): transparent background · text #0d0d0d · border 1px solid · radius 9999px · padding 6px 12px · 400 16px Inter Medium
- **Link** (“macOS”): transparent background · text #0d0d0d · radius 0px · padding 0px · 400 14px Inter Medium
- **Card** (“Mon · 10:42 AM Q2 Pricing Strategy Sync ”): transparent background · text #000000 · border 1px solid #cbcac7 · radius 12px · padding 16px · 400 16px ui-sans-serif
- **Navigation item** (“Download Enterprise Pricing Resources”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px ui-sans-serif

## Do

- Use #faf9f5 as the dominant page canvas.
- Set large section headlines in Instrument Serif.
- Use Inter for navigation, body copy, labels, and controls.
- Reserve #0d0d0d-filled pills for high-priority actions.
- Let colorful product mockups provide most visual variety.
- Use fine #cbcac7 outlines to define cards without heavy framing.

## Don't

- Do not turn illustration colors into the primary UI palette.
- Do not use heavy shadows on every card.
- Do not replace the editorial serif display voice with generic bold sans-serif.
- Do not crowd major sections together.
- Do not make every section a bordered card grid.
- Do not use all-caps styling for headlines or navigation.

## Agent prompt

Build a new Voicenotes-style page on a warm, quiet canvas using Warm Canvas (#faf9f5) as the dominant background and Soft Ink (#0d0d0d) for primary text and filled CTAs. Set editorial headlines in Instrument Serif with tight tracking; use Inter for navigation, body copy, labels, and buttons. Create a clear content hierarchy with open section spacing, centered introductions, and selective two-column or card-grid compositions. Use Paper White (#ffffff) surfaces and Stone Hairline (#cbcac7) outlines to organize cards without heavy borders or shadows. Keep interface colors restrained; put vivid blues and greens inside product illustrations and mockups. Make rounded pill buttons the clearest actions, balance them with outlined secondary actions, and keep supporting labels and footer links compact and legible.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned headline and actions beside a large rounded product visual. | Primary and secondary CTA, Privacy and compatibility trust cues | Editorial serif headline, Pill buttons, Rounded product media |
| 2 | how-it-works | Centered section heading above three evenly arranged demonstration cards. | Numbered sequential steps, Short explanatory copy | Three-column feature grid, Screenshot-led cards |
| 3 | product-showcase | Centered title followed by alternating, image-led feature compositions. | Progressive product benefits, Feature-specific explanations | Rounded interface mockups, Alternating content placement |
| 4 | other | Centered security heading, compact trust grid, then a denser multi-column testimonial collection. | Security reassurance, Social proof through customer quotes | Icon-led assurance cards, Outlined quote cards |
| 5 | cta | Centered closing headline and single primary action with open space around them. | Single next-step CTA | Editorial serif headline, Black pill button |
| 6 | footer | Four link columns above a fine divider, followed by copyright and social links. | Grouped destination links, Social and legal navigation | Compact text lists, Subtle horizontal divider |

## Source CSS custom properties (selected)

```css
--tw-text-opacity: 1;
--tw-bg-opacity: 1;
--tw-border-opacity: 1;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-ring-color: rgba(59,130,246,.5);
```

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