---
name: Exo Ape
description: "This site is a masterclass in using photography and massive, light-weight typography to create a premium, architectural feel."
version: alpha

colors:
  background: "#0D0E13"
  primary: "#FFFFFF"
  neutral: "#E0CCBD"
  line: "rgba(255,255,255,0.15)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 250px
    lineHeight: 0.85
    fontWeight: 300
    letterSpacing: "-11.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 144px
    lineHeight: 0.9
    fontWeight: 300
    letterSpacing: "-5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.25
    fontWeight: 300
    letterSpacing: "0.1px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

Cinematic, image-driven design studio site with refined typography and calm pacing.

*A high-end architecture magazine meets a luxury hotel lobby.*

## Colors

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

- **Background (`#0D0E13`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#E0CCBD`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.15)`)** — uses `line` token

## Typography

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

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

## Layout

Full-bleed photographic hero with left-aligned text blocks.

*Rhythm:* Spacious, gallery-like rhythm with generous padding around major elements.

## Elevation & Depth

- Borders: Minimal; rely on color contrast and photographic depth rather than lines.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Minimal text links with no background.
- **card:** Full-bleed image overlays.
- **hero:** Full-viewport photographic background with massive, left-aligned typography.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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