# Aikawakenichi · Design system migration spec

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

> This site serves as an excellent example of extreme editorial restraint, proving that a strong, centered circular motif paired with massive serif typography can create a compelling, premium experience.

## 1. Identity DNA

The design system for Aikawakenichi functions as a gallery exhibition catalog in digital form—a carefully sequenced experience where each element is given room to be observed. Its identity is built on a minimalist, artistic foundation, using circular motifs and a serif-driven typographic hierarchy to create a sense of focused, premium portraiture.

**One-liner:** A minimalist, editorial portfolio centered around large circular portrait elements.
**Keywords:** minimalist · artistic · portrait · circular · serif-driven
**Analogy:** A gallery exhibition catalog

## 2. Color

The color system is one of absolute restraint, built on a high-contrast foundation of pure black and white. This starkness is softened by warm, muted tints that lend a refined, paper-like warmth to the background.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F4EDED` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#767676` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High-contrast black and white with warm, muted tints.

The governing principle is high-contrast warmth, ensuring legibility while avoiding any sense of sterile, digital coldness.

## 3. Typography

The typographic voice is split between two distinct roles: a classic transitional serif establishes the authoritative display voice, while a clean neo-grotesque sans-serif handles all body and interface copy. This pairing creates a clear hierarchy, with the primary display text strictly set in regular weight to maintain a sense of elegant composure.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 261px | 1.0 | 400 | -1px | Main hero text and large names |
| body | 16px | 1.0 | 400 | normal | General text and percentages |

**Type rules:**
- Use a classic transitional serif for primary display text
- Use a clean neo-grotesque sans-serif for body and UI elements
- Ensure primary display text is strictly regular weight (400)

## 4. Spacing

The spatial rhythm is defined by generous whitespace, which acts as the primary organizing element around the centered compositions.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous whitespace

## 5. Surfaces

Depth is communicated with subtlety through carefully layered shadows—a soft outset shadow for lift and a refined inset highlight for dimensionality. The system favors a singular, consistent 1-pixel border in solid black to define edges without visual weight.

- **Radius:** sm 7px · md 35px · lg 9999px · pill 9999px
- **Shadows:**
  - rgba(0,0,0,0.12) 0px 6px 12px 0px
  - inset 0px 1px 0px 0px rgba(255,255,255,0.36)
- **Borders:** 1px solid rgb(0, 0, 0)

## 6. Layout

The layout skeleton is a centered, circular composition that rejects complex grids in favor of a strong vertical axis. Dominant circular frames anchor the visual hierarchy, creating a focused and spacious flow that prioritizes individual elements over dense information clusters.

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

**Skeleton:** Centered circular composition

## 7. Motion & Interaction

Motion philosophy in this system is one of deliberate, fluid transformation. All interactions are governed by smooth, organic easing curves applied to transforms and translations, creating a sense of physicality without distraction.

- **Durations:** micro 220ms · small 350ms · medium 800ms
- **Easing:** `cubic-bezier(0.306, 0.968, 0.632, 1)`
- **Patterns:**
  - Smooth transform and translate transitions

- **Hover:** Likely subtle transforms or reveals on circular elements
- **Click:** Pointer cursor indicates interactive hotspots
- **Transition:** transform 0.35s cubic-bezier(0.306, 0.968, 0.632, 1)
- **Keyboard:** Standard focusable elements

## 8. Voice & Don'ts

The editorial voice is refined and quiet, expressed through large, classic serif headlines in lowercase or title case. Calls-to-action are subtle and integrated, avoiding any visual noise that would break the composed atmosphere.

- **Tone:** Refined and quiet
- **Headline style:** Large, classic serif typography in lowercase or title case
- **CTA style:** Subtle and integrated
- **Avoid:** Loud color accents / Dense paragraphs / Complex grids / Heavy borders / Sans-serif display text

### Don'ts
- ❌ don't use vibrant accent colors — screenshot shows a strictly monochromatic palette with muted warm tints
- ❌ don't use sans-serif for large display text — screenshot shows a transitional serif for headings
- ❌ don't use heavy drop shadows — screenshot shows subtle, complex inset/outset shadows
- ❌ don't use a multi-column dense layout — screenshot shows a highly centered, spacious composition
- ❌ don't use bold weight for display text — screenshot shows a regular weight (400) for large typography
- ❌ don't use sharp corners everywhere — screenshot shows prominent use of 50% (circular) and 9999px (pill) border radii

This system deliberately excludes vibrant accents, dense typography, complex grids, and any use of sans-serif for display text to preserve its singular, gallery-like focus.

## System Prompt (paste into AI tool)

```
This is a minimalist editorial portfolio with a strong focus on typography and circular imagery. The layout is highly centered, utilizing massive transitional-serif headings and clean grotesque-sans body text against a warm off-white background (#F4EDED) and solid black (#000000) elements. Key features include large circular portrait frames, subtle inset shadows, and smooth 350ms transitions. Never use vibrant accent colors, avoid sans-serif display text, and ensure generous whitespace around the centered circular compositions to maintain the refined, gallery-like aesthetic.
```