---
name: Tokyo Uk
description: "A strong example of agency portfolio design using bold typography and photography to create impact without complex UI elements."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  secondary: "#000000"
  neutral: "#000000"
  bg-soft: "#ffffff"
  bg-quiet: "#ffffff"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 400px
    lineHeight: 0.85
    fontWeight: 500
    letterSpacing: "-2px"
  h1:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

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

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px

---

## Overview

Engineering digital experiences powered by intelligence.

*A premium digital agency showcasing bold work through cinematic imagery and massive typography.*

## Colors

Stark high-contrast palette relying on bold typography and large-scale photography rather than complex color systems.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#000000`)** — uses `ink-soft` token
- **Muted (`#000000`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- Hero text scales dynamically to fill the viewport width
- Body text maintains comfortable reading width of roughly 680px
- Light weight (300) used for navigation and subtitles

## Layout

Full-bleed hero followed by a responsive 2-column grid for project showcases.

*Rhythm:* Generous whitespace with 120px top padding and 80px gaps between grid items.

## Elevation & Depth

- Borders: None visible; relies on image contrast and whitespace for separation.

## Shapes

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

## Components

- **button:** Minimal text-based navigation without explicit button shapes.
- **card:** Large image-based project cards with simple text descriptions below.
- **hero:** Cinematic full-viewport background image with massive overlaid typography.

## Do's and Don'ts

**Don't:**
- Don't use colorful accents — screenshot shows a strict black and white palette.
- Don't add drop shadows to cards — screenshot shows flat image-based cards.
- Don't use serif fonts — screenshot shows a consistent geometric sans-serif family.
- Don't clutter the hero with UI elements — screenshot shows only massive text and a background image.
- Don't use small typography for headlines — screenshot shows massive display text filling the screen.
- Don't use explicit button shapes — screenshot shows minimalist text-based navigation.

---

## System Prompt (paste into AI agent)

```
This is a premium digital agency portfolio featuring a strict black-and-white palette (#000000, #ffffff) and bold geometric sans-serif typography (Aeonik). The layout relies heavily on full-bleed photography, massive display text, and generous whitespace (120px padding, 80px gaps). Critically, there are no colorful accents, no drop shadows, and no prominent buttons. The design is restrained, letting the work and bold typography speak for themselves. Avoid adding unnecessary UI elements or decorative graphics.
```