# Valohealth · Design system migration spec

> Source: https://www.valohealth.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent reference for high-end dark-mode design that uses massive typography as its primary visual element.

## 1. Identity DNA

This design system is structured with the precision of a scientific engineering firm's digital manifesto, where every typographic decision and spatial relationship serves a clear communicative purpose. The visual language operates on a principle of stark, monochromatic contrast—a pure black field that allows massive, light-weight typography to function as both information and architecture.

**One-liner:** A stark, premium dark-mode interface that leverages massive typography and a cyan accent to convey scientific authority and high-tech innovation.
**Keywords:** scientific discovery · drug development · engineering · data-driven
**Analogy:** A scientific engineering firm's digital manifesto.

## 2. Color

The color system is radically restrained, built upon a high-contrast monochromatic core of pure black and white. A single, high-chroma cyan accent is deployed with surgical precision, reserved exclusively for key brand messaging to create focal points of maximum chromatic impact.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#151515` | card background |
| `--bg-quiet` | `#1A1A1A` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#A0A0A0` | secondary text |
| `--muted` | `#737373` | placeholder |
| `--muted-soft` | `#4A4A4A` | weak hint |
| `--accent` | `#1CB6E0` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast monochromatic dark mode with a single, high-chroma cyan accent for key brand messaging.

The governing principle is one of absolute discipline: color is information, and its use must be justified by function, never decoration.

## 3. Typography

Typography is the primary visual element, defined by a geometric sans-serif family used at extreme scales in light (300-400) weights to maintain elegance and authority. The typographic voice is established through strict left alignment, large line-heights for readability on dark backgrounds, and uppercase overlines with tracked spacing to categorize content.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 88px | 1.05 | 300 | -2px | Hero headlines |
| h1 | 56px | 1.1 | 300 | -1px | Section headers |
| body-lg | 24px | 1.4 | 400 | 0px | Subheadings and descriptions |
| body | 18px | 1.5 | 400 | 0px | General body text |
| caption | 14px | 1.6 | 400 | 0px | Small text and nav links |
| overline | 12px | 1.2 | 600 | 1.5px | All-caps labels |

**Type rules:**
- Use light (300-400) weights for display text to maintain elegance
- Uppercase overlines with tracked spacing for category labels
- Strict left alignment for all text blocks
- Large line-height for long-form readability on dark backgrounds

## 4. Spacing

Spacing is orchestrated to create a deliberate vertical rhythm, emphasizing content weight through large padding blocks and generous gaps between sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px
- **Rhythm:** A spacious, vertical rhythm driven by large padding blocks (e.g., 40.5px) and generous gaps between sections to emphasize content weight.

## 5. Surfaces

Surfaces are defined by depth and contrast, not ornament. The system relies on the starkness of the background and strategic typography for separation, with shadows and borders used with extreme minimalism.

- **Radius:** sm 2px · md 6px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0,0,0,0.3) 0px 32px 68px 0px
- **Borders:** Extremely minimal; relies on color contrast and spacing rather than visible borders, except for subtle 1px underlines on active elements.

## 6. Layout

The layout skeleton is a full-width dark canvas designed to stage massive typographic blocks as the primary navigational and informational anchors. These are followed by clean, 2x2 photographic grids that maintain the generous spacing and left-aligned structure.

- **Container max:** 1200px
- **Paragraph max:** 720px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width dark canvas with massive typography blocks followed by clean, 2x2 photographic grids.

## 7. Motion & Interaction

Motion philosophy is one of subtle efficiency, using smooth color and opacity transitions to provide immediate, professional feedback. All interactions are standardized to a fast 150ms cubic-bezier curve, prioritizing snappy, unobtrusive responsiveness over complex animation.

- **Durations:** micro 150ms · small 300ms · medium 1000ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and opacity transitions on hover
  - Subtle transform shifts on interactive elements
  - Extended fade-ins for large content blocks

- **Hover:** Subtle color shifts or background opacity changes with a fast 150ms transition.
- **Click:** Immediate feedback with slight scale or opacity reduction.
- **Transition:** Standardized cubic-bezier(0.4, 0, 0.2, 1) for all interactive properties.
- **Keyboard:** Focus states are managed via standard browser outlines, though mostly optimized for mouse-driven scrolling.

## 8. Voice & Don'ts

The editorial voice is authoritative, visionary, and highly professional, favoring bold, declarative headlines with a 'Verb + Noun' structure. The system deliberately avoids cluttered layouts, playful language, and medical jargon that lacks context.

- **Tone:** Authoritative, visionary, and highly professional.
- **Headline style:** Bold, declarative statements using a 'Verb + Noun' structure to convey impact.
- **CTA style:** Direct, action-oriented, often starting with an all-caps overline like 'APPROACH'.
- **Avoid:** Jargon-heavy medical buzzwords without context / Playful or casual language / Cluttered or dense informational layouts

### Don'ts
- ❌ Don't use decorative borders or box shadows — screenshot shows borderless, dark-flat surfaces.
- ❌ Don't use bold display weights — screenshot shows light (300-400) weights for large headers.
- ❌ Don't clutter the layout with multiple accent colors — screenshot shows a single cyan accent (#1CB6E0).
- ❌ Don't use complex, multi-step animations — screenshot shows fast, subtle 150ms micro-interactions.
- ❌ Don't use centered text for long paragraphs — screenshot shows strict left-aligned typography.
- ❌ Don't use bright or light-mode themes — screenshot shows a pure black (#000000) background.

This system intentionally does not use bold display weights, decorative borders, or multiple accent colors, adhering instead to a strict, studio-grade minimalism.

## System Prompt (paste into AI tool)

```
This is a premium, dark-mode biotechnology and AI firm website. The design is defined by a stark black (#000000) background and massive, light-weight (300-400) geometric sans-serif typography that spans the full width of the layout. A single, high-chroma cyan accent (#1CB6E0) is used sparingly to highlight key brand phrases like 'aha' moments. The layout is strictly left-aligned with generous vertical spacing, creating an editorial and authoritative feel. Critical donts: never use decorative borders or shadows, never use bold weights for display text, and never introduce secondary accent colors. The interaction model is minimalist, relying on fast (150ms) color and opacity transitions rather than complex motion. This site represents a 'studio-grade' approach to corporate dark-mode design.
```