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

# Aqua Voice · Design System

> Quiet canvas, vivid voice, focused product storytelling.

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

Aqua Voice pairs a pale, restrained canvas with a strong dark coding chapter and vivid blue CTA gradients. Large, airy typography and product-interface imagery explain voice dictation across writing and development workflows.

## North star

Let open, quiet space and clear product evidence lead, reserving saturated blue for the most important action.

## Overview

The page moves between near-white sections and a long, near-black coding chapter, making contrast the main organizing device rather than a large range of brand colours. #fafbfc anchors most content; dark surfaces concentrate developer examples, while the pale blue-gray band marks the real-time editing feature. Blue appears primarily as a gradient CTA and small brand signal, not as a broad section fill. PP Neue Montreal Book supplies spacious, finely weighted headlines and body copy, with restrained mono captions giving technical labels a deliberate feel. The layout alternates centered product demonstrations with left-aligned feature storytelling and paired metric callouts. Screenshots and interface mockups carry the explanation; they sit within ample open space and are treated as product evidence rather than decorative illustration. Rounded pill actions, soft shadows, and subtle hairlines keep the polished UI approachable without making the page feel card-heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cloud Canvas | `#fafbfc` | `--color-cloud-canvas` | neutral | Primary light-page canvas and the foundation for most sections, cards, and soft fades. |
| Midnight Ink | `#050608` | `--color-midnight-ink` | surface | Full-width dark coding and developer-workflow chapter background. |
| Slate Copy | `#676a76` | `--color-slate-copy` | semantic | Main muted copy color for supporting explanations on light surfaces. |
| Graphite Text | `#2f2f30` | `--color-graphite-text` | neutral | Core dark text and occasional fine card or link detailing. |
| Mist Surface | `#e5e8ec` | `--color-mist-surface` | surface | Cool gray interface and card surface, also visible within product demonstrations. |
| Soft Hairline | `#f0f0f0` | `--color-soft-hairline` | semantic | Subtle separators and fine card borders on pale sections. |
| Ash Caption | `#a2a2a3` | `--color-ash-caption` | semantic | Secondary muted text and small badge copy. |
| Pewter Detail | `#b5b5b5` | `--color-pewter-detail` | neutral | Low-emphasis supporting text, not a defining brand colour. |
| Charcoal Panel | `#171719` | `--color-charcoal-panel` | surface | Inset dark UI panels and cards in coding mockups. |
| Deep Panel | `#121214` | `--color-deep-panel` | surface | Dark mockup surfaces and nested interface cards. |
| Ice Blue Band | `#f2f6fa` | `--color-ice-blue-band` | surface | Pale blue-gray background band for the content-editing section. |
| Amber Token | `#c58b3a` | `--color-amber-token` | accent | Tiny avatar or badge accent inside interface imagery, not a core page accent. |
| Blue Charcoal | `#292c3d` | `--color-blue-charcoal` | neutral | Dark text sampled mainly from interface cards and product mockups. |
| True Black | `#000000` | `--color-true-black` | neutral | Small text details and interface content; not the primary dark-section canvas. |
| Muted Indigo | `#3d4050` | `--color-muted-indigo` | neutral | Secondary dark text sampled in headings and product UI. |
| Warm Charcoal | `#1d1c1d` | `--color-warm-charcoal` | surface | Minor dark interface detail and embedded card surface. |

### Semantic aliases

`--color-canvas` → `#fafbfc` (Cloud Canvas) · `--color-surface` → `#050608` (Midnight Ink) · `--color-surface-2` → `#171719` (Charcoal Panel) · `--color-surface-3` → `#121214` (Deep Panel) · `--color-surface-4` → `#e5e8ec` (Mist Surface) · `--color-text` → `#2f2f30` (Graphite Text) · `--color-text-muted` → `#676a76` (Slate Copy) · `--color-text-subtle` → `#a2a2a3` (Ash Caption) · `--color-border` → `#f0f0f0` (Soft Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2f2f30` | `#fafbfc` | 12.91:1 | AAA |
| `#2f2f30` | `#050608` | 1.52:1 | fail |
| `#2f2f30` | `#171719` | 1.34:1 | fail |
| `#2f2f30` | `#121214` | 1.4:1 | fail |
| `#676a76` | `#fafbfc` | 5.2:1 | AA |
| `#676a76` | `#050608` | 3.76:1 | AA-large |
| `#676a76` | `#171719` | 3.32:1 | AA-large |
| `#676a76` | `#121214` | 3.47:1 | AA-large |
| `#a2a2a3` | `#fafbfc` | 2.46:1 | fail |
| `#a2a2a3` | `#050608` | 7.95:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0), rgb(250, 251, 252))`
- `linear-gradient(rgba(255, 255, 255, 0.34) 0px, rgba(0, 0, 0, 0) 62%)`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(rgb(124, 188, 255), rgb(75, 149, 245))`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(rgb(46, 46, 46), rgb(23, 23, 23))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PP Neue Montreal Book | `--font-body` | webfont | 400, 200 | Display headlines, section headings, body copy, and general interface text. | Inter |
| Inter | `--font-inter` | webfont | 400, 500, 600 | Small badges and supporting interface labels. | Inter |
| PP Neue Montreal Medium | `--font-pp-neue-montreal-medium` | webfont | 400, 500 | Buttons, navigation, and emphasized links. | Inter |
| IBM Plex Mono | `--font-mono` | webfont | 400 | Captions and code-like microcopy. | IBM Plex Mono |
| Geist Mono | `--font-geist-mono` | webfont | 400, 500 | Uppercase eyebrow labels. | IBM Plex Mono |

