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

# Exo Ape · Design System

> Quiet typography, monumental imagery, immersive digital presence.

**Theme:** dark · **Industry:** design · **Source:** https://www.exoape.com/ · **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._

Exo Ape’s homepage opens with a full-screen architectural photograph, restrained navigation, and a large white display word. The visual identity pairs an understated interface with cinematic imagery and generous negative space.

## North star

Let one cinematic, full-bleed image carry the atmosphere while small, precise white interface elements and oversized type provide hierarchy.

## Overview

The first viewport is led by a full-bleed photograph of Venice’s waterfront architecture, with a cool blue sky and stone building providing the page’s dominant color field. The measured interface palette is deliberately restrained: white navigation and display text, a near-black canvas token, and muted gray for secondary copy. Keep these interface colors distinct from the blues in the photograph, which are image content rather than brand accents. Lausanne-300 supplies the distinctive, clean sans-serif voice. A compact introductory statement sits left of center above an enormous display word that runs toward and beyond the lower viewport edge. Navigation stays small and quiet at the top, while the composition leaves broad areas of open sky around the copy. The page feels spacious despite its dense photographic detail: typography and the building form a strong asymmetrical balance, without visible cards, decorative borders, or pronounced elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Navigation, introductory copy, and oversized display lettering over the full-bleed hero photograph. |
| Night Canvas | `#0d0e13` | `--color-night-canvas` | neutral | Measured dark canvas token; the first viewport is visually dominated by photography rather than a flat dark background. |
| Quiet Gray | `#9e9fa1` | `--color-quiet-gray` | semantic | Muted secondary text in the interface; use sparingly for supporting copy rather than prominent hero messaging. |

### Semantic aliases

