---
version: alpha
name: Aikawa Kenichi
description: Gallery-minimal editorial portfolio — near-black ink on warm off-white paper, a refined serif voice for names and titles paired with a quiet grotesque for navigation, generous whitespace, hairline rules, and zero ornament so the photography carries every page.
data_quality: low

colors:
  # Canvas + ink
  background: "#fbfbf9"
  surface: "#ffffff"
  surface-soft: "#f4f3ef"
  ink: "#141414"
  ink-pure: "#000000"
  ink-secondary: "#5a5a57"
  ink-muted: "#8c8c88"

  # Accent (restrained — used for active nav + link underline only)
  primary: "#141414"
  link: "#141414"
  link-hover: "#5a5a57"

  # Lines + structure
  border: "#e4e3de"
  border-strong: "#cfceca"
  divider: "#ececE7"

  # Progress / scroll indicator
  progress-track: "#ececE7"
  progress-fill: "#141414"

  # On-color
  on-primary: "#fbfbf9"
  on-ink: "#fbfbf9"

typography:
  display-name:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.5px
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -0.3px
  section-heading:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.2px
  project-title:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.70
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.5px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 1.2px
  meta-mono:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.8px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  pill: 9999px

components:
  # Active / hovered nav item — underline driven
  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 0px
  nav-link-muted:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    padding: 8px 0px

  # Sticky top bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 24px 40px
    borderColor: "{colors.border}"

  # Text link with hairline underline
  link:
    textColor: "{colors.link}"
    typography: "{typography.body}"

  # Outline "Back" / ghost button
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 10px 20px
    borderColor: "{colors.border-strong}"
  button-ghost-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 10px 20px
    borderColor: "{colors.ink}"

  # Solid dark CTA (contact / email)
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 12px 24px

  # Flat editorial image card — no chrome, hairline only
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  # Caption block beneath imagery
  caption:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    padding: 12px 0px

  # Scroll / read-progress bar
  progress:
    backgroundColor: "{colors.progress-track}"
    borderColor: "{colors.progress-fill}"
    height: 2px

  # Hairline divider between sections
  divider:
    backgroundColor: "{colors.divider}"
    borderColor: "{colors.divider}"
    height: 1px
---

# Aikawa Kenichi Design System

## Overview

Aikawa Kenichi's portfolio is a study in editorial restraint — the kind of site that treats the page as a printed spread rather than a screen. The canvas is a warm off-white paper tone (`{colors.background}`) rather than clinical pure white, lending the photography a gallery-print warmth. Near-black ink (`{colors.ink}`) carries all type, and there is essentially no chrome: no shadows, no fills, no rounded cards. Structure comes from whitespace and the occasional hairline rule (`{colors.border}`). Every decision recedes so the imagery — fashion, journey, mode — becomes the only thing that speaks loudly.

The typographic voice is a two-register system. Names, titles, and section headers are set in a high-contrast serif (`{typography.display-name}`, `{typography.section-heading}`) that reads like a magazine masthead — elegant, slightly condensed, with light negative tracking at display sizes. Everything functional — navigation, captions, body copy — drops to a quiet neutral grotesque (`{typography.nav-link}`, `{typography.body}`) with gentle positive tracking and airy line-height. This serif-for-identity, sans-for-utility split is the signature move, and it's what makes the site feel curated rather than templated.

Navigation is sparse and word-based — Back, Work, Fashion, Journey, Mode — rendered small, in lowercase or title case, separated by space rather than dividers. A thin scroll-progress indicator (`{components.progress}`) tracks reading position, the one piece of interactivity that surfaces at all. Social links (Instagram, Facebook, Email) sit as plain text, never as colored icon chips. The interface is almost stubbornly quiet.

What distinguishes the system is its commitment to flatness as confidence. Where most portfolios reach for cards, hover lifts, and accent colors, this one removes them entirely. Active states are communicated by ink darkening or a hairline underline — never by a fill or a glow. The result is an editorial calm that lets photography dictate the mood of each page.

