---
name: Fantasy
description: "This site is a perfect reference for high-end agency design, demonstrating how extreme typography scale and monochrome palettes can create a powerful, authoritative brand presence."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#D0D0D0"
  tertiary: "#FD0202"
  neutral: "#293C5B"
  bg-quiet: "#121212"
  line: "rgba(255,255,255,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 116px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-3.5px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 41px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.83px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.17px"

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

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

---

## Overview

A premium design agency showcasing vision and execution through immersive, dark-mode-first cinematic visuals.

*A high-end design studio that leads with vision and execution.*

## Colors

Cinematic contrast with a predominantly monochrome palette, utilizing a single sharp red accent for focal points.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#D0D0D0`)** — uses `ink-soft` token
- **Accent (`#FD0202`)** — uses `accent` token
- **Muted (`#293C5B`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Use tight negative letter-spacing for display text to emphasize a dense, premium feel.
- Maintain a consistent font weight (400-500) across all text to preserve visual uniformity.
- Ensure high contrast by strictly using white text on dark backgrounds.

## Layout

Immersive full-bleed hero sections with fixed navigation.

*Rhythm:* A spacious 50px horizontal padding is consistently applied to maintain an airy, premium layout.

## Elevation & Depth

- 0px 32px 68px 0px rgba(0, 0, 0, 0.3)
- Borders: Minimal 1px white borders used sparingly for definition.

## Shapes

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

## Components

- **button:** Minimal, pill-shaped containers with subtle borders and pointer cursors.
- **card:** Image-heavy layouts with precise borders and generous padding.
- **chip:** High-contrast, pill-shaped interactive elements.
- **input:** Invisible or highly minimal input fields.
- **hero:** Full-screen, cinematic background imagery with massive typography overlays.

## Do's and Don'ts

**Don't:**
- Don't use multiple competing background colors — the screenshot shows a predominantly pure black background.
- Don't use centered text for the main hero — the screenshot shows aggressive left-alignment for massive headlines.
- Don't use high-chroma gradients — the screenshot shows solid monochrome backgrounds or photographic imagery.
- Don't use serif fonts — the screenshot shows exclusively sans-serif typography.
- Don't use busy, multi-column layouts for hero sections — the screenshot shows spacious, full-bleed arrangements.
- Don't use standard 'click here' buttons — the screenshot shows minimal text links or subtle rounded pill shapes.

---

## System Prompt (paste into AI agent)

```
This is a premium design agency website that leads with vision and execution, utilizing a dark-mode-first, cinematic aesthetic. The primary colors are pure black (#000000) and white (#FFFFFF), creating high contrast for massive typography. The font categories are exclusively grotesque-sans, with a strict weight range of 400-500. Layouts are spacious, featuring full-bleed imagery and tight letter-spacing. Critical donts: never use multiple competing background colors; avoid centered text for primary hero headlines; do not use high-chroma gradients or busy layouts. The design prioritizes immersive photography and authoritative, bold typography to establish a premium, visionary brand identity.
```