---
title: "ATMOS design system"
variant: extended
source: https://atmos.leeroy.ca/
captured_at: 2026-10-12
theme: light
industry: entertainment
generator: Design DNA (https://four.wiralomi.com/style/atmos-leeroy-ca)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# ATMOS · Design System

> A surreal flight through aviation

**Theme:** light · **Industry:** entertainment · **Source:** https://atmos.leeroy.ca/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

ATMOS presents aviation as an atmospheric, surreal experience, led by a monumental wordmark over a blue-to-pale gradient. Its measured content section is a quiet white field, with references and links providing a restrained editorial close.

## North star

Let one monumental serif identity sit within generous space, and use the blue atmospheric field as imagery rather than an unsupported CSS color token.

## Overview

The visual identity is defined by the contrast between an immersive blue-gradient opening and a broad, clean white content field. The screenshot’s gradient blends saturated cobalt and periwinkle into a very pale lavender-white; those hues are visible in the hero artwork, not in the measured CSS palette, so treat them as image or media colors rather than inventing brand tokens. The white measured canvas frames the later reference content. A very large, delicate high-contrast serif wordmark anchors the hero, with a small circular typographic detail orbiting its edge; a compact white pill CTA sits below. Typography pairs the display face _NewYork with DM Sans for supporting content. The page is centered and unusually spacious, allowing the opening identity to feel like an immersive title card and the lower section to read as a quiet editorial pause. Keep controls and decoration subordinate to the wordmark and atmospheric color field.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas White | `#ffffff` | `--color-canvas-white` | neutral | Measured page canvas and text, link, and border token; also the visible hero CTA surface and the lower reference section. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-text` → `#ffffff` (Canvas White) · `--color-border` → `#ffffff` (Canvas White)

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DM Sans | `--font-body` | webfont | 400, 700 | Supporting headings, body copy, and links in the reference content. | DM Sans |
| _NewYork | `--font-display` | webfont | 400 | Oversized ATMOS wordmark and uppercase primary heading. | Cormorant Garamond |

- **DM Sans:** Measured at regular and bold weights; body and link treatments are regular, with uppercase bold section headings.
- **_NewYork:** Use a high-contrast serif feel with regular weight; the primary heading is uppercase, while the display wordmark remains refined and expansive.

### Type scale — Custom (ratio ≈ 1.778, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 200px | 400 | 1.15 | 0 | — | _NewYork | Oversized ATMOS wordmark in the immersive opening. |
| h1 | 50px | 400 | 1.15 | 0 | uppercase | _NewYork | Uppercase primary section heading. |
| h2 | 30px | 700 | 1.15 | 0 | uppercase | DM Sans | Bold uppercase section labels such as REFERENCES. |
| h3 | 25px | 400 | 1.5 | 0 | — | DM Sans | Supporting editorial headings and resource titles. |
| body | 20px | 400 | 1.5 | 0 | — | DM Sans | Introductory copy and explanatory reference text. |
| link | 20px | 400 | 1.5 | 0 | — | DM Sans | Resource links and the Leeroy's Playground attribution. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 10, 20, 30, 42, 50, 100, 134 px.
- Section rhythm 100px · element gap — · card padding — · max content width 684px.

The measured content uses a single-column structure with a spacious density and a 684px maximum content width. The opening reads as a centered, full-screen title card, with the wordmark and CTA aligned on the central axis. Below it, the page transitions to a large white field; the measured section begins at the left edge of its content alignment and groups an introductory paragraph with a references heading and links. Preserve generous vertical pauses and avoid adding a dense grid or unnecessary navigation.

## Shape & elevation

- No box shadows measured: the page is flat.

The visual language is largely flat: no measured shadows, gradients, or card treatments are reported in CSS. The hero’s apparent depth comes from its gradient artwork, not stacked UI. Keep the reference area on white, use minimal framing, and avoid introducing borders or shadows absent from the evidence.

## Imagery

The opening is dominated by a full-bleed atmospheric gradient rather than visible photography: saturated blue fades through periwinkle into pale lavender. Treat this as hero artwork or a media treatment, since the measured palette contains only white. Overlay the fine serif wordmark and small circular typographic ornament; keep the rest of the page imagery quiet.

## Components

### ATMOS wordmark

Oversized, centered high-contrast serif lettering in white over the blue gradient, accompanied by a small circular type detail.

### Explore CTA

Compact white pill-shaped control below the wordmark, with small serif label and strong contrast against the gradient.

### References introduction

A restrained editorial intro in DM Sans, setting context for the aviation resources.

### References heading

Uppercase section label using bold DM Sans, aligned with the content column.

### Resource links

Three measured text links in regular DM Sans; keep them simple and integrated into the white content area.

### Measured component styles

- **Link** (“Leeroy's Playground”): transparent background · text #ffffff · radius 0px · padding 0px · 400 20px DM Sans

## Do

- Use a blue-to-pale gradient as hero artwork.
- Center the display wordmark and primary CTA.
- Keep the wordmark serif delicate and high contrast.
- Use DM Sans for supporting content and links.
- Preserve generous white space between major areas.
- Keep resource content in a narrow single column.

## Don't

- Do not treat screenshot gradient hues as measured CSS palette tokens.
- Do not add a dense navigation bar over the hero.
- Do not crowd the wordmark with supporting copy.
- Do not introduce unmeasured shadows or card borders.
- Do not turn the reference links into a busy card grid.
- Do not replace the quiet white content field with colored panels.

## Agent prompt

Build a new page in ATMOS’s immersive editorial style. Use Canvas White (#ffffff) as the measured page and content canvas. Create an atmospheric hero using a blue-to-periwinkle-to-pale gradient as artwork, not as a claimed measured CSS token; center a large, refined serif wordmark and a small white pill CTA. Use a Cormorant Garamond-like display face for the identity and DM Sans for headings, body copy, and links. Keep the hero sparse, with ample breathing room and a subtle circular typographic detail if useful. Transition into a quiet, narrow single-column white content section with an uppercase bold label, short introduction, and simple text links. Favor flat surfaces and restrained controls; avoid added shadows, borders, dense grids, or decorative UI that competes with the title.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Single-column white content area following a centered, gradient-led title screen; generous vertical spacing and left-aligned editorial text. | explore CTA, editorial introduction, reference links | large serif wordmark, white pill CTA, uppercase section heading, plain text links |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/atmos-leeroy-ca