---
name: Theseawebreathe
description: "Worth including as a prime example of how to combine cinematic photography with a technical, data-driven UI in an immersive web experience."
version: alpha

colors:
  background: "#083D63"
  primary: "#E5FAFF"
  secondary: "#94E6FB"
  neutral: "#94E6FB"
  line: "rgba(148, 230, 251, 0.5)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "0px"
  display-sm:
    fontFamily: geometric-sans
    fontSize: 44px
    lineHeight: 1.08
    fontWeight: 500
    letterSpacing: "1.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "1.5px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

An immersive, cinematic web experience combining atmospheric photography with data-driven UI elements.

*A mission control dashboard for a deep-sea expedition.*

## Colors

A strict monochromatic blue palette relying on atmospheric photography and light cyan accents to create an immersive, data-rich environment.

- **Background (`#083D63`)** — uses `bg` token
- **Primary text (`#E5FAFF`)** — uses `ink` token
- **Secondary text (`#94E6FB`)** — uses `ink-soft` token
- **Muted (`#94E6FB`)** — uses `muted` token
- **Borders (`rgba(148, 230, 251, 0.5)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- Use uppercase text-transform consistently across all text elements.
- Maintain wide letter-spacing (1.5px+) for smaller text to ensure readability.
- Use a geometric sans-serif for both display and body to maintain a technical feel.

## Layout

Full-viewport canvas with UI elements absolutely positioned at corners and center.

*Rhythm:* Generous spacing to emphasize immersion and prevent data points from feeling cramped.

## Elevation & Depth

- Borders: Thin, 1px borders in light cyan (#94E6FB) or near-white (#E5FAFF) using complex border-shorthand patterns.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Text-based action with corner bracket decorators instead of solid backgrounds.
- **card:** N/A - The layout uses atmospheric imagery rather than traditional card components.
- **chip:** N/A - Status indicators are integrated directly into the text hierarchy.
- **input:** N/A
- **hero:** Full-screen photographic background with a central, radial data visualization and large typographic overlay.

## Do's and Don'ts

**Don't:**
- Don't use solid backgrounds for buttons — screenshot shows text-only actions with corner brackets.
- Don't use small, dense text blocks — screenshot shows large, airy typography with wide letter-spacing.
- Don't use warm or vibrant colors — screenshot shows a strict, cool monochromatic blue palette.
- Don't use rounded corners for UI elements — screenshot shows sharp, zero-radius borders.
- Don't use heavy drop shadows — screenshot shows a completely flat, atmospheric lighting style.
- Don't use mixed font styles — screenshot shows a consistent use of geometric sans-serif for both display and body.

---

## System Prompt (paste into AI agent)

```
The site is an immersive, cinematic web experience for the Blue Marine Foundation. It uses a strict monochromatic palette of deep ocean blue (#083D63) and light cyan (#94E6FB / #E5FAFF) accents. The typography is exclusively geometric sans-serif, displayed in uppercase with generous letter-spacing to maintain a technical, data-driven aesthetic. Critical design rules: avoid any warm colors, use text-only actions with corner brackets instead of solid buttons, and maintain a spacious, atmospheric layout that prioritizes visual immersion over traditional information density. The overall feel is a high-tech mission control interface overlaid on beautiful ocean photography.
```