- **PP Neue Montreal Book:** Use regular, light-feeling sans forms; headlines are large and calm, with slightly tight h1/h2 tracking.
- **Inter:** Compact, neutral sans; measured badge text is small, with occasional medium weight.
- **PP Neue Montreal Medium:** Medium-weight control text, generally sentence case; keep pill actions crisp and readable.
- **IBM Plex Mono:** Use for concise technical annotations and tiny labels without decorative tracking.
- **Geist Mono:** Monospaced uppercase section labels with visibly expanded letter spacing.

### Type scale — Augmented Fourth (ratio ≈ 1.435, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1.1 | 0 | — | PP Neue Montreal Book | Oversized opening statement and high-emphasis headline moments. |
| h1 | 52px | 400 | 1.08 | -0.01em | — | PP Neue Montreal Book | Primary hero headline and major section titles. |
| h2 | 40px | 400 | 1.1 | -0.01em | — | PP Neue Montreal Book | Feature and product-story section headings. |
| h3 | 24px | 200 | 1.65 | 0 | — | PP Neue Montreal Book | Supporting feature titles and smaller content headings. |
| body | 17px | 400 | 1.6 | 0 | — | PP Neue Montreal Book | Explanatory copy, descriptions, and supporting paragraphs. |
| caption | 10px | 400 | 1.2 | 0 | — | IBM Plex Mono | Tiny product metadata and compact annotations. |
| button | 15px | 400 | 1.2 | 0 | — | PP Neue Montreal Medium | Primary action labels and compact calls to action. |
| nav | 15px | 400 | 1.5 | 0 | — | PP Neue Montreal Medium | Top-level navigation labels and menu items. |
| link | 15px | 400 | 1.5 | 0 | — | PP Neue Montreal Medium | Text links and secondary action labels. |
| eyebrow | 13px | 400 | 1.4 | 0.12em | uppercase | Geist Mono | Uppercase category labels above feature headings. |
| code | 10px | 400 | 1.2 | 0 | — | IBM Plex Mono | Technical snippets and monospaced interface text. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

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

