# Taiki Murayama · Design system migration spec

> Source: https://www.taiki-murayama.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of a bold, typographic portfolio that uses scale and whitespace as primary design tools.

## 1. Identity DNA

The system operates like a curated gallery, where the designer's work is presented with bold typography and restrained elegance. Its identity is built on a strict, high-contrast monochrome palette and an asymmetric editorial grid, using scale and whitespace as primary structural tools.

**One-liner:** A bold, editorial design portfolio emphasizing large typography, high-contrast imagery, and minimal UI chrome to showcase work.
**Keywords:** design · portfolio · minimal · editorial · high-end
**Analogy:** A curated gallery of a designer's work, presented with bold typography and restrained elegance.

## 2. Color

A high-contrast monochrome palette establishes a light, neutral background, allowing work imagery to stand with clarity. A single, vibrant green accent is reserved exclusively for active states, used sparingly to signal interaction without visual noise.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f7f7f7` | main background |
| `--ink` | `#0b0b0f` | body text |
| `--ink-soft` | `#bbbbbb` | secondary text |
| `--muted` | `#bbbbbb` | placeholder |
| `--accent` | `#42ff00` | single accent |
| `--line` | `rgba(11,11,15,1)` | divider |

**Color principle:** High-contrast monochrome palette with a single vibrant accent, using a light neutral background to let work imagery stand out.

The principle is one of extreme restraint, where a single accent color and near-black ink on light gray create maximum contrast and focus.

## 3. Typography

The typographic voice is defined by a geometric sans-serif display font used at massive scales with tight tracking, creating a confident, headline-driven hierarchy. A humanist sans-serif supports body text, maintaining clarity without competing with the primary display voice.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 110px | 0.85 | 400 | -4px | Main name headline |
| heading | 54px | 1.0 | 400 | -3px | Large section titles like brand names |
| subhead | 34px | 1.2 | 400 | -1px | Job titles and secondary headings |
| body | 28px | 1.2 | 400 | -0.5px | Primary body text and descriptions |
| caption | 16px | 1.2 | 400 | 0px | Navigation and small labels |

## 4. Spacing

A loose, editorial rhythm governs the layout, with generous padding and gaps creating an open, breathable composition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A loose, editorial rhythm with generous padding and gaps to create an open, breathable layout.

## 5. Surfaces

Depth is achieved not through shadows but through the layering of flat elements and careful z-indexing. Thin, solid lines in near-black serve as the primary separators, defining sections with quiet authority.

- **Radius:** sm 4px · md 15px · lg 300px · pill 999px
- **Borders:** Thin, solid lines in near-black are used as primary separators between content sections.

## 6. Layout

The layout skeleton is an asymmetric, editorial grid that deliberately breaks conventional column structures. It favors large, overlapping imagery and massive text blocks that interact dynamically with the generous whitespace.

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

**Skeleton:** Asymmetric, editorial grid with overlapping imagery and large text blocks that break conventional column structures.

## 7. Motion & Interaction

Motion philosophy is restrained and functional, prioritizing smooth property transitions over complex animation sequences. Interactive elements scale subtly on hover, using a consistent cubic-bezier easing curve to create a polished, responsive feel.

- **Durations:** micro 140ms · small 200ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth scaling and opacity transitions for interactive elements
  - Parallax-like movement for image clusters

- **Hover:** Elements scale up slightly on hover.
- **Click:** Standard pointer cursor on all interactive elements.
- **Transition:** All interactive elements use a smooth, standardized transition on properties like transform, background, and padding.
- **Keyboard:** Standard tab navigation is assumed.

## 8. Voice & Don'ts

The editorial voice is confident, professional, and artistically bold, expressed through ultra-large headlines and minimal call-to-actions that rely on text and simple icons. The system deliberately avoids decorative flourishes, dense text blocks, and standard UI component patterns.

- **Tone:** Confident, professional, and artistically bold.
- **Headline style:** Ultra-large, tightly tracked geometric sans-serif names and titles.
- **CTA style:** Minimal, relying on text and a single asterisk icon rather than traditional button shapes.
- **Avoid:** Avoid decorative flourishes or script fonts / Avoid multiple accent colors / Avoid dense text blocks or cluttered layouts / Avoid standard UI component patterns like cards or modals / Avoid busy backgrounds or gradients / Avoid using drop shadows for depth

### Don'ts
- ❌ Don't use drop shadows — screenshot shows flat images with clean edges.
- ❌ Don't use card containers for images — screenshot shows images floating and overlapping freely.
- ❌ Don't use multiple font weights for emphasis — screenshot shows almost exclusively weight 400, relying on size for hierarchy.
- ❌ Don't center-align headlines — screenshot shows left-aligned or asymmetrically placed text.
- ❌ Don't use multiple accent colors — screenshot shows only one vibrant green highlight.
- ❌ Don't use dense paragraph text — screenshot shows short, impactful statements and lists.

The system deliberately forgoes drop shadows, card containers, multiple accent colors, and center-aligned headlines to preserve its gallery-like minimalism and typographic authority.

## System Prompt (paste into AI tool)

```
This is a high-end design portfolio for a creative director, positioned with bold, editorial confidence. The design DNA is built on a strict, high-contrast monochrome palette: a very light gray background (#f7f7f7), near-black ink (#0b0b0f), and a single, vibrant green accent (#42ff00) used sparingly for active states. The typography is dominated by a geometric sans-serif display font (Helvetica Neue) used at massive scales (up to 110px) with tight tracking, paired with a humanist sans for body text. The layout is an asymmetric, grid-breaking composition with generous whitespace. Critical don'ts: never use drop shadows, never put images in card containers, and never use multiple accent colors. The site uses a loose, editorial rhythm and smooth transitions (cubic-bezier(0.4, 0, 0.2, 1)) for interactions.
```