CURATED · OPEN · FREE

Valohealth

A stark, premium dark-mode interface that leverages massive typography and a cyan accent to convey scientific authority and high-tech innovation.

01

Identity DNA

A scientific engineering firm's digital manifesto.

02

Color

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

03

Typography

geometric-sans · monospace

• display88px · 300
• h156px · 300
• body-lg24px · 400
• body18px · 400
• caption14px · 400
• overline12px · 600

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

04

Spacing

A spacious, vertical rhythm driven by large padding blocks (e.g., 40.5px) and generous gaps between sections to emphasize content weight.

05

Surfaces

Extremely minimal; relies on color contrast and spacing rather than visible borders, except for subtle 1px underlines on active elements.

rgba(0,0,0,0.3) 0px 32px 68px 0px

06

Layout

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

07

Motion & Interaction

Smooth color and opacity transitions on hover · Subtle transform shifts on interactive elements · Extended fade-ins for large content blocks

Subtle color shifts or background opacity changes with a fast 150ms transition. · Immediate feedback with slight scale or opacity reduction.

08

Components

• button Primarily text-based links with pill-shaped (9999px radius) hover states or subtle background shifts.
• card Clean, borderless photographic cards that rely on the dark background for separation.
• chip Rarely used; mostly text-based navigational elements.
• input Minimalist, dark-themed inputs with subtle bottom borders.
• hero A massive, typographic-first hero section spanning the full viewport height.

09

Voice & Don'ts

• Tone Authoritative, visionary, and highly professional.
• Headlines Bold, declarative statements using a 'Verb + Noun' structure to convey impact.
• CTAs Direct, action-oriented, often starting with an all-caps overline like 'APPROACH'.

• 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.
• Avoid: Jargon-heavy medical buzzwords without context
• Avoid: Playful or casual language
• Avoid: Cluttered or dense informational layouts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko