Spectrum Wash
#1b66f8Hero accent gradient — applied to a single headline word and the floating torus visual. Cool blue midpoint of the signature violet→blue→teal→lavender ramp
Valo
valohealth.comWebsite preview
The design language
Valo runs on a noir observatory aesthetic: deep-black canvas, a single custom serif-less voice at whisper weight (300), and one luminous blue-teal-violet gradient used as deliberate punctuation rather than decoration. Typography does the heavy lifting — 100px display headlines with tight negative tracking feel like illuminated ink on obsidian, while the rest of the interface stays nearly invisible. The gradient appears in exactly three roles: a single accent word inside a headline, a thin floating ring/torus visual, and a wash at the page foot — never as a button fill or panel background. Components are flat, hairline-bordered, and borderless where possible; interaction is signaled by circular arrow buttons and numbered sequencing, not by color or shadow. Every screen should feel like a page torn from a dark scientific monograph: quiet, confident, with one moment of light.
Color palette
brand
accent
Deep Field
#1e233cFooter band gradient origin — near-black indigo transitioning into brand blue. Defines the bottom-of-page atmospheric shift
Atmospheric Fade
#1951a2Secondary gradient — blue-to-mint wash used in supporting visuals and transitional bands. Cooler, more subdued than the hero spectrum
neutral
Void
#000000Page canvas, hero background, all primary surface area. Sets the dark-stage tone for every screen
Bone
#e5e7ebHairline borders, dividers, and muted secondary text. The workhorse neutral that defines edges without adding visual weight
Paper
#ffffffPrimary headings, body text, nav links, and icon strokes. Maximum contrast against Void for clear information hierarchy
Graphite
#4d4d4dSubtle nav borders and disabled/inactive state lines. Sits between Void and Bone for low-emphasis structural lines
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
100px · 300 · 1 · -2.7px trackingThe quick brown fox jumps
heading-lg
60px · 300 · 1.2 · -0.78px trackingThe quick brown fox jumps
heading
38px · 400 · 1.2 · -0.49px trackingThe quick brown fox jumps
text-30
30px · 300 · 1.33The quick brown fox jumps
heading-sm
24px · 300 · 1.33 · -0.31px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.4The quick brown fox jumps
body
15px · 400 · 1.63The quick brown fox jumps
text-13
13px · 400 · 1.3The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Valo
- Weights
- 300, 400, 700
- Sizes
- 10, 13, 15, 18, 24, 30, 38, 60, 100
- Line height
- 1.0–1.63 by role
- Letter spacing
- -0.0270em, -0.0130em, 0.1000em
- Fallback
- Inter (for 400/700) paired with a thin display weight like Söhne Breit Halbfett or National 2 Thin for 300
- Features
- "clig" on, "liga" on, "ss03" on
Exclusive typeface across all UI: nav links, body copy, section labels, and display headlines. Weight 300 carries headlines and body — the anti-convention whisper-weight creates scientific authority through restraint. Weight 700 is reserved for micro-labels and the few moments that need to anchor a page. The custom cut of this single family is the brand voice.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 45px
- Element gap
- 18-20px
Border radius
icons
9999pxlinks
9999pxbuttons
9999pxSpacing scale
5px7px14px16px18px20px23px26px27px36px41px45px49px50px54px108px135px198px216pxGuidelines
Do
- Set all display and body text in Valo weight 300 — the whisper-weight is the brand voice, not a fallback
- Apply the Spectrum Wash gradient to exactly one word per headline maximum — chromatic type is punctuation, not paint
- Use 9999px radius for every interactive element (buttons, link icons, tags) — circles are the only geometric interaction shape in the system
- Set display headlines at -2.7px letter-spacing (100px) and -0.78px (60px) — the negative tracking tightens large type to feel carved rather than typed
- Use 0.1em letter-spacing on all small-caps labels, nav items, and numbered prefixes — the wide tracking signals scientific precision
- Anchor every section with the uppercase Section Label Tag at 10px — the typographic flag gives pages a magazine-like structure
- Use the 01, 02 numbered pattern for sequential content blocks — sequencing reads as methodical, fitting the discovery narrative
Don’t
- Don't use weight 700 for body copy or long-form paragraphs — the voice is light; 700 belongs to subheadings and micro-labels only
- Don't apply the Spectrum Wash gradient to button backgrounds, panel fills, or large-area surfaces — it belongs on text accents, ring strokes, and the footer band only
- Don't introduce card surfaces, drop shadows, or elevated panels — the canvas stays flat; depth comes from type scale, not from z-axis
- Don't use borders thicker than 1px — the entire system runs on hairlines (Bone at 1px); anything heavier breaks the editorial register
- Don't add a chromatic brand color outside the violet→blue→teal→lavender ramp — the system is intentionally near-monochrome with one gradient family
- Don't center body text or multi-line content — the layout is left-aligned and the measure should align with the headline edge
- Don't use stock photography, emoji, or decorative illustration — visuals are limited to the gradient torus and the footer wash; everything else is type and whitespace
Components
Top Navigation Bar
Global site navigation anchored to top of every pageHorizontal bar on Void (#000000) background. Wordmark "Valo" at 24px weight 400 Paper (#ffffff) flush left. Nav items (Approach, Company, Partnership, News & Insights, Contact) right-aligned at 13px weight 400 Paper with 27px horizontal spacing. 7px top/bottom padding. No background fill, no border below — the negative space defines the bar.
Hero Display Headline
Opening page-level statement, left-aligned on dark canvas100px Valo weight 300 Paper (#ffffff), line-height 1.0, letter-spacing -2.7px. The word "aha" is the only chromatic moment — rendered in the Spectrum Wash gradient (linear 270deg violet→blue→teal→lavender) as inline text. No background, no border. Sets the editorial tone.
Hero Subhead Paragraph
Supporting description under the display headline15px Valo weight 400 Bone (#e5e7eb), line-height 1.63. Max-width constrained to align with headline measure. No label, no link, no decoration — the paragraph is the quiet second beat.
Section Label Tag
Micro-category label introducing each major content section10px Valo weight 400 Paper (#ffffff), letter-spacing 1.0px (0.1em), uppercase. Sits above section content with 18px top padding. Functions as a typographic flag, not a button — no background, no border.
Gradient Torus Visual
Decorative conceptual illustration representing the feedback loop of drug discoveryLarge thin-stroke ring (approximately 400px diameter) rendered with the Spectrum Wash gradient applied as a stroke. Floats on Void canvas to the left of paired content. The only saturated-color shape on the page — its presence is the page's focal anchor.
Numbered Content Block
Sequential feature/item layout with index number and descriptionTwo-column structure. Left column: 13px Valo weight 400 Bone (#e5e7eb) numeral ("01", "02") at 0.1em tracking. Right column: 18px Valo weight 700 Paper subheading, followed by 15px weight 400 Bone body at line-height 1.63. 14px gap between subheading and body. 23px vertical gap between numbered items.
Circle Arrow Link Button
Inline call-to-action for secondary navigation ("Explore our approach", "Join our team")48px circular button (9999px radius) with 1px Bone (#e5e7eb) border on Void background. White right-arrow icon (→) centered inside. Paired with a 18px Valo weight 400 Paper text link to its right with 20px gap. The circle is the system's only geometric interaction primitive — used wherever a click is invited.
Content Section Heading
Mid-page section title introducing a new content block38px Valo weight 300 Paper (#ffffff), line-height 1.2, letter-spacing -0.49px. Left-aligned, sits 36-45px below the preceding section. No underline, no background — weight 300 is the only emphasis needed.
Gradient Footer Band
Atmospheric closing zone with site links and copyrightFull-bleed band with the Atmospheric Fade gradient (linear 90deg #1951a2 → #70dab4) transitioning into the Spectrum Wash tones. Contains the Valo wordmark (24px Paper, left) and a row of footer links (13px Paper, right) at 20px gaps: Privacy Policy, Terms & Conditions, Cookie Consent, Preferences, Twitter, LinkedIn, © line. No top or bottom border — the gradient itself defines the zone.
Hairline Section Divider
Vertical separation between content sections1px solid Bone (#e5e7eb) line, full content-width. No other styling. Used sparingly — most sections breathe on whitespace alone.
Surfaces & elevation
Level 1
Void Canvas
#000000Full-bleed page background — the dominant surface for hero, content, and mid-page sections.
Level 2
Gradient Footer Band
#1b66f8Atmospheric full-width wash at the page foot, blending teal, blue, and violet to close the visual story.
This system intentionally avoids shadows and elevation. Depth is communicated through type scale and whitespace, not z-axis layering. The only layered surface is the gradient footer band, which acts as a horizon line rather than an elevated card. No box-shadows, no blur, no glow.
Layout & imagery
Layout
Max-width 1200px centered content column on a full-bleed #000000 canvas. Hero is left-aligned: large display headline (100px) over a 15px subhead paragraph, all flush to the content column's left edge with generous left padding. Below the hero, sections alternate between text-only blocks and paired text+visual layouts — the gradient torus sits to the left of a two-column content block containing subheading, numbered items, and a circle-arrow link. Section rhythm is set by 45px+ vertical gaps and the occasional hairline divider; no banding colors, no card grids. Navigation is a single top bar with logo left and links right. The page closes with a full-bleed gradient footer band containing footer links — the only moment the canvas shifts from pure black to color.
Imagery
Imagery is minimal and geometric: a single large gradient-stroke torus/ring floats on the hero of feature sections, and a full-bleed gradient band closes the page. No photography, no illustration beyond the ring, no product screenshots. The gradient itself is the visual content — a teal-to-blue-to-violet-to-lavender sweep used as both text fill (on one headline word) and as a thin stroke (on the ring). Iconography is restricted to a single white right-arrow glyph inside circular buttons. Every other visual element is type, hairline, or empty canvas.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff (Paper) - background: #000000 (Void) - border: #e5e7eb (Bone), 1px - accent gradient: linear-gradient(270deg, rgb(158,61,178), rgb(27,102,248), rgb(36,218,217), rgb(179,198,232)) - footer gradient: linear-gradient(90deg, rgb(30,35,60), rgb(10,64,153)) transitioning to the teal-mint wash - primary action: no distinct CTA color **Example Component Prompts** 1. Build a hero section on #000000. Headline at 100px Valo weight 300, #ffffff, line-height 1.0, letter-spacing -2.7px. Render the single word "aha" inline using the Spectrum Wash gradient as the text color. Below: 15px Valo weight 400, #e5e7eb, line-height 1.63, max-width matching the headline measure. No buttons, no images. 2. Build a paired text-and-visual section. Left: a 400px-diameter thin ring (2px stroke) filled with the Spectrum Wash gradient as stroke color, centered vertically. Right: a 38px Valo weight 300 #ffffff section heading at line-height 1.2, followed by a 15px #e5e7eb intro paragraph, then a numbered list (01, 02) at 13px #e5e7eb numerals (0.1em tracking) paired with 18px weight 700 #ffffff subheadings and 15px weight 400 #e5e7eb bodies. Close with a 48px circular ghost button (1px #e5e7eb border, white → arrow icon) paired with an 18px #ffffff text link. 3. Build a full-bleed footer band. Background: linear-gradient(90deg, #1e233c, #0a4099) blending into a teal-violet wash. Left: 24px Valo weight 400 #ffffff wordmark. Right: a row of 13px Valo weight 400 #ffffff links at 20px gaps (Privacy Policy, Terms, Cookie Consent, Preferences, Twitter, LinkedIn, © 2026 Valo Health). No top border — the gradient defines the zone. 4. Build a section label. 10px Valo weight 400 #ffffff, uppercase, letter-spacing 1.0px. Place 36px above its parent content block. No background, no border. 5. Build a top navigation bar. Background: #000000 (transparent over canvas). Left: 24px Valo weight 400 #ffffff "Valo" wordmark. Right: 5 nav items at 13px Valo weight 400 #ffffff with 27px horizontal gaps and 7px top/bottom padding. No background fill, no border-bottom.
Gradient System
Three gradients form the system's chromatic vocabulary, and they share a single hue family (violet → blue → teal → mint → lavender). Usage is strictly rationed: the Spectrum Wash (#9e3db2 → #1b66f8 → #24dad9 → #b3c6e8) lives on exactly one word per page, on the torus stroke, and as the climax of the footer band. The Deep Field (#1e233c → #0a4099) is the footer's opening — near-black indigo easing into brand blue. The Atmospheric Fade (#1951a2 → #70dab4) is a secondary wash for transitional moments. Never stack gradients. Never apply gradients to button fills or panel backgrounds. Treat each gradient use as a budgeted moment — too many, and the system loses its editorial restraint.
Similar brands
Linear
Same dark-canvas + weight-light typography + single-hue accent restraint — Linear's dark mode uses one purple accent against near-black surfaces with whisper-weight display type
Vercel
Identical minimalist dark aesthetic with a single chromatic gradient moment, ultra-thin display headlines, and the same flat-no-elevation philosophy
Arc Browser
Editorial dark-mode sensibility with oversized display type set tight, generous negative space, and circular interaction primitives
Recursion
Fellow AI-bio company with a comparable scientific-monograph-on-black visual register — large light-weight type, restrained color, and torus/loop motifs in hero illustrations
SpaceX
Shares the deep-black canvas, sparse whitespace, and weight-300-400 display typography that reads as engineering-precise rather than marketing-loud
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