A centered, wide desktop composition uses a measured maximum content width of 1200px. The hero is a single-column, left-aligned statement with open space around it; later light sections alternate centered product demonstrations with three-column benefits and multi-column feature stories. A long dark chapter groups coding examples and metrics, then returns to pale productivity and editing bands. Section spacing is generous relative to the compact internal controls. Keep the page rhythm calm, with aligned content edges and occasional full-bleed media.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `4px` · badge `50%` · nav `9999px` · link `9999px` · xs `2px` · sm `3px` · md `4px` · lg `6px` · xl `8px` · 2xl `10px` · pill `9999px`
- 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.02) 0px 0px 0px 2px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.02) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.0`
- Shadow `inset` (other, text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 1px 0.5px, rgba(0, 0, 0, `
- Shadow `lg-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.02) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.0`
- Shadow `lg-3` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.1) 0px 3px 3px 1.5px, rgba(0, 0, 0, 0.1) 0`
- Shadow `inset-2` (text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(52, 52, 52) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 1px 0.5px, rgba(0, 0, 0, 0.0`
- Shadow `inset-3` (nav, link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(23, 86, 180, 0.18) 0px -2px 4px 0px inset, rgba(255, 255, 255, 0.55) 0px 1px 1px 0px inset, rgba(73, 146, 255, 0.34) 0px 10px 2`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Keep most sections visually flat, using pale hairlines and restrained, diffuse shadows to separate floating product windows and controls. Interface mockups can layer over soft media backdrops, while dark cards nest into the coding surface. Avoid heavy outlines or deep, dramatic shadows; rounded surfaces and subtle depth should preserve the clean product-demo feel.

## Imagery

Use product-interface screenshots and mockups as the principal visual evidence: dictation editor, coding tools, messages, and document editing. Frame them as large, clean windows on pale backgrounds or as dark panels within the coding chapter. The hero relies on open space and a soft atmospheric background rather than a dominant photo. Small blue identity marks and gradients are accents; unrelated colours inside app screenshots should remain contained within those images.

## Components

### Pill CTA

Rounded capsule action with white text; primary Windows actions use a vivid blue vertical gradient and soft blue shadow.

### Top navigation

Light, low-profile nav with compact text links and a right-aligned pill CTA; keep the hero canvas visually dominant.

### Product window

Large app-interface mockup presented as the focal evidence in feature sections, with a restrained frame and soft elevation.

### Feature trio

Three aligned benefit items with small line illustrations, short headings, and quiet explanatory copy.

### Dark coding panel

Near-black full-width chapter containing layered dark editor mockups and understated technical labels.

### Metric pair

Two side-by-side outcome figures with concise labels, set directly on the section background with a subtle separator.

### Measured component styles

- **Primary button** (“Features”): transparent background · text #000000 · radius 9999px · padding 0px · 400 15px PP Neue Montreal Medium
- **Link** (“Start transcribing”): transparent background · text #fafafa · radius 9999px · padding 0px 24px · 400 16px PP Neue Montreal Book · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 25
- **Card** (“Codex New chat Pull requests Scheduled P”): background #121214 · text #292c3d · radius 16px · padding 12px · 400 16px PP Neue Montreal Book
- **Badge** (“Sources”): transparent background · text #ffffff · border 1px solid #2e2e30 · radius 0px · padding 12px 0px 0px 0px · 400 10px Inter
- **Navigation item** (“Features Platforms Resources Pricing Get”): transparent background · text #292c3d · radius 0px · padding 0px · 400 16px PP Neue Montreal Book

## Do

- Use #fafbfc as the dominant light canvas.
- Reserve #050608 for the coding-focused dark chapter.
- Use blue gradients sparingly on primary actions and small identity cues.
- Give product mockups generous surrounding whitespace.
- Use monospaced type for compact technical labels.
- Keep supporting copy muted and visually secondary.

## Don't

- Do not fill broad sections with saturated blue.
- Do not let colors inside product screenshots redefine the brand palette.
- Do not crowd the hero with multiple competing actions.
- Do not use heavy borders or dramatic shadows across every card.
- Do not make all sections the same background tone.
- Do not use dense, decorative typography for technical labels.

## Agent prompt

Build a new Aqua Voice page with a quiet, product-led visual system. Use Cloud Canvas (#fafbfc) for the primary light surfaces and Midnight Ink (#050608) for a focused dark workflow section; use Ice Blue Band (#f2f6fa) only for a subtle transition band. Set headlines and body in a clean Neue Montreal-like sans, with compact monospaced uppercase eyebrows. Structure the page as spacious, aligned content blocks with selective multi-column features and large product-interface mockups. Keep body copy muted, use Soft Hairline (#f0f0f0) for delicate separation, and reserve blue gradient treatment for the main pill CTA. Layer mockups with soft, restrained shadows, not heavy card framing. Treat embedded app content as illustrative evidence and keep its colours contained within the mockup.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column, left-aligned hero on a bright open canvas, with navigation above and broad whitespace around the message. | Primary Windows CTA, Hold-Space usage cue | Minimal top navigation, Blue gradient pill button, Large editorial headline |
| 2 | product-showcase | Centered heading and action above a large dictation-editor mockup, followed by small interface and workflow details. | Start transcribing action, Live editor demonstration | Centered section title, Large product window, Pale product backdrop |
| 3 | feature-grid | Centered headline and copy above a comparison demo, then a three-column row of supporting benefits. | Voice-versus-keyboard comparison, Benefit scanning | Three-column benefit row, Small line illustrations, Light surface |
| 4 | feature-split | Full-width dark section with left-aligned introduction and a multi-column arrangement of coding workflow mockups. | Explore coding workflows, Show editor context | Dark section band, Layered code-editor panels, Technical eyebrow label |
| 5 | stats | Dark two-column outcome block with a compact heading and paired large metrics. | Highlight measurable results, Compare two outcomes | Large metric figures, Subtle horizontal rule, Dark canvas |
| 6 | feature-split | Light productivity section with left-aligned title, large messaging mockup, and adjacent supporting feature details. | Demonstrate polished replies, Show cross-tool context | Pale canvas, Large message-interface window, Supporting side content |
| 7 | stats | Light two-column outcome block with heading and paired metrics aligned across a broad content row. | Summarize time saved, Show average reply speed | Large numeric figures, Minimal labels, Open light background |
| 8 | feature-split | Pale blue-gray section with left-aligned introduction and large document/editor examples arranged side by side. | Explain real-time refinement, Show document output | Soft blue-gray band, Large document mockup, Technical eyebrow label |

## Source CSS custom properties (selected)

```css
--font-mono: "Geist Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--font-code: "Fragment Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--tw-bg-opacity: 1;
```

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