# Xihestudio · Design system migration spec

> Source: https://xihestudio.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a premium design portfolio that uses extreme restraint and high-quality typography to showcase work without visual noise.

## 1. Identity DNA

The system operates as a digital archive for a high-end design portfolio, presented as a stark, minimal interface. Its identity is defined by an extreme restraint that places the studio's work at the center of every interaction, much like the silent, ordered shelves of a rare book collection.

**One-liner:** A minimal, dark-themed personal design portfolio showcasing high-profile agency work.
**Keywords:** Portfolio · Design Studio · Art Direction · Minimal · Clean
**Analogy:** A digital archive of a high-end design portfolio, presented as a stark, minimal interface.

## 2. Color

The palette is built on a high-contrast dark mode, using a near-black background and primary white text to create a stark, focused canvas. A single, high-chroma red accent appears sparingly to punctuate key moments without disrupting the monochromatic calm.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#131312` | main background |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `rgba(255,255,255,0.75)` | secondary text |
| `--muted` | `rgba(255,255,255,0.75)` | placeholder |
| `--accent` | `#FE2A2A` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast dark mode with a single, sparse red accent to maintain focus on work.

The governing principle is chromatic restraint, where color serves only to denote focus, never to decorate.

## 3. Typography

Typography is the system's primary voice, utilizing the bold geometry of Monument Grotesk for headlines and a clean sans-serif for body copy. The choice reflects a category of **premium, architectural design**, where letterforms are structural elements, not ornaments.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 46px | 0.85 | 400 | -1px | Hero headline |
| body | 14px | 1.2 | 400 | 0px | General text |
| caption | 12px | 1.2 | 400 | 0px | Metadata and UI details |

## 4. Spacing

A strict grid with generous padding establishes the rhythm, creating deliberate pauses between content blocks that give each element room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict grid with generous padding.

## 5. Surfaces

Surfaces are rendered as flat, solid planes, defined not by shadows but by precise, thin borders. The 1px solid rgba(255,255,255,0.1) rule carves out space with architectural clarity, avoiding any hint of depth or gloss.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** 1px solid rgba(255,255,255,0.1)

## 6. Layout

The layout skeleton is a multi-column grid for text, providing a strong, left-aligned foundation for readability. This structure supports a large, masonry-like arrangement for portfolio images, creating a dynamic visual counterpoint to the rigid textual order.

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

**Skeleton:** Multi-column grid for text, large masonry-like layout for portfolio images.

## 7. Motion & Interaction

Motion philosophy is one of purposeful subtlety, where animations exist to guide attention and confirm interaction. The system relies exclusively on opacity transitions, ensuring page loads and hover states feel smooth, immediate, and professionally understated.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Opacity transitions for hover states and page loads.

- **Hover:** Subtle opacity changes on links and portfolio items.
- **Click:** Direct navigation to project detail pages.
- **Transition:** Smooth opacity fade-in for content sections.
- **Keyboard:** Standard tab navigation through links.

## 8. Voice & Don'ts

The editorial voice is professional, concise, and understated, mirroring the visual austerity. It favors large, tight-kerned headlines and uses directional cues over explicit calls to action, speaking with the quiet authority of a curated portfolio.

- **Tone:** Professional, concise, and understated.
- **Headline style:** Large, tight-kerned, all-caps or bold sentence case for impact.
- **CTA style:** Subtle, directional arrows indicating movement to the next section.
- **Avoid:** Flashy animations / Loud colors / Dense paragraph text

### Don'ts
- ❌ Don't use bright or neon colors — the screenshot shows a dark, almost black background with white text.
- ❌ Don't use decorative or script fonts — the typography is strictly geometric and monospaced sans-serifs.
- ❌ Don't use rounded, friendly UI elements — the layout uses sharp, clean, architectural grids.
- ❌ Don't add drop shadows or glassmorphism — the surfaces are completely flat and solid.
- ❌ Don't use multiple accent colors — the screenshot shows only a single red accent (#FE2A2A) used sparingly.
- ❌ Don't center all content — the layout relies on a strong left-aligned text grid.

It deliberately excludes flashy animations, loud colors, and dense paragraphs, refusing to let the system's voice compete with the work it presents.

## System Prompt (paste into AI tool)

```
This is a high-end personal design portfolio for an Art Director. The design is a stark, dark-themed minimal interface (#131312) focusing on large geometric sans-serif typography (Monument Grotesk) and a strict grid of portfolio images. Text is primarily white (#ffffff) with a secondary muted white (rgba(255,255,255,0.75)). A single, high-chroma red accent (#FE2A2A) is used very sparingly. The layout is column-based with generous whitespace. Critical donts: Do not use bright backgrounds, do not use decorative fonts, do not use heavy drop shadows or complex animations, do not use multiple accent colors, do not use a dense or cluttered layout, and do not use centered text for the main content.
```