---
version: alpha
name: KEI
description: Quiet Japanese editorial minimalism — a warm paper-white canvas, near-black sumi ink, and a single restrained vermilion accent. Serif display type with generous tracking, vast whitespace as "keshiki" (景色, scenery), and hairline borders. Brand essence rendered as visual experience, not information.

colors:
  # Canvas + ink
  background: "#f7f5f0"
  surface: "#ffffff"
  surface-soft: "#efece5"
  ink: "#1a1a18"
  ink-secondary: "#4a4843"
  ink-muted: "#8a877f"

  # Accent — single restrained vermilion (shu, 朱)
  primary: "#c4452f"
  primary-hover: "#a8371f"

  # Hairline borders + dividers
  border: "#d9d5cc"
  border-strong: "#bdb8ad"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#f7f5f0"

  # Neutral scale
  gray-900: "#1a1a18"
  gray-700: "#4a4843"
  gray-500: "#8a877f"
  gray-300: "#cac6bd"
  gray-100: "#e7e3da"

typography:
  display-hero:
    fontFamily: "Shippori Mincho, 'Hiragino Mincho ProN', 'Noto Serif JP', serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.5px
  display-jp:
    fontFamily: "Shippori Mincho, 'Hiragino Mincho ProN', 'Noto Serif JP', serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 4px
  section-heading:
    fontFamily: "Shippori Mincho, 'Noto Serif JP', serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 1px
  card-title:
    fontFamily: "Shippori Mincho, 'Noto Serif JP', serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.5px
  eyebrow:
    fontFamily: "Jost, 'Helvetica Neue', sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 3px
  body-large:
    fontFamily: "Jost, 'Hiragino Sans', sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.5px
  body:
    fontFamily: "Jost, 'Hiragino Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0.5px
  body-small:
    fontFamily: "Jost, 'Hiragino Sans', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Jost, 'Helvetica Neue', sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 2px
  caption:
    fontFamily: "Jost, 'Helvetica Neue', sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 1.5px

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

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

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 36px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 36px

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 36px
    borderColor: "{colors.border-strong}"

  link-underline:
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    borderColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.none}"
    padding: 40px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 64px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 24px 40px
    borderColor: "{colors.border}"

  accent-rule:
    backgroundColor: "{colors.primary}"
    height: 2px
    width: 48px
---

# KEI Design System

## Overview

KEI is a Japanese brand-design studio, and its website is the studio's own thesis made visible: brand essence rendered as visual *experience* rather than raw information. The guiding idea is *keshiki* (景色) — scenery, a view — and the whole interface behaves like a composed landscape. Content is sparse and deliberate, framed by enormous fields of warm paper-white (`{colors.background}`), so that each headline, line, and image reads like an element placed within a scroll painting rather than a block of marketing copy.

The palette is almost entirely achromatic and warm. The canvas is a soft, off-white paper tone (`{colors.background}`) rather than pure white, and text is near-black sumi ink (`{colors.ink}`) — not `#000000`, but a warm charcoal that sits gently on the paper. A single accent does all the chromatic work: a restrained vermilion (`{colors.primary}`, *shu* 朱), the color of a traditional hanko seal. It appears only as a short rule, a hover state, or a single mark — never as a fill across large areas. Restraint is the point.

Typography carries the editorial weight. Display and heading type is a Mincho-style serif (`Shippori Mincho`), set at medium weight with open, generous tracking — especially in vertical or large Japanese settings, where wide letter-spacing gives characters room to breathe. Body and UI text switch to a quiet geometric sans (`Jost`) with very tall line-height (1.9–2.0) and gentle positive tracking, the opposite of compressed tech minimalism. Eyebrows and buttons are tiny all-caps sans with wide 2–3px tracking, used as labels and wayfinding rather than shouting.

Geometry is hard and flat. Corners are square (`{rounded.none}`) almost everywhere; borders are single hairlines in a warm gray (`{colors.border}`); there are essentially no shadows. Depth comes from whitespace and the contrast between the paper canvas and pure-white surface cards, not from elevation. The result is calm, confident, and unmistakably Japanese-editorial.

