---
name: Atmos Leeroy Ca
description: "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 resona"
version: alpha

colors:
  background: "#0A1A99"
  primary: "#FFFFFF"
  secondary: "#000000"
  neutral: "#FFFFFF"
  bg-soft: "#C5D2F0"
  bg-quiet: "#FFFFFF"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 200px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0px"
  heading:
    fontFamily: humanist-sans
    fontSize: 50px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"
  subtitle:
    fontFamily: humanist-sans
    fontSize: 30px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 25px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 50px

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

---

## Overview

An immersive, surrealist digital experience blending bold serif typography with atmospheric gradients

*A luxury digital magazine or gallery space that feels ethereal and expansive*

## Colors

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

- **Background (`#0A1A99`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#000000`)** — uses `ink-soft` token
- **Muted (`#FFFFFF`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Generous padding with 144px and 250px spacing for immersive hero sections

## Elevation & Depth

- Borders: 1px bottom borders in white or black, pill-shaped buttons with 50px radius

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 50px

## Components

- **button:** Pill-shaped (50px radius) with white background and uppercase blue text
- **card:** Minimal, likely transparent or gradient-backed with generous padding
- **chip:** Not visible in screenshot
- **input:** Not visible in screenshot
- **hero:** Full-screen gradient with massive centered serif wordmark and circular rotating text

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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