**Key Characteristics:**
- Warm off-white paper canvas (`{colors.background}`) over near-black ink (`{colors.ink}`) — print warmth, not screen white
- Two-register type: high-contrast serif for names/titles, quiet grotesque for navigation and body
- Zero ornament — no shadows, no fills, no rounded cards; structure from whitespace + hairlines
- Hairline rules (`{colors.border}`) as the only dividers
- Restrained interaction: underline or ink-darkening for active states, never accent fills
- Thin scroll-progress bar as the single interactive flourish
- Generous vertical rhythm (`{spacing.3xl}`–`{spacing.4xl}`) framing imagery
- Plain-text social and meta — no colored chips or icon badges

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The warm off-white page background.
- **Surface** (`{colors.surface}`): Pure white behind imagery where a crisp edge is wanted.
- **Soft Surface** (`{colors.surface-soft}`): Subtle warm tint for alternating blocks.
- **Ink** (`{colors.ink}`): Near-black — all primary type, active nav, progress fill.
- **True Black** (`{colors.ink-pure}`): Reserved for rare maximum-contrast moments.

### Secondary Text
- **Ink Secondary** (`{colors.ink-secondary}`): Captions, supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Inactive nav, metadata, fine print.

### Accent (restrained)
- **Primary** (`{colors.primary}`): Equals the ink — this site has no chromatic accent; "accent" is just darkening.
- **Link** (`{colors.link}`): Ink-colored links with a hairline underline.
- **Link Hover** (`{colors.link-hover}`): Softens to secondary ink on hover.

### Lines & Structure
- **Border** (`{colors.border}`): Standard hairline rules and dividers.
- **Border Strong** (`{colors.border-strong}`): Ghost-button outlines, emphasized rules.
- **Divider** (`{colors.divider}`): Faint section separators.

### Progress
- **Progress Track** (`{colors.progress-track}`): Empty scroll bar.
- **Progress Fill** (`{colors.progress-fill}`): Filled portion, ink-toned.

## Typography

### Font Family
- **Display / Titles**: `Cormorant Garamond`, fallbacks `Georgia, serif` — high-contrast editorial serif for names and section headers.
- **UI / Body**: `Inter`, fallbacks `Helvetica Neue, Arial, sans-serif` — neutral grotesque for navigation, captions, and reading copy.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-name}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-name` | The masthead name — largest serif moment |
| `display-hero` | Page/project hero titles |
| `section-heading` | Section headers (Work, Fashion, Journey) |
| `project-title` | Individual project / image-set titles |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading copy |
| `nav-link` | Navigation items, small UI labels |
| `caption` | Image captions, uppercase tracked metadata |
| `meta-mono` | Dates, indices, fine meta |

### Principles
- **Serif announces, sans operates**: identity-bearing text is serif; anything you click or scan is sans.
- **Tracking inverts with size**: display serif uses slight negative tracking; small sans captions open up with positive tracking (`+1.2px`).
- **Airy line-height**: body copy sits at 1.65–1.70 for an unhurried editorial read.
- **No bold for emphasis**: weight stays light-to-medium; emphasis comes from the serif switch, not heavier weight.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Vertical rhythm is generous — sections are framed by `{spacing.3xl}`–`{spacing.4xl}` of breathing room so imagery dominates.

### Grid & Container
- Wide centered column with deep side margins
- Hero: single-column, name set large in serif over abundant whitespace
- Work/galleries: full-bleed or near-full-bleed imagery with minimal gutters
- Captions and meta align left beneath their images

### Whitespace Philosophy
- **Whitespace is the layout**: separation comes from space and hairlines, never from boxes or fills.
- **Imagery first**: chrome shrinks so photographs read at maximum size.
- **Quiet rhythm**: consistent large vertical gaps create a calm, scroll-driven cadence.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Everything — the system is shadowless |
| Hairline (Level 1) | `1px solid {colors.border}` | Dividers, ghost-button outlines, image edges |

**Shadow Philosophy**: There is no shadow system. Depth is communicated entirely by hairline rules and whitespace. This flatness is intentional and load-bearing — adding shadows or cards would break the print-editorial calm.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — images, buttons, blocks all square |
| `xs` | 2px | Rare soft corner on small controls |
| `sm` | 4px | Optional gentle rounding |
| `pill` | 9999px | Reserved for tiny status dots only |

The system is overwhelmingly square-cornered. Rounding is the exception, not the rule.

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.nav-bar}`, `{components.button-ghost}`).

