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

# Alveos Labs · Design System

> Breath-led health, in a calm blue frame.

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

Alveos introduces a wearable respiratory monitor through a calm, photography-led product story. Pale blue section bands, restrained typography, and a dark technical interlude balance approachable wellness with clinical credibility.

## North star

Let calm blue surfaces and real product imagery explain the technology, keeping interface chrome quiet and the story spacious.

## Overview

The page uses a near-white canvas (#f7fafc) as a quiet baseline, punctuated by broad pale-blue bands (#def0ff and #bbddff) and a deep navy technical section (#05102b). The palette stays cool and restrained; warm skin tones and blue-gray photography belong to the product imagery rather than the interface identity. Hanken Grotesk carries the page throughout, with regular-weight headings, compact explanatory copy, and white text over the photographic hero. Layout alternates centered introductions and feature-card rows with left-aligned text beside large media, giving the long product story a measured rhythm. Generous open areas let each section breathe, while rounded media and cards soften the clinical subject matter. The dark footer anchors the page, using muted gray text and a large wordmark as a final brand gesture. Controls remain visually simple and pill-shaped.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cloud Canvas | `#f7fafc` | `--color-cloud-canvas` | surface | Main page canvas and recurring light background behind text-led sections. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Feature cards and white text seen over photography; also used in card surfaces. |
| Ice Halo | `#ebfaff` | `--color-ice-halo` | accent | Pale cyan gradient color detected in decorative gradient detail, not a dominant section fill. |
| Mist Blue | `#def0ff` | `--color-mist-blue` | surface | Light blue feature-section band and soft background panels. |
| Graphite Copy | `#262628` | `--color-graphite-copy` | neutral | Secondary dark heading and body-text tone. |
| Sky Blue | `#bbddff` | `--color-sky-blue` | surface | Prominent blue bands behind how-it-works and other feature content. |
| Night Ink | `#07090e` | `--color-night-ink` | semantic | Dark footer and inverse CTA surface, used for contrast against light content. |
| Footer Silver | `#d4d4d4` | `--color-footer-silver` | neutral | Muted footer copy on the dark background. |
| Midnight Navy | `#05102b` | `--color-midnight-navy` | surface | Deep navy technical feature section with light copy and product imagery. |
| Soft Black | `#1a1a1a` | `--color-soft-black` | semantic | Primary dark headings and readable body copy on light surfaces. |
| Pewter Gray | `#b5b6b7` | `--color-pewter-gray` | neutral | Secondary footer text and understated dark-footer details. |
| Carbon Text | `#111112` | `--color-carbon-text` | neutral | Additional dark text tone used for headings and copy. |
| Slate Blue | `#96b1cc` | `--color-slate-blue` | accent | Small supporting visual tone, not a defining interface surface. |
| Ink Blue | `#192642` | `--color-ink-blue` | neutral | Minor deep-blue footer detail, distinct from the main navy section. |

### Semantic aliases

`--color-canvas` → `#f7fafc` (Cloud Canvas) · `--color-surface` → `#def0ff` (Mist Blue) · `--color-surface-2` → `#bbddff` (Sky Blue) · `--color-surface-3` → `#07090e` (Night Ink) · `--color-surface-4` → `#05102b` (Midnight Navy) · `--color-text` → `#1a1a1a` (Soft Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#d4d4d4` (Footer Silver)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1a1a` | `#f7fafc` | 16.6:1 | AAA |
| `#1a1a1a` | `#def0ff` | 14.93:1 | AAA |
| `#1a1a1a` | `#bbddff` | 12.35:1 | AAA |
| `#1a1a1a` | `#07090e` | 1.14:1 | fail |
| `#ffffff` | `#f7fafc` | 1.05:1 | fail |
| `#ffffff` | `#def0ff` | 1.17:1 | fail |
| `#ffffff` | `#bbddff` | 1.41:1 | fail |
| `#ffffff` | `#07090e` | 19.92:1 | AAA |
| `#d4d4d4` | `#f7fafc` | 1.41:1 | fail |
| `#d4d4d4` | `#def0ff` | 1.27:1 | fail |

### Gradients

- `radial-gradient(100% 124% at 2.7% 4.7%, rgba(207, 243, 255, 0.41) 0%, rgba(255, 255, 255, 0.04) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Hanken Grotesk | `--font-body` | webfont | 400, 600, 500, 700 | Site-wide headings, body copy, captions, and interface text. | Inter |

- **Hanken Grotesk:** Use natural sentence case, mostly regular weights; headings are clean and lightly tracked, with compact line spacing.

### Type scale — Major Third (ratio ≈ 1.236, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 400 | 1.05 | -0.02em | — | Hanken Grotesk | Hero headline over the full-bleed portrait, set in white. |
| h2 | 34px | 500 | 1.15 | 0 | — | Hanken Grotesk | Major centered or split feature-section headings. |
| h3 | 32px | 400 | 1.15 | 0 | — | Hanken Grotesk | Feature and product-story subheads. |
| h4 | 24px | 400 | 1.2 | 0 | — | Hanken Grotesk | Smaller feature-card and supporting content headings. |
| body | 18px | 400 | 1.6 | 0 | — | Hanken Grotesk | Explanatory copy, product benefits, and FAQ content. |
| caption | 16px | 400 | 1.5 | 0 | — | Hanken Grotesk | Compact labels, media notes, and secondary interface details. |

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

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 8, 10, 12, 16, 20, 25, 28, 30, 32, 40, 50, 80, 100 px.
- Section rhythm 32px · element gap 10px · card padding 23px · max content width 1376px.

The long page alternates full-width color bands with contained content blocks, using a measured page max width of 1376px. Centered introductions lead into four-column feature cards; technical storytelling shifts to a two-column text-and-media arrangement. Large blank intervals around some content create a slow, editorial scroll rhythm. Density is generally compact inside cards and footer columns, but spacious between major sections. Align text to the left when paired with imagery and center short section introductions.

## Shape & elevation

- Radius: button `9999px` · card `40px` · media `24px` · link `9999px` · xs `10px` · sm `24px` · md `25px` · lg `32px` · xl `40px` · pill `9999px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0.17) 0px 0px 0px -1.875px, rgba(0, 0, 0, 0.06) 0px 0px 0px -3.75px`

The overall treatment is mostly flat: broad color bands and white cards define hierarchy rather than visible outlines. Use rounded card and media corners, with subtle separation and little or no shadow. Preserve strong layering only where text overlays the hero photo or the dark footer contains its legal notice panel.

## Imagery

Use large, natural product photography featuring people wearing or demonstrating the device, with close crops that make the monitor legible. The hero image fills the viewport and carries white copy directly over the photo. Supporting imagery includes rounded video and product/app cards. Keep treatment realistic and soft; blue-gray skies and clothing recur, while warm skin tones remain photographic rather than UI colors.

## Components

### Hero overlay

Full-bleed portrait photography with a white, left-aligned two-line headline and concise supporting text over the image.

### Section introduction

Centered short heading and compact paragraph on a light or blue band, surrounded by open space.

### Feature cards

White cards with large rounded corners, concise benefit copy, and product or app imagery where available.

### Technical split

Deep navy section pairing light copy on the left with rounded, prominent product-use media on the right.

### Pill CTA

Compact pill control; dark fill for the footer question CTA and pale fill for the science link treatment.

### FAQ list

Light-background question rows with restrained separators and a small disclosure chevron.

### Dark footer

Near-black footer with legal note panel, muted link columns, fine divider, and oversized Alveos wordmark.

### Measured component styles

- **Primary button** (“See the science”): background #dce3f2 · text #0000ee · radius 40px · padding 14px 30px · 400 12px sans-serif
- **Secondary button** (“Ask a question!”): background #07090e · text #0000ee · radius 40px · padding 8px 26px · 400 12px sans-serif
- **Link** (“Read the preprint”): transparent background · text #0000ee · radius 40px · padding 14px 30px · 400 12px sans-serif
- **Card** (“Magnetic attachment. Zero hassle. Alveos”): background #ffffff · text #000000 · radius 40px · padding 30px 30px 0px 30px · 400 12px sans-serif

## Do

- Use the near-white canvas as the default page background.
- Alternate pale-blue bands with restrained light sections.
- Use real people and device photography as the primary visual evidence.
- Keep product explanations concise and clearly grouped.
- Pair dark navy technical content with light, readable text.
- Use rounded cards and pill-shaped controls sparingly.

## Don't

- Do not introduce bright interface colors absent from the measured palette.
- Do not treat photographic blue-gray tones as core brand tokens.
- Do not add heavy shadows or prominent borders to every card.
- Do not crowd the spacious transitions between major sections.
- Do not use decorative display type in place of Hanken Grotesk.
- Do not let CTA styling compete with the hero photography.

## Agent prompt

Build a new Alveos-style health product page with Hanken Grotesk throughout and a calm, editorial rhythm. Use Cloud Canvas (#f7fafc) for the base, Mist Blue (#def0ff) and Sky Blue (#bbddff) for broad section bands, and Midnight Navy (#05102b) for technical content. Keep text mostly Soft Black (#1a1a1a), switching to white on photography and dark surfaces. Lead with authentic, close-cropped product photography; use rounded media, concise copy, centered section introductions, and occasional text-and-image splits. Keep cards mostly flat and spacious, with rounded corners and restrained pill controls. Finish with a Night Ink (#07090e) footer, muted gray text, compact link columns, and a strong wordmark. Avoid extra colors, decorative effects, and dense interface chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed photographic hero with a lower-left text overlay and a compact navigation bar. | Primary pre-order link, Brand and section navigation | Full-width portrait photo, White overlay copy, Minimal top navigation |
| 2 | footer | Dark full-width footer with a legal notice panel above compact multi-column links and a large wordmark. | Product safety disclosure, Grouped site links, Legal and company navigation | Night Ink background, Muted gray copy, Rounded notice panel, Oversized wordmark |

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