`--color-canvas` → `#0d0e13` (Night Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#9e9fa1` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0d0e13` | 19.28:1 | AAA |
| `#9e9fa1` | `#0d0e13` | 7.28:1 | AAA |
| `#9e9fa1` | `#ffffff` | 2.65:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lausanne-300 | `--font-display` | webfont | 400 | Display lettering, navigation, headings, and captions | DM Sans |
| Times New Roman | `--font-body` | system | 400 | Measured body text and one navigation style | Libre Baskerville |

- **Lausanne-300:** Use a light, clean sans-serif voice; display type is exceptionally large with tight negative tracking, while navigation remains small and regular.
- **Times New Roman:** Measured as a small-share fallback; the screenshot’s visible copy appears sans-serif, so prioritize Lausanne-like styling for the rendered interface.

### Type scale — Custom (ratio ≈ 3.953, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 250px | 400 | 0.73 | -0.046em | — | Lausanne-300 | Oversized hero keyword, cropped by the lower viewport edge. |
| h1 | 24px | 400 | 1.33 | 0 | — | Lausanne-300 | Compact introductory statement describing the studio. |
| body | 16px | 400 | normal | 0 | — | Times New Roman | General supporting copy where the measured system fallback applies. |
| caption | 14px | 400 | 1.5 | 0.007em | — | Lausanne-300 | Small secondary labels, including the scroll prompt. |
| nav | 14px | 400 | 1.5 | 0.007em | — | Lausanne-300 | Top-right primary navigation links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 32, 99, 116 px.
- Section rhythm 99px · element gap 32px · card padding — · max content width —.

Compose the opening as a viewport-filling photographic hero, with the image covering the canvas. Place the wordmark at the top left and a compact horizontal navigation at the top right. Align the short studio introduction to the left in the middle portion of the frame, then anchor the oversized display word much lower, allowing it to crop at the viewport boundary. The arrangement is asymmetrical and spacious; no measured page max-width is available, so do not impose one.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s ease` on interactive elements.

The interface reads as flat over the photograph, with no measured shadows, card treatment, or visible border system. Create hierarchy through scale, placement, and contrast rather than raised surfaces. Keep the navigation and copy directly over the image; any legibility treatment should remain visually subtle and avoid adding an unmeasured color.

## Imagery

Use a cinematic, full-bleed architectural photograph as the defining visual. The reference frames a domed waterfront building against a broad, cloudy blue sky; the building occupies the right side while open sky creates legible space for left-aligned copy. Preserve natural photographic detail and a cool, subdued treatment. Do not reinterpret the image’s blue tones as interface palette colors.

## Components

### Top navigation

Small white links sit in a single horizontal row at the upper right, balanced by the wordmark on the opposite side.

### Wordmark

A compact lowercase white “exo ape” mark anchors the upper-left corner.

### Introductory statement

A short white sans-serif studio description is left-aligned over the open sky and broken into a few concise lines.

### Display word

One enormous white Lausanne-style word dominates the lower hero and is intentionally cropped by the viewport.

### Scroll prompt

A small, subdued prompt near the lower-right edge invites exploration without competing with the display type.

### Measured component styles

- **Navigation item** (“Work Studio News Contact”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Times New Roman

## Do

- Use a single immersive photograph as the hero’s main visual field.
- Keep navigation small, white, and aligned to the upper-right edge.
- Balance the upper-left wordmark with the navigation.
- Place concise introductory copy over a quiet area of the image.
- Use oversized, tightly tracked display typography near the bottom.
- Treat photographic blues as image content, not interface palette colors.

## Don't

- Do not add cards, panels, or decorative borders to the hero.
- Do not introduce bright accent colors absent from the measured interface palette.
- Do not center every element or force a symmetrical composition.
- Do not let supporting copy rival the scale of the display word.
- Do not constrain the hero image to a small inset container.
- Do not add unmeasured spacing, radii, or shadow values.

## Agent prompt

Build a new Exo Ape-style page with a cinematic, full-bleed photographic hero and a restrained overlay interface. Use Gallery White (#ffffff) for the wordmark, navigation, and primary copy; reserve Quiet Gray (#9e9fa1) for subdued supporting labels. Night Canvas (#0d0e13) is a measured dark canvas token, not a reason to replace the reference’s photographic hero with a flat dark field. Choose a clean Lausanne-like sans serif, keep navigation compact, and make one display phrase dramatically oversized with tight tracking. Arrange the wordmark upper left, navigation upper right, short left-aligned copy over a quiet image area, and display type low in the frame. Preserve asymmetry, open space, and natural photographic detail. Avoid cards, heavy borders, decorative shadows, and invented accent colors.

## Source CSS custom properties (selected)

```css
--color-white: #fff;
--color-white-02: hsla(0,0%,100%,.2);
--color-white-04: hsla(0,0%,100%,.4);
--color-white-06: hsla(0,0%,100%,.6);
--color-white-08: hsla(0,0%,100%,.8);
--color-off-white: #f8f8f8;
--color-off-white-02: hsla(0,0%,97%,.2);
--color-off-white-04: hsla(0,0%,97%,.4);
--color-off-white-06: hsla(0,0%,97%,.6);
--color-off-white-08: hsla(0,0%,97%,.8);
--color-story: #070707;
--color-dark-grey: #0d0e13;
--color-dark-grey-02: rgba(13,14,19,.2);
--color-dark-grey-04: rgba(13,14,19,.4);
--color-dark-grey-06: rgba(13,14,19,.6);
--color-dark-grey-08: rgba(13,14,19,.8);
--color-light-grey: #e4e0db;
--color-light-grey-02: hsla(33,14%,88%,.2);
--color-light-grey-06: hsla(33,14%,88%,.6);
--color-light-grey-08: hsla(33,14%,88%,.8);
--color-sand: #e0ccbb;
--color-sand-06: hsla(28,37%,81%,.6);
--color-sand-08: hsla(28,37%,81%,.8);
--font-f-lausanne-300: "Lausanne-300";
--font-f-lausanne-400: "Lausanne-400";
--font-f-lausanne-500: "Lausanne-500";
--font-s-h0: 17.3611111111vw;
--font-lh-h0: 15.6944444444vw;
--font-ls-h0: -0.7986111111vw;
--font-s-h1: 10vw;
--font-lh-h1: 10vw;
--font-ls-h1: -0.3472222222vw;
--font-s-h2: 3.6111111111vw;
--font-lh-h2: 4.4444444444vw;
--font-ls-h2: -0.1041666667vw;
--font-s-h3: 2.2222222222vw;
--font-lh-h3: 2.7777777778vw;
--font-ls-h3: -0.0069444444vw;
--font-s-h4: 1.6666666667vw;
--font-lh-h4: 2.2222222222vw;
```

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