# Tokyo Uk · Design system migration spec

> Source: https://tokyo.uk  ·  Curated by OpenDesign  ·  en

> A strong example of agency portfolio design using bold typography and photography to create impact without complex UI elements.

## 1. Identity DNA

Tokyo UK presents itself as a premium digital agency, its identity distilled into the language of engineering and intelligence. Like a well-designed machine, every component serves a clear purpose: to showcase bold work through cinematic imagery and massive typography.

**One-liner:** Engineering digital experiences powered by intelligence.
**Keywords:** agency · digital studio · engineering · intelligence · portfolio
**Analogy:** A premium digital agency showcasing bold work through cinematic imagery and massive typography.

## 2. Color

The system operates on a strict high-contrast binary of pure black and white, a deliberate limitation that transfers all chromatic energy to the photography. This restraint forces the portfolio work itself to carry the full visual narrative.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#ffffff` | card background |
| `--bg-quiet` | `#ffffff` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#000000` | secondary text |
| `--muted` | `#000000` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

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

The principle is subtraction as a tool for emphasis.

## 3. Typography

Typographic voice is dominated by Aeonik, a geometric sans-serif used at monumental scale. The hero text is not merely set but engineered to fill the viewport width, functioning as architectural signage rather than conventional headlines.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 400px | 0.85 | 500 | -2px | Hero typography filling the viewport |
| h1 | 40px | 1.2 | 400 | -0.5px | Project titles |
| body | 16px | 1.5 | 400 | 0 | Descriptions and body text |

**Type rules:**
- 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

## 4. Spacing

Generous whitespace establishes a rhythmic structure, creating clear pauses between the bold visual statements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 120 px
- **Rhythm:** Generous whitespace with 120px top padding and 80px gaps between grid items.

## 5. Surfaces

Surfaces are defined not by borders or shadows, but by the stark edges of imagery and the clean expanse of whitespace. The system is flat, relying on contrast and composition to create hierarchy and separation.

- **Radius:** sm 4px · md 8px · lg 8px · pill 999px
- **Borders:** None visible; relies on image contrast and whitespace for separation.

## 6. Layout

The structural skeleton begins with a full-bleed cinematic hero, a singular, dominant statement. This is followed by a responsive two-column grid that provides a measured, organized framework for the portfolio showcases.

- **Container max:** 1400px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy is one of minimal intervention. Transitions are lightweight and purposeful, existing only to acknowledge interaction with a subtle change in state.

- **Durations:** micro 100ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Hover transitions on text links

- **Hover:** Subtle opacity or color transitions on text links and navigation.
- **Click:** Standard pointer cursor on interactive elements.
- **Transition:** All transitions set to default duration for smooth state changes.
- **Keyboard:** Standard focus navigation.

## 8. Voice & Don'ts

The editorial voice is confident, professional, and understated, mirroring the design's own restraint. Headlines are massive, all-caps statements that dominate the frame, while calls-to-action are simple, understated text links.

- **Tone:** Confident, professional, and understated.
- **Headline style:** Massive, all-caps or bold sans-serif statements that dominate the viewport.
- **CTA style:** Understated text links rather than prominent buttons.
- **Avoid:** Cluttered layouts / Decorative graphics / Prominent call-to-action buttons

### Don'ts
- ❌ 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.

The system deliberately forgoes colorful accents, drop shadows, serif fonts, cluttered layouts, and decorative graphics.

## System Prompt (paste into AI tool)

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