# Ueno · Design system migration spec

> Source: https://www.ueno.co  ·  Curated by OpenDesign  ·  en

> This site is a quintessential example of high-end studio design, using restraint and typography to build a strong brand identity.

## 1. Identity DNA

The design system for Ueno operates with the deliberate restraint of a premium architectural firm's website. Every element is placed with structural intention, building a minimalist foundation where content and imagery are the primary materials. This is a system that values clarity and presence over ornamentation.

**One-liner:** A minimalist, high-end strategic design and innovation studio.
**Keywords:** strategic design · innovation · studio · agency · high-end
**Analogy:** A premium architectural firm's website.

## 2. Color

The color system is a study in high-contrast monochrome, using a strict palette of black and white with gray as a functional divider. Photography becomes the primary vehicle for color, making each image a strategic and impactful component within the layout.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#BBBBBB` | secondary text |
| `--muted` | `#BBBBBB` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochrome with strategic photography.

The principle is absolute restraint, using color only where it is a content-driven choice.

## 3. Typography

Typographic voice is established through a clear dichotomy: a transitional serif with tight tracking for authoritative display headlines, and a bold humanist sans-serif for confident body and UI text. This pairing creates a hierarchy that is both professional and direct.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 54px | 1.0 | 700 | -1.5px | Hero headlines |
| body | 20px | 1.2 | 700 | -1px | Body text |
| caption | 16px | 1.4 | 700 | -0.5px | Navigation and small UI elements |

**Type rules:**
- Headlines use a transitional serif with tight tracking.
- Body and UI text use a bold humanist sans-serif.

## 4. Spacing

Spacing follows a generous vertical rhythm, creating clear breathing room between sections and allowing the typographic hierarchy to command attention.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding and spacing between sections.

## 5. Surfaces

Surfaces are defined by their flatness and clarity. Depth is communicated through layout and typographic weight rather than shadows, with minimal borders serving only to cleanly divide content.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Shadows:**
  - none
- **Borders:** Minimal, typically 1px solid black or gray for dividers.

## 6. Layout

The layout skeleton is spacious and wide, built on large containers of whitespace that frame the content. A strong, left-aligned typographic hierarchy guides the eye, with large serif headlines anchoring sections above full-bleed imagery.

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

**Skeleton:** Large, generous whitespace with a clear typographic hierarchy.

## 7. Motion & Interaction

Motion is a tool for professional polish, not decoration. The philosophy uses smooth, standardized transitions—opacity fades for loading and transform slides for entrances—to guide interaction with quiet confidence.

- **Durations:** micro 250ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Opacity fades for content loading.
  - Transform slides for entrance animations.

- **Hover:** Subtle opacity changes on interactive elements.
- **Click:** Standard pointer interaction.
- **Transition:** All elements use a standardized transition property.
- **Keyboard:** Not visible, but standard focus management is assumed.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and direct. It favors understated, conversational serif headlines and simple text links over any form of gimmick or loud visual accent.

- **Tone:** Professional, confident, and direct.
- **Headline style:** Conversational yet authoritative serif headlines.
- **CTA style:** Understated text links.
- **Avoid:** Gimmicks / Excessive decoration / Loud color accents

### Don'ts
- ❌ don't use bright primary colors — screenshot shows a strict monochrome palette.
- ❌ don't use rounded corners — screenshot shows sharp, rectangular elements.
- ❌ don't use decorative scripts — screenshot shows a clean transitional serif for display.
- ❌ don't center-align all text — screenshot shows strong left-alignment.
- ❌ don't use heavy drop shadows — screenshot shows flat, surface-level design.
- ❌ don't use low-contrast text — screenshot shows high-contrast black on white.

The system deliberately excludes decorative scripts, bright primary colors, rounded corners, and heavy drop shadows to preserve its clean, editorial aesthetic.

## System Prompt (paste into AI tool)

```
A premium, minimalist strategic design studio website. The design DNA is characterized by high-contrast monochrome colors (hex #000000 and #FFFFFF) and a sophisticated typographic system using a transitional-serif for display and a bold humanist-sans for body text. The layout is spacious, relying on large generous whitespace and strong typographic hierarchy to convey a sense of confidence and quality. Critical design rules include: do not use decorative scripts or excessive color accents, maintain strict left-alignment for most content, and avoid rounded corners or heavy drop shadows to preserve the clean, editorial aesthetic. The site uses smooth cubic-bezier transitions for all interactive elements.
```