**Key Characteristics:**
- Warm paper-white canvas (`{colors.background}`), not pure white — the page feels printed
- Near-black warm sumi ink (`{colors.ink}`) for text, never `#000000`
- A single restrained vermilion accent (`{colors.primary}`) used as marks, rules, and hovers only
- Mincho serif display with open, generous letter-spacing — the inverse of compressed sans tracking
- Quiet `Jost` sans body with very tall line-height (1.9–2.0) and gentle positive tracking
- Square corners (`{rounded.none}`) and hairline borders throughout — flat, no shadows
- Vast whitespace as composition (*keshiki*); content placed like elements in a landscape
- Tiny all-caps eyebrows/buttons with wide 2–3px tracking for labels and wayfinding

## Colors

### Canvas & Ink
- **Paper White** (`{colors.background}`): Primary canvas. Warm off-white, like uncoated paper.
- **Pure White** (`{colors.surface}`): Card and panel surfaces that lift subtly off the paper canvas.
- **Soft Surface** (`{colors.surface-soft}`): Feature panels and quiet section bands.
- **Sumi Ink** (`{colors.ink}`): Primary text and headings. A warm charcoal, never true black.
- **Secondary Ink** (`{colors.ink-secondary}`): Supporting copy, captions with presence.
- **Muted Ink** (`{colors.ink-muted}`): Metadata, disabled text, faint labels.

### Accent
- **Vermilion / Shu** (`{colors.primary}`): The single accent — short rules, marks, link/hover emphasis.
- **Vermilion Deep** (`{colors.primary-hover}`): Pressed/hover state of the accent.

### Borders
- **Hairline** (`{colors.border}`): Default dividers, card outlines.
- **Hairline Strong** (`{colors.border-strong}`): Inputs, outline buttons, emphasized dividers.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Headings, primary ink.
- **Gray 700** (`{colors.gray-700}`): Body emphasis.
- **Gray 500** (`{colors.gray-500}`): Muted text.
- **Gray 300** (`{colors.gray-300}`): Subtle lines.
- **Gray 100** (`{colors.gray-100}`): Faint fills, hover bands.

### On-Color
- **On Primary** (`{colors.on-primary}`): Text on vermilion.
- **On Ink** (`{colors.on-ink}`): Paper-tone text on dark ink (e.g., dark buttons/footer).

## Typography

### Font Family
- **Display / Headings**: `Shippori Mincho` (Mincho serif), fallbacks `'Hiragino Mincho ProN', 'Noto Serif JP', serif`
- **Body / UI**: `Jost` (geometric sans), fallbacks `'Hiragino Sans', 'Helvetica Neue', sans-serif`
- **Tracking philosophy**: Serif display uses OPEN positive tracking (0.5–4px); the inverse of compressed sans systems. Body sans uses tall line-height (1.9–2.0) for an airy, editorial read.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 56px serif hero statement |
| `display-jp` | Large Japanese serif setting with wide 4px tracking |
| `section-heading` | Section titles |
| `card-title` | Project / card headings |
| `eyebrow` | All-caps labels above headings |
| `body-large` | Lead paragraphs, manifesto copy |
| `body` | Standard reading text |
| `body-small` | Captions, secondary copy |
| `button-ui` | Buttons, nav links — all-caps, wide tracking |
| `caption` | Metadata, fine print |

### Principles
- **Serif breathes, sans is quiet**: Mincho display opens up with positive tracking; `Jost` body relaxes with 1.9–2.0 line-height.
- **One weight, mostly**: Headings at 500, body at 400 — no heavy bold. Hierarchy comes from size and space.
- **All-caps labels track wide**: Eyebrows and buttons use 2–3px letter-spacing as a wayfinding signal.
- **Japanese settings get extra air**: Large kanji/kana headings use 4px tracking and tall line-height.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. The scale reaches very large values (`{spacing.4xl}` = 160px) because whitespace is the primary compositional tool.

### Grid & Container
- Max content width: approximately 1200px, often narrower (720–880px) for reading columns
- Hero: single-column statement with vast top/bottom padding
- Sections: asymmetric placement — text set against open space, not centered by default
- Hairline dividers (`{colors.border}`) separate sections instead of background changes

