---
name: Numbered Studio
description: "This site is a masterclass in editorial restraint, proving how powerful large typography and photography can be when UI clutter is completely removed."
version: alpha

colors:
  background: "#111111"
  primary: "#FFFFFF"
  line: "rgba(255, 255, 255, 0.2)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 75px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 55px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 15px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: grotesque-sans
    fontSize: 13px
    lineHeight: 2.0
    fontWeight: 700
    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 bold, photo-centric agency site where typography floats over full-bleed editorial imagery.

*A high-end fashion magazine spread meeting a design studio portfolio*

## Colors

High-contrast monochromatic palette where content provides all chromatic variation.

- **Background (`#111111`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Borders (`rgba(255, 255, 255, 0.2)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** grotesque-sans

## Layout

Full-viewport photographic hero sections stacked vertically with centered text overlays.

*Rhythm:* Large, cinematic padding around elements, relying on generous negative space over a strict grid.

## Elevation & Depth

- Borders: 1px solid rgba(255, 255, 255, 0.2) for subtle dividers, otherwise relying on image edges.

## Shapes

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

## Components

- **button:** Minimal text links acting as buttons, uppercase, small, high contrast
- **card:** Full-bleed photographic panels with text overlays
- **hero:** Full-screen immersive photography with massive serif typography overlaid directly on the image

## Do's and Don'ts

**Don't:**
- don't use colorful backgrounds — screenshot shows all text overlaid directly on photographic imagery
- don't use rounded corners on containers — screenshot shows sharp, rectangular full-bleed panels
- don't use small, cramped typography — screenshot shows massive display type dominating the layout
- don't add drop shadows to text — screenshot shows flat, crisp white text sitting on images
- don't use a multi-column grid for content — screenshot shows a singular, stacked vertical flow
- don't rely on traditional navigation bars — screenshot shows a minimal hamburger menu and isolated text links

---

## System Prompt (paste into AI agent)

```
This is a premium agency portfolio for 'Numbered Studio', positioning itself as a high-end creative and technology partner. The visual DNA is dominated by massive full-bleed photographic sections with large didone-serif typography overlaid directly on the images. The color palette is starkly monochromatic, using pure white (#FFFFFF) for all text against whatever background image is present, with a dark site base (#111111). Typography pairs an expressive didone-serif for display with a clean grotesque-sans for body and navigation. Key critical donts: do not introduce a traditional navigation bar or sidebar; the interface is intentionally minimal and cinematic. Do not use colored UI elements or accent colors; all chromatic variation must come from the photography itself. Do not apply rounded corners or drop shadows to any containers; surfaces are defined strictly by image edges and subtle thin borders.
```