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

# Valo · Design System

> Quiet black canvas, luminous science

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

Valo’s homepage pairs a near-black canvas and restrained typography with vivid scientific gradients and candid team photography. Sparse, carefully aligned sections give the company’s research, partnership, and people equal weight.

## North star

Let a quiet black canvas carry the story; use white type, fine rules, and vivid gradients only to illuminate scientific ideas.

## Overview

A near-black canvas carries almost the entire page, letting white typography and hairline rules define the structure without conventional card surfaces. Bright colour is reserved for the hero’s highlighted phrase, scientific ring graphics, and broad atmospheric gradient imagery; these accents feel luminous against black rather than decorative. The single Valo sans-serif family moves from very light, large display headlines to compact body copy. Navigation and section labels use small uppercase lettering with generous tracking, while headlines stay sentence case. Content alternates between spacious two-column feature splits and a company photo grid, with thin horizontal rules marking transitions. The photography is candid and laboratory-centred, presented in crisp rectangular crops. Generous black intervals keep the page calm despite its long scroll, and simple circular arrow links provide repeated interaction cues. A pale gradient footer is the deliberate closing contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal White | `#ffffff` | `--color-signal-white` | surface | Headlines, navigation, body copy, and the light circular arrow-link buttons. |
| Deep Canvas | `#000000` | `--color-deep-canvas` | neutral | Dominant page canvas and footer text colour; anchors the dark, uninterrupted sections. |
| Midnight Indigo | `#1e233c` | `--color-midnight-indigo` | accent | Dark starting tone in a scientific section gradient, not a general surface colour. |
| Discovery Blue | `#0a4099` | `--color-discovery-blue` | accent | Blue stop in section and footer gradients; supports luminous science-themed visual accents. |
| Graphite Rule | `#4d4d4d` | `--color-graphite-rule` | semantic | Subtle navigation border and divider detail against the black canvas. |
| Research Blue | `#1951a2` | `--color-research-blue` | accent | Gradient stop in the footer and related luminous accent treatment. |
| Mint Signal | `#70dab4` | `--color-mint-signal` | accent | Bright gradient stop and ring-illustration highlight; primarily an accent, not a text colour. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-surface` → `#ffffff` (Signal White) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#000000` (Deep Canvas) · `--color-border` → `#4d4d4d` (Graphite Rule) · `--color-accent` → `#0a4099` (Discovery Blue) · `--color-accent-2` → `#1951a2` (Research Blue) · `--color-accent-3` → `#70dab4` (Mint Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#0a4099` | `#000000` | 2.21:1 | fail |
| `#0a4099` | `#ffffff` | 9.52:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(30, 35, 60), rgb(10, 64, 153))`
- `linear-gradient(90deg, rgb(25, 81, 162), rgb(112, 218, 180))`
- `linear-gradient(270deg, rgb(158, 61, 178), rgb(27, 102, 248), rgb(36, 218, 217), rgb(179, 198, 232))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Valo | `--font-body` | webfont | 300, 400, 700 | Site-wide typeface for headlines, navigation, body copy, labels, and links. | Manrope |

- **Valo:** Use light weights for large headlines and regular for copy; navigation and eyebrow labels are uppercase with loose tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.461, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 300 | 1 | -0.027em | — | Valo | Oversized hero statement, set light and tightly tracked. |
| h1 | 60px | 300 | 1 | 0 | — | Valo | Primary page or section headline. |
| h2 | 38px | 400 | 1.2 | -0.013em | — | Valo | Major feature and company-section headings. |
| h3 | 30px | 300 | 1.33 | 0 | — | Valo | Supporting feature titles and prominent subheads. |
| h4 | 24px | 300 | 1.33 | 0 | — | Valo | Smaller supporting headings within feature content. |
| body | 15px | 400 | 1.4 | 0 | — | Valo | Descriptions, explanatory copy, and supporting paragraphs. |
| caption | 10px | 400 | 1.4 | 0.1em | uppercase | Valo | Compact uppercase captions and section labels. |
| nav | 10px | 400 | 1.4 | 0.1em | uppercase | Valo | Small uppercase primary navigation links. |
| eyebrow | 10px | 400 | 1.4 | 0.1em | uppercase | Valo | Small uppercase labels such as APPROACH and PARTNERSHIP. |

OpenType features in use: `"clig", "liga", "ss03"`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 5, 7, 14, 16, 18, 23, 27, 36, 41, 45, 49, 50, 54, 108, 135, 198 px.
- Section rhythm 41px · element gap 18px · card padding — · max content width 1400px.

The measured page max width is 1400px; at the supplied desktop view, content aligns to consistent outer margins. A single-column, full-bleed hero leads into two-column feature splits, then a two-column company image grid and a three-column text row. Section labels and hairline rules mark the starts of major blocks. The measured spacing system is comfortable, with section gaps and element gaps guiding rhythm; preserve generous black breathing room rather than adding dense cards. The footer switches to a light, full-width band.

