# Ayakaito · Design system migration spec

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

> This site is a masterclass in blending high-end photography with refined typography to create a sophisticated, gallery-like portfolio experience.

## 1. Identity DNA

The design system for Ayakaito is built like a high-end design studio gallery—a curated space where photography, print, and typography are exhibited with deliberate restraint. Every element, from the earth-toned palette to the generous white space, serves to frame the work without competing for attention. It is a system of quiet confidence, where the absence of clutter becomes a statement of refinement.

**One-liner:** A refined editorial portfolio showcasing high-end branding and typography through rich, photographic still lifes.
**Keywords:** editorial · refined · curated · Japanese · typography
**Analogy:** A high-end design studio gallery showcasing a refined mix of photography, print, and type.

## 2. Color

The palette is grounded in the organic depth of deep olive green and the warmth of off-white, a foundation that recedes to let photographic content lead. This chromatic strategy ensures the design feels both natural and intentionally muted, with color used to define structure rather than demand focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FEFDF8` | main background |
| `--ink` | `#35472C` | body text |
| `--muted` | `#35477C` | placeholder |
| `--line` | `rgba(53, 71, 44, 1)` | divider |

**Color principle:** Earth-toned, organic palette dominated by deep olive greens and warm neutrals.

The core principle is that color should feel like a natural extension of the photographic content, never an artificial overlay.

## 3. Typography

The typographic system establishes a clear hierarchy of voice through contrasting genre choices. A refined transitional serif carries the weight of editorial headlines and project descriptions, while a humanist sans-serif provides the legible, functional backbone for navigation and metadata.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 62px | 1.04 | 400 | -1.3px | Project titles and large editorial quotes |
| body | 18px | 1.67 | 400 | 0px | Paragraph text and standard navigation links |

**Type rules:**
- Navigation links use a humanist sans-serif at 18px.
- Project descriptions use a refined transitional serif.
- Captions and metadata often use an uppercase sans-serif.

## 4. Spacing

The spacing rhythm is defined by generous scale and intentional negative space, allowing each element to occupy its area without congestion.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous, with large typographic scale and intentional negative space

## 5. Surfaces

Surface depth is achieved not through shadow but through the strategic layering of photographic content against flat, opaque backgrounds. Borders are reserved for interactive elements, rendered as thin, 1px lines in the system's dark olive to provide subtle definition without weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** thin 1px solid dark olive (#35472C) for interactive elements

## 6. Layout

The layout skeleton merges immersive, full-bleed photographic stills with split-screen editorial panels. This creates a dynamic reading experience that can shift from monolithic visual impact to structured, text-rich compositions within a single scroll.

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

**Skeleton:** Immersive full-bleed photography with split-screen editorial layouts.

## 7. Motion & Interaction

Motion is employed as a tool for polish, not ornament. All interactive elements use smooth, consistent transitions to reinforce a sense of controlled, deliberate change.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions for all interactive elements (all 0.3s).
  - Subtle opacity fades on hover states.

- **Hover:** Subtle color change and opacity transition on navigation links and buttons.
- **Click:** Standard pointer interaction for links and projects.
- **Transition:** Smooth color and opacity transitions (0.2s to 0.3s) across interactive elements.
- **Keyboard:** Standard focusable elements.

## 8. Voice & Don'ts

The editorial voice is refined, sophisticated, and deliberately quiet. It favors the impact of large, tightly tracked serif headlines over exclamation, and understated, pill-shaped CTAs over loud calls to action.

- **Tone:** Refined, sophisticated, and quiet.
- **Headline style:** Large, tightly tracked serif typography for maximum editorial impact.
- **CTA style:** Understated, pill-shaped outlined buttons with minimal uppercase text.
- **Avoid:** Bright, saturated accent colors / Heavy drop shadows / Dense, cluttered grids / Playful or casual language / Rigid, geometric UI components / Loud, decorative backgrounds

### Don'ts
- ❌ Don't use bright, neon accent colors — screenshot shows a muted, earth-toned palette.
- ❌ Don't use heavy drop shadows on elements — screenshot shows flat, photographic depth instead.
- ❌ Don't use tight, cluttered grids — screenshot shows expansive, breathing layouts.
- ❌ Don't use playful, rounded UI components — screenshot shows refined, pill-shaped buttons.
- ❌ Don't use bold, heavy sans-serif display fonts — screenshot shows elegant, high-contrast serifs.
- ❌ Don't use rigid, card-based layouts — screenshot shows immersive, full-bleed editorial spreads.

The system explicitly avoids bright accents, heavy shadows, dense grids, playful language, and rigid UI components in favor of its curated, gallery-like serenity.

## System Prompt (paste into AI tool)

```
This is a refined editorial portfolio for a high-end design studio, focusing on branding, typography, and illustrations. The core palette relies heavily on deep olive green (#35472C) and warm off-white (#FEFDF8), occasionally using soft pinks for section backgrounds. Typography mixes elegant transitional serifs for large headlines with humanist sans-serifs for navigation and metadata. It prioritizes immersive, full-bleed photography and generous whitespace over dense UI. Critical donts: avoid neon accent colors, avoid heavy drop shadows, and avoid rigid card-based layouts. The system must maintain a sophisticated, quiet, and gallery-like visual hierarchy.
```
