# Atmos Leeroy Ca · Design system migration spec

> Source: https://atmos.leeroy.ca  ·  Curated by OpenDesign  ·  en

> This site exemplifies premium editorial design with its bold use of scale (200px wordmark), restrained color palette, and atmospheric gradient that creates immediate visual impact and emotional resonance.

## 1. Identity DNA

The Atmos Leeroy system is architected as a luxury digital gallery, an ethereal space where typography and gradient function as primary structural elements. Its identity is defined by the tension between a massive, authoritative serif wordmark and a serene, atmospheric blue-to-white gradient that envelops all content. The result is an immersive, surrealist composition that feels both expansive and meticulously controlled.

**One-liner:** An immersive, surrealist digital experience blending bold serif typography with atmospheric gradients
**Keywords:** Surrealist · Atmospheric · Immersive · High-end · Experimental
**Analogy:** A luxury digital magazine or gallery space that feels ethereal and expansive

## 2. Color

The palette is deliberately monochromatic, built upon a single atmospheric gradient from deep blue to pure white. This continuous color field replaces traditional solid backgrounds, making the environment itself the primary visual feature.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0A1A99` | main background |
| `--bg-soft` | `#C5D2F0` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#000000` | secondary text |
| `--muted` | `#FFFFFF` | placeholder |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** Ethereal blue-to-white gradient evokes an atmospheric, surreal sky with high-contrast white typography

The core principle is restriction: the gradient and its white text are the entire chromatic vocabulary, demanding that form and scale carry all expressive weight.

## 3. Typography

Typographic voice is split between two distinct roles: a **Didone serif** delivers the monumental brand presence, while the humanist sans-serif DM Sans handles all functional text and UI elements. This pairing creates a clear hierarchy between the dramatic, gallery-like headlines and the clean, legible interface.

- **Display:** didone-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 200px | 1.15 | 400 | 0px | Main brand wordmark |
| heading | 50px | 1.2 | 700 | 0px | Section headings |
| subtitle | 30px | 1.15 | 400 | 0px | Rotating circular text |
| body | 25px | 1.15 | 400 | 0px | Body text and UI elements |
| small | 20px | 1.15 | 400 | 0px | Button labels and secondary text |

**Type rules:**
- Use DM Sans for body text and UI elements
- Use Didone serif (like Times New Roman or _NewYork) for the main brand wordmark
- Maintain strict uppercase for navigation and circular text elements

## 4. Spacing

Rhythm is defined by generous, deliberate emptiness. Padding values of 144px and 250px are used to create immersive hero sections that breathe, framing content as curated objects within the atmospheric space.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 144 / 250 px
- **Rhythm:** Generous padding with 144px and 250px spacing for immersive hero sections

## 5. Surfaces

Depth is achieved not through shadow, but through the illusion of the gradient field itself. Borders are minimal—thin, 1px lines in white or black that provide subtle separation without interrupting the surface.

- **Radius:** sm 4px · md 8px · lg 12px · pill 50px
- **Borders:** 1px bottom borders in white or black, pill-shaped buttons with 50px radius

## 6. Layout

The structural skeleton is a single-column, full-bleed composition. Content is centered within the immersive gradient, with vertical spacing used to delineate sections and create a sense of measured, editorial pacing.

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

**Skeleton:** Full-bleed gradient background with centered content and generous vertical spacing

## 7. Motion & Interaction

Motion philosophy prioritizes fluidity and environmental ambiance over discrete action feedback. Background and opacity changes use slow, linear transitions to feel atmospheric, while interactive elements employ a smoother, quicker cubic-bezier easing.

- **Durations:** micro 220ms · small 500ms · medium 1000ms
- **Easing:** `cubic-bezier(0.215, 0.61, 0.355, 1)`
- **Patterns:**
  - 1s linear transitions for background and opacity changes
  - 0.5s cubic-bezier easing for interactive elements
  - Continuous rotation animation for circular text element

- **Hover:** Subtle transitions with 0.5s cubic-bezier timing
- **Click:** Standard pointer interactions with grab cursor for certain elements
- **Transition:** All properties transition by default, with specific timing for backgrounds and opacity
- **Keyboard:** Standard focus management for interactive elements

## 8. Voice & Don'ts

The editorial voice is ethereal, sophisticated, and slightly mysterious. It avoids clutter and aggression, favoring minimal, uppercase text for calls-to-action and relying on scale and composition for impact.

- **Tone:** Ethereal, sophisticated, and slightly mysterious
- **Headline style:** Massive serif wordmarks with clean sans-serif subtitles
- **CTA style:** Minimal uppercase text in pill-shaped containers
- **Avoid:** Cluttered interfaces / Busy backgrounds / Complex navigation patterns / Aggressive call-to-actions

### Don'ts
- ❌ Don't use cluttered layouts — screenshot shows generous whitespace and centered minimal composition
- ❌ Don't use bright accent colors — screenshot shows only blue-to-white gradient with white typography
- ❌ Don't use sans-serif for the main wordmark — screenshot shows serif typography for 'ATMOS'
- ❌ Don't use small text for primary messaging — screenshot shows 200px display type for the main brand
- ❌ Don't use sharp corners on interactive elements — screenshot shows 50px pill-shaped buttons
- ❌ Don't use complex navigation — screenshot shows single 'EXPLORE' call-to-action button

The system deliberately forgoes complex navigation, bright accent colors, and cluttered layouts to preserve its singular, immersive atmosphere.

## System Prompt (paste into AI tool)

```
This is an immersive, surrealist digital experience that uses a blue-to-white atmospheric gradient with massive serif typography. The design centers on a 200px 'ATMOS' wordmark in a Didone serif typeface, paired with humanist-sans DM Sans for body text and UI elements. The palette is restricted to gradient blues (#0A1A99 to #C5D2F0 to #FFFFFF) with pure white (#FFFFFF) text and black (#000000) accents. Critical design principles include generous spacing (144px and 250px padding), pill-shaped buttons (50px radius), and smooth 1s linear transitions. Key don'ts: avoid cluttered layouts, don't use sans-serif for the main wordmark, and don't introduce bright accent colors that break the ethereal gradient aesthetic. The system uses DM Sans for functional text and serif fonts for display typography, creating a premium editorial feel.
```