# Theseawebreathe · Design system migration spec

> Source: https://theseawebreathe.com  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of how to combine cinematic photography with a technical, data-driven UI in an immersive web experience.

## 1. Identity DNA

The design system operates like a mission control dashboard for a deep-sea expedition. Every component serves a singular purpose: to maintain immersion while surfacing critical data points from the oceanic environment.

**One-liner:** An immersive, cinematic web experience combining atmospheric photography with data-driven UI elements.
**Keywords:** ocean · immersive · data-viz · connection · environmental
**Analogy:** A mission control dashboard for a deep-sea expedition.

## 2. Color

A strict monochromatic blue palette forms the foundation, relying on atmospheric photography as the primary visual texture. Light cyan accents provide necessary contrast for interactive elements and data highlights.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#083D63` | main background |
| `--ink` | `#E5FAFF` | body text |
| `--ink-soft` | `#94E6FB` | secondary text |
| `--muted` | `#94E6FB` | placeholder |
| `--line` | `rgba(148, 230, 251, 0.5)` | divider |

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

The principle is subtraction: color exists only to serve function and atmosphere, never to decorate.

## 3. Typography

Typography is exclusively geometric sans-serif, rendered in uppercase to maintain a technical, instrument-like read. Wide letter-spacing on smaller text ensures legibility against photographic backgrounds while reinforcing the data-viz aesthetic.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 500 | 0px | Primary headline |
| display-sm | 44px | 1.08 | 500 | 1.5px | Secondary headline and large UI text |
| body | 14px | 1.5 | 400 | 1.5px | UI labels and metadata |

**Type rules:**
- 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.

## 4. Spacing

Generous spacing rhythm prevents data points from feeling cramped, allowing the atmospheric photography to breathe between interface elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous spacing to emphasize immersion and prevent data points from feeling cramped.

## 5. Surfaces

Surfaces are defined by thin, 1px borders in light cyan or near-white, creating a delicate framework that doesn't compete with the photographic depth. There are no drop shadows—the interface appears to float within the oceanic atmosphere rather than cast upon it.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Thin, 1px borders in light cyan (#94E6FB) or near-white (#E5FAFF) using complex border-shorthand patterns.

## 6. Layout

The layout is a full-viewport canvas with UI elements absolutely positioned at the corners and center. This creates a cinematic frame where the ocean imagery remains unobstructed while critical data is always accessible at key focal points.

- **Container max:** 1920px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion follows a principle of natural fluidity, using a custom cubic-bezier curve for all transitions. Animations are subtle and purposeful—smooth rotations for progress indicators, cascading fades for data points—never decorative.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)`
- **Patterns:**
  - Smooth rotational animations for radial progress indicators.
  - Cascading fade-ins for sequential data points.
  - Elegant page transitions to maintain the cinematic atmosphere.

- **Hover:** Subtle color shifts or structural reveals on interactive elements.
- **Click:** Initiates the next phase of the immersive journey.
- **Transition:** cubic-bezier(0.16, 1, 0.3, 1) for a fluid, natural feel.
- **Keyboard:** Standard focus rings and logical tab order for accessibility.

## 8. Voice & Don'ts

The editorial voice is technical yet poetic, combining precise data language with environmental awareness. Headlines are bold, uppercase, and atmospheric, often split across multiple lines for dramatic effect.

- **Tone:** Technical yet poetic, combining data points with environmental awareness.
- **Headline style:** Bold, uppercase, and atmospheric, often split across multiple lines.
- **CTA style:** Minimalist and directive, framed by technical corner brackets.
- **Avoid:** Warm colors / Playful language / Dense text blocks / Cluttered UI elements / Bright, saturated gradients

### Don'ts
- ❌ 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.

The system deliberately avoids warm colors, playful language, dense text, and any UI element that might break the immersive, cinematic illusion.

## System Prompt (paste into AI tool)

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