### Navigation
- **`nav-bar`** — Sticky, paper-colored, hairline bottom rule. Small sans links.
- **`nav-link`** / **`nav-link-muted`** — Active items are ink, inactive items muted; active state shown by underline or darkening.

### Buttons
- **`button-ghost`** — Square outline in `{colors.border-strong}`; inverts to solid ink on hover.
- **`button-primary`** — Solid ink, paper-colored text, square corners. The rare strong CTA.

### Content
- **`card`** — Not a card in the usual sense: a flat image block with at most a hairline edge, no fill, no shadow, no radius.
- **`caption`** — Tracked sans beneath imagery in secondary ink.

### Interactive
- **`progress`** — 2px scroll-progress bar, ink fill over faint track.
- **`divider`** — 1px hairline section separator.

## Do's and Don'ts

### Do
- Keep the canvas warm off-white (`{colors.background}`), not pure white
- Use the serif (`Cormorant Garamond`) for names and titles only
- Use the sans (`Inter`) for all navigation, captions, and body copy
- Communicate active states with underline or ink-darkening
- Separate content with whitespace and hairlines
- Let imagery be full-bleed and dominant
- Open up small captions with positive letter-spacing

### Don't
- Don't add shadows, glows, or elevated cards — the system is flat by design
- Don't introduce chromatic accent colors; "accent" is just darker ink
- Don't round image corners or buttons — square is the default
- Don't use heavy weights for emphasis — switch to serif instead
- Don't crowd sections — large vertical gaps are part of the identity
- Don't turn social links into colored icon chips — keep them plain text

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced side margins, name scales down |
| Tablet | 600–1024px | Wider imagery, nav stays inline |
| Desktop | 1024–1440px | Full layout, deep margins |
| Large | >1440px | Centered, generous outer margins |

### Touch Targets
- Nav links get comfortable vertical padding for tap reach
- Buttons use 10–12px vertical padding
- Captions remain non-interactive

### Collapsing Strategy
- Hero serif name: scales down proportionally, keeps tracking
- Navigation: inline word list → stacked or hamburger on mobile
- Galleries: multi-image rows → single column
- Section spacing: `{spacing.4xl}` → roughly `{spacing.2xl}` on mobile

### Image Behavior
- Photography stays full-bleed or near-full-bleed at all sizes
- Aspect ratios preserved; no forced cropping
- Hairline edges retained where present

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper `{colors.background}`
- Heading text: Ink `{colors.ink}` (serif)
- Body text: Ink `{colors.ink}` / secondary `{colors.ink-secondary}` (sans)
- Border (hairline): `1px solid {colors.border}`
- Active nav: Ink `{colors.ink}` with underline
- CTA: Solid ink `{colors.ink}`, square corners

### Example Component Prompts
- "Create a hero: warm off-white background `{colors.background}`. Set the name in Cormorant Garamond 56px weight 500, line-height 1.05, letter-spacing -0.5px, color `{colors.ink}`. Below it, a one-line tagline in Inter 16px weight 400 in `{colors.ink-secondary}`. Abundant whitespace, no decoration."
- "Build a top nav: sticky, `{colors.background}`, 1px bottom border `{colors.border}`. Inter 14px weight 400, letter-spacing 0.5px. Active item `{colors.ink}` with underline, others `{colors.ink-muted}`."
- "Design a ghost button: square corners, 1px `{colors.border-strong}` outline, Inter 14px, `{colors.ink}` text. On hover invert to solid `{colors.ink}` with `{colors.on-ink}` text."
- "Place a full-bleed image with a caption beneath in Inter 12px, letter-spacing 1.2px, color `{colors.ink-secondary}`. No card, no shadow, no rounding."
- "Add a 2px scroll-progress bar at the top: track `{colors.progress-track}`, fill `{colors.progress-fill}`."

### Iteration Guide
1. Start from a warm off-white canvas, never pure white
2. Use serif only for identity (names/titles); sans for everything functional
3. Remove every shadow and rounded corner — flatness is the identity
4. Express state with underline or ink-darkening, not color
5. Let whitespace and hairlines do all structural work
6. Keep imagery full-bleed and dominant on every page

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Aikawa Kenichi. Brand names and trademarks belong to their respective owners.