### Whitespace Philosophy
- **Keshiki (景色)**: Whitespace is scenery. Elements are placed within open fields like objects in a landscape.
- **Section rhythm**: Generous `{spacing.3xl}`–`{spacing.4xl}` vertical padding between sections.
- **Calm over density**: Few elements per view; each is given room. Restraint is the brand.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, no shadow | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, dividers, most chrome |
| Strong Hairline (Level 1b) | `1px solid {colors.border-strong}` | Inputs, outline buttons |
| Surface lift (Level 2) | White surface on paper canvas | Panels that read as "placed" |
| Focus (Accessibility) | `2px solid {colors.ink}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: KEI essentially avoids shadows. Separation comes from the warm paper-vs-white contrast and from hairline borders. The interface is flat by intent — printed, not floating.

### Decorative Depth
- Short vermilion rules (`{components.accent-rule}`, 48×2px) mark section starts
- Hairline dividers between sections in `{colors.border}`
- No gradients, no glows — color does the minimum

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, cards, inputs, images |
| `xs` | 2px | Tiny inline elements if needed |
| `sm` | 4px | Soft functional elements (rare) |
| `md` | 8px | Reserved larger radius (rare) |
| `pill` | 9999px | Optional tag/dot |

## Components

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

### Buttons
- **`button-primary`** — Sumi-ink fill, paper-tone text, square corners, wide-tracked all-caps label. Hover flips to vermilion.
- **`button-outline`** — Paper background, hairline-strong border, ink text. Square.
- **`link-underline`** — Text link with an ink underline; vermilion on hover.

### Cards
- **`card`** — White surface on the paper canvas, hairline border, square corners, generous 40px padding.
- **`card-feature`** — Soft-surface band, 64px padding, used for manifesto/feature blocks.

### Inputs
- **`input`** — White surface, hairline-strong border, square. Focus darkens the border to ink.

### Badges & Marks
- **`badge`** — Hairline-bordered chip, tiny tracked caption, paper background.
- **`accent-rule`** — The signature 48×2px vermilion rule that opens sections.

### Navigation
- **`nav-bar`** — Paper-tone header, all-caps wide-tracked links, hairline bottom border, no shadow.

### Distinctive Components
- **Vermilion seal-mark**: The single accent often appears as a small mark/rule echoing a hanko seal — never as a large fill.
- **Composed sections**: Asymmetric text placement against open whitespace, treating the viewport as scenery.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`), not pure white, for the page
- Keep the accent (`{colors.primary}`) restrained — marks, rules, and hovers only
- Set Mincho display with open positive tracking; keep body line-height tall (1.9–2.0)
- Use square corners (`{rounded.none}`) and hairline borders throughout
- Let whitespace carry the composition — generous `{spacing.3xl}`–`{spacing.4xl}` between sections
- Use `{colors.ink}` (warm charcoal) instead of pure black for text

### Don't
- Don't flood large areas with vermilion — it's a seal, not a background
- Don't add shadows or elevation — separation is hairline + whitespace
- Don't compress serif tracking — KEI's serif opens up, it doesn't minify
- Don't round corners — the system is flat and square
- Don't introduce additional accent colors — one vermilion is the whole palette
- Don't crowd sections — density breaks the *keshiki* calm

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced padding, smaller serif hero |
| Tablet | 600–1024px | Wider reading columns, sections stack |
| Desktop | 1024–1400px | Full asymmetric composition, max content width |
| Large | >1400px | Centered, generous outer margins |

### Touch Targets
- Buttons use comfortable 16px vertical padding
- Nav links spaced with wide tracking for tap clarity
- Inputs at 14px vertical padding

### Collapsing Strategy
- Hero serif: 56px → ~36px on mobile, tracking preserved
- Navigation: horizontal all-caps links → hamburger menu
- Sections: asymmetric → single-column stacked
- Vertical rhythm: 96–160px → ~48–64px on mobile

### Image Behavior
- Images sit flush with square corners, no border radius
- Generous margins around imagery preserve the "placed in a landscape" feel
- Full-bleed imagery used sparingly for scenery moments

---

## 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 KEI. Brand names and trademarks belong to their respective owners.