# Exo Ape · Design system migration spec

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

> This site is a masterclass in using photography and massive, light-weight typography to create a premium, architectural feel.

## 1. Identity DNA

The Exo Ape design system operates like a high-end architecture magazine laid out in a luxury hotel lobby — a controlled environment where photography becomes the primary structural material and typography is the refined signage guiding the visitor. Its identity is built on the tension between cinematic scale and quiet restraint, with every element calibrated to feel both monumental and effortless.

**One-liner:** Cinematic, image-driven design studio site with refined typography and calm pacing.
**Keywords:** refined · cinematic · premium · architectural
**Analogy:** A high-end architecture magazine meets a luxury hotel lobby.

## 2. Color

The palette is deliberately reductive, built on a foundation of deep architectural dark (#0D0E13) and crisp white (#FFFFFF), with a muted warm sand (#E0CCBD) providing subtle punctuation. This high-contrast scheme ensures photographic imagery remains the dominant visual voice while typographic elements cut through with precision.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D0E13` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#E0CCBD` | placeholder |
| `--line` | `rgba(255,255,255,0.15)` | divider |

**Color principle:** Heroic photography serves as the primary canvas, with crisp white typography providing maximum contrast and a single warm accent tone adding subtle warmth.

The principle is clear: color serves the image, not the other way around.

## 3. Typography

Typography is treated as an architectural element — a humanist-sans-serif rendered in a consistent light weight (300) with extremely tight negative tracking at display sizes. The scale ranges from massive hero statements to functional text, but the voice remains uniformly refined and understated.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 250px | 0.85 | 300 | -11.5px | Massive hero statements |
| heading | 144px | 0.9 | 300 | -5px | Section titles |
| body | 16px | 1.25 | 300 | 0.1px | General text |

**Type rules:**
- Use extremely tight negative tracking for display sizes to achieve a premium, architectural look.
- Maintain a light (300) weight for all text to preserve elegance.
- Ensure high contrast (white on dark) for all typographic elements.

## 4. Spacing

The spatial rhythm is spacious and gallery-like, with generous padding around major elements creating a sense of calm curation rather than information density.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Spacious, gallery-like rhythm with generous padding around major elements.

## 5. Surfaces

Surface treatment is virtually absent — the system relies on photographic depth and color contrast rather than shadows, borders, or decorative lines. Edges remain sharp and architectural, never rounded, maintaining the precision of a well-drafted blueprint.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Minimal; rely on color contrast and photographic depth rather than lines.

## 6. Layout

The layout skeleton is built on full-bleed photographic heroes with left-aligned text blocks that float over the imagery. This structure creates a cinematic reading experience where the interface recedes and the photography advances.

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

**Skeleton:** Full-bleed photographic hero with left-aligned text blocks.

## 7. Motion & Interaction

Motion follows a cinematic philosophy — smooth opacity transitions for interactive states and dramatic, large-scale text reveals during scrolling. The timing is deliberately relaxed at 0.5 seconds, creating a contemplative pace rather than a responsive urgency.

- **Durations:** micro 220ms · small 500ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth opacity transitions for hover states.
  - Cinematic scrolling reveals for large text elements.

- **Hover:** Subtle opacity reduction.
- **Click:** Immediate response.
- **Transition:** Smooth, delayed transitions (0.5s) for a relaxed feel.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident and understated, using massive single-word or short-phrase statements in light weight as headlines, with minimal text-based calls to action. This restraint extends to what the system deliberately avoids: heavy font weights, bright saturated colors, rounded corners, and visual noise of any kind.

- **Tone:** Confident, understated, and premium.
- **Headline style:** Massive, single-word or short-phrase statements in light weight.
- **CTA style:** Subtle, text-based calls to action.
- **Avoid:** Loud, saturated colors. / Rounded corners on major containers. / Heavy font weights (400+).

### Don'ts
- ❌ Don't use heavy font weights — screenshot shows a consistent light (300) weight for all text.
- ❌ Don't add rounded corners to main surfaces — screenshot shows sharp, architectural edges.
- ❌ Don't use bright, saturated accent colors — screenshot relies on white text over photography.
- ❌ Don't crowd the layout — screenshot shows generous padding (e.g., 50px) around text blocks.
- ❌ Don't use a grid with visible lines — screenshot uses whitespace and alignment to organize content.
- ❌ Don't use small display text — screenshot shows 'Digital' at a massive 250px scale.

What's omitted is as significant as what's included — no heavy weights, no rounded corners, no saturated accents, and no grid lines; the system trusts photography and spacing to provide all necessary structure.

## System Prompt (paste into AI tool)

```
This is a premium digital design studio website that uses a cinematic, image-driven layout to establish an elevated brand presence. The core palette consists of a dark architectural base (#0D0E13) and crisp white (#FFFFFF) typography, with a warm, muted sand (#E0CCBD) used for secondary accents. Typography is humanist-sans-serif, specifically a light-weighted (300) face used at massive scales with tight negative tracking. The layout is full-bleed and spacious, prioritizing high-quality photography over complex UI patterns. Critical constraints: never use heavy font weights or bright saturated colors; maintain generous, gallery-like spacing; and always ensure high contrast between text and photographic backgrounds.
```