---
name: Films53 12
description: "A masterclass in using extreme scale and light font weights to create a powerful, editorial feel with zero decorative elements."
version: alpha

colors:
  background: "#000000"
  primary: "#ECE5EA"
  line: "rgba(236,229,234,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 200px
    lineHeight: 0.85
    fontWeight: 300
    letterSpacing: "-2px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 68px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 300
    letterSpacing: "0px"

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

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

---

## Overview

A minimalist filmography site using bold typography on a stark black canvas.

*A cinematic filmography presented with stark, modernist typography.*

## Colors

Stark, high-contrast monochrome for maximum cinematic impact.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#ECE5EA`)** — uses `ink` token
- **Borders (`rgba(236,229,234,0.1)`)** — uses `line` token

## Typography

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

- All text is uppercase
- Primary font weight is light (300)
- Film titles are large and visually dominant

## Layout

Free-flowing typographic grid with scattered titles.

*Rhythm:* Asymmetric and airy, using generous whitespace to separate typographic elements.

## Elevation & Depth

- Borders: None visible; relies on pure spatial contrast.

## Shapes

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

## Components

- **button:** Simple text link with no visible border or background.
- **card:** None; the layout is purely typographic.
- **chip:** None.
- **input:** None.
- **hero:** Massive, screen-spanning logotype at the top of the viewport.

## Do's and Don'ts

**Don't:**
- Don't use bold font weights — the screenshot shows exclusively light (300) typography.
- Don't add drop shadows or 3D effects — the screenshot shows a flat, high-contrast design.
- Don't use bright accent colors — the screenshot shows a strictly monochrome black and light-pinkish-white palette.
- Don't use rounded corners or card-based layouts — the screenshot shows sharp, edge-to-edge text elements.
- Don't use justified text alignment — the screenshot shows a mix of left and right alignments for a dynamic feel.
- Don't clutter the interface with icons — the screenshot shows almost purely typographic navigation.

---

## System Prompt (paste into AI agent)

```
This is a minimalist filmography portfolio using stark, high-contrast typography. The primary colors are a pure black background (#000000) and an off-white/light-pinkish ink (#ECE5EA). The typography is exclusively a light-weight (300) grotesque sans-serif, used in massive scales for film titles and hero logotypes. All text is uppercase. Critical donts: never use bold weights, never add shadows or rounded corners, and never introduce multiple colors. The layout is airy and uses generous whitespace to separate elements. Position the brand as a formal, archival cinema portfolio.
```