Skip to content
Library

Valo. Weight-300 typography floats on pure black while a single teal-violet gradient passes through like a laser line across the room.

  • AI
  • Dark theme
  • 7 colors
  • 1 typeface

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.

Screenshot of Valo
Captured from valohealth.com on October 11, 2026

Valo design system

Valo

Brand1

  • Hero accent gradient — applied to a single headline word and the floating torus visual. Cool blue midpoint of the signature violet→blue→teal→lavender ramp

Accent2

  • Footer band gradient origin — near-black indigo transitioning into brand blue. Defines the bottom-of-page atmospheric shift

  • Secondary gradient — blue-to-mint wash used in supporting visuals and transitional bands. Cooler, more subdued than the hero spectrum

Neutrals4

  • Page canvas, hero background, all primary surface area. Sets the dark-stage tone for every screen

  • Subtle nav borders and disabled/inactive state lines. Sits between Void and Bone for low-emphasis structural lines

  • Hairline borders, dividers, and muted secondary text. The workhorse neutral that defines edges without adding visual weight

  • Primary headings, body text, nav links, and icon strokes. Maximum contrast against Void for clear information hierarchy

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper on Void

21.00 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.