## Shape & elevation

- Radius: link `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is essentially flat: no measured shadows, raised cards, or layered panels define the system. Thin horizontal rules and subtle navigation borders separate content on the black canvas. Contrast comes from white type, gradient accents, and occasional full-bleed imagery; keep overlapping layers restrained.

## Imagery

Use candid laboratory and team photography in clean rectangular crops, with the company section arranged as a compact image grid. Scientific concepts appear as fine-line ring and network illustrations with luminous gradient edges. A wide, soft multicolour gradient panel supports a centered statement; avoid treating imagery as a tiled product catalogue or adding decorative photography without a clear narrative role.

## Components

### Primary navigation

White Valo wordmark at left and a concise horizontal set of links at right; use small uppercase, tracked navigation styling where shown.

### Section eyebrow

Small uppercase label aligned to the content edge, often followed by a thin horizontal rule.

### Feature split

Two-column section pairing a scientific illustration or image with a headline, short copy, and supporting details.

### Arrow link

White circular icon button with a dark arrow, followed by a white text link; the measured link radius is 9999px.

### Company image grid

Rectangular team and laboratory photographs arranged in two columns, with narrow dark separations.

### Gradient statement panel

Wide, softly coloured gradient image panel with a centered white statement and no raised-card treatment.

### Footer band

Full-width pale gradient closing area with the Valo mark and compact legal or utility links.

### Measured component styles

- **Link** (“Explore our approach”): transparent background · text #ffffff · radius 9999px · padding 0px · 400 18px Valo
- **Navigation item** (“Approach Company LEADERSHIP CAREERS Part”): transparent background · text #ffffff · radius 0px · padding 0px · 400 15px Valo

## Do

- Keep the main canvas black and uninterrupted.
- Use white for primary text and navigation.
- Reserve gradients for scientific accents and broad image panels.
- Set large headlines in a light weight with sentence-case wording.
- Separate sections with fine rules and ample negative space.
- Use candid laboratory and team photography in clean crops.

## Don't

- Do not introduce unmeasured colours as brand tokens.
- Do not put every content block into a card.
- Do not add heavy shadows or conspicuous elevation.
- Do not use gradients as a substitute for body-text contrast.
- Do not crowd the layout with dense copy or extra UI.
- Do not replace the restrained visual system with decorative icons.

## Agent prompt

Build a new Valo-style health technology page around a near-black canvas (#000000) with Signal White (#ffffff) typography. Use the Valo sans-serif or a close free substitute such as Manrope; make display headlines light and oversized, with compact uppercase, tracked navigation and section labels. Reserve Midnight Indigo (#1e233c), Discovery Blue (#0a4099), Research Blue (#1951a2), and Mint Signal (#70dab4) for restrained gradients, scientific rings, and imagery—not general text or surfaces. Organize content into spacious two-column feature splits, separated by thin graphite rules (#4d4d4d), then use candid lab and team photography in rectangular crops. Keep surfaces flat, avoid shadows and repeated cards, and use simple white circular arrow links. Finish with a full-width pale gradient footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed black hero with left-aligned statement, navigation above, and subtle line graphics. | Primary navigation, Prominent brand statement | Black canvas, Large light headline, Gradient-highlighted phrase, Fine-line illustration |
| 2 | feature-split | Two-column section with a ring illustration opposite text and explanatory list. | Explore approach link, Numbered supporting points | Section eyebrow, Hairline divider, Gradient ring graphic, White arrow link |
| 3 | product-showcase | Full-bleed section with a wide gradient statement panel. | Single-message interlude | Soft multicolour gradient, Centered white statement |
| 4 | feature-split | Two-column text and illustration composition with generous black space. | Partnership information link | Section eyebrow, Horizontal rule, Network-ring illustration, Circular arrow link |
| 5 | gallery | Section label above a two-column grid of rectangular photographs. | Visual company introduction | Hairline divider, Laboratory and team photography, Narrow dark gutters |
| 6 | feature-grid | Three aligned text columns, each with a short heading and supporting paragraph. | Three-point narrative | Thin top rules, White headings, Compact body copy |
| 7 | cta | Two-column call to action with headline left and copy plus link right. | Join-the-team link | Large white heading, Circular arrow link, Open black layout |
| 8 | footer | Full-width light gradient footer with brand mark and compact utility links. | Legal and utility navigation | Pale multicolour gradient, Dark Valo mark, Small footer links |

## Source CSS custom properties (selected)

```css
--color-text: #fff;
--color-text-light: #828282;
--color-text-hover: #1cb6e0;
--color-bg: #000;
--color-icon-bg: #fff;
--color-icon: #000;
--color-border-light: hsla(0,0%,100%,0.3);
--bg-gradient: linear-gradient(90deg,#1951a2,#70dab4);
--icon-color: #000;
--icon-bg-color: #fff;
--tw-text-opacity: 1;
--homepage-anim-theme-color-bg-fill: #000;
```

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