---
name: Valohealth
description: "This site is an excellent reference for high-end dark-mode design that uses massive typography as its primary visual element."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#A0A0A0"
  tertiary: "#1CB6E0"
  neutral: "#737373"
  bg-soft: "#151515"
  bg-quiet: "#1A1A1A"
  muted-soft: "#4A4A4A"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 88px
    lineHeight: 1.05
    fontWeight: 300
    letterSpacing: "-2px"
  h1:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 300
    letterSpacing: "-1px"
  body-lg:
    fontFamily: geometric-sans
    fontSize: 24px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  overline:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "1.5px"

rounded:
  sm: 2px
  md: 6px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A scientific engineering firm's digital manifesto.*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#A0A0A0`)** — uses `ink-soft` token
- **Accent (`#1CB6E0`)** — uses `accent` token
- **Muted (`#737373`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

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

## Elevation & Depth

- 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.

## Shapes

- `sm`: 2px
- `md`: 6px
- `lg`: 12px
- `pill`: 9999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```