Minimalist Japanese

# Minimalist Japanese

## Philosophy

A restrained interface language inspired by Japanese editorial layouts, washitsu proportions, shoji translucency, and the discipline of leaving space intentionally unused. It values pause, rhythm, tactility, and quiet emphasis over decorative abundance.

### Values

- intentional emptiness
- paper-and-ink tactility
- measured asymmetry
- ritualized hierarchy
- calm operational clarity

### Anti-Values

- ornamental clutter
- heavy skeuomorphism
- loud gradients
- centered everything
- motion for spectacle

### Visual Character

- hairline charcoal frames on every container with wide interior padding and visible breathing room
- vertical section labels set in a narrow side rail using upright Japanese-style reading direction
- off-white paper surfaces with subtle fiber grain and translucent shoji panels layered over warm neutral backgrounds
- small vermilion seal accents used sparingly as square stamps for status, counts, and confirmations
- long horizontal divider rules that extend past headings to create quiet editorial tension

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#1F1A17` |
| secondary | `#6E655C` |
| accent | `#B33A2B` |
| background | `#F3EEE6` |
| surface | `#FBF8F2` |
| text | `#1A1613` |
| muted | `#8B8178` |
| border | `#544B44` |
| error | `#9E2A1F` |
| success | `#58734F` |
| warning | `#A36A1A` |
| info | `#486A7D` |

### Typography

- **Heading Font**: "Zen Old Mincho", serif
- **Body Font**: "Zen Kaku Gothic New", sans-serif
- **Mono Font**: "IBM Plex Mono", monospace
- **Base Size**: 16px
- **Scale Ratio**: 1.2
- **Line Height**: 1.7
- **Letter Spacing**: 0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@500;700&display=swap

### Spacing

- **Base Unit**: 8px
- **Scale**: ["4px","8px","16px","24px","40px","64px","96px"]

### Radii

- **None**: 0px
- **Sm**: 2px
- **Md**: 6px
- **Lg**: 12px
- **Full**: 999px

### Shadows

- **Sm**: 0 1px 0 rgba(31,26,23,0.06)
- **Md**: 0 8px 24px rgba(31,26,23,0.08)
- **Lg**: 0 18px 40px rgba(31,26,23,0.10)

### Surfaces

- **Treatment**: paper
- **Card Style**: outlined paper panels with translucent inner veil and generous negative space
- **Bg Pattern**: lines

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: hairline and architectural, used as quiet structure rather than decoration

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Philosophy**: deliberate

### Responsive

- **Breakpoints**: [1200,1024,768,480]
- **Column Progression**: 12 → 8 → 4 → 1

## Rules

### Composition

Compose screens as editorial boards rather than dashboards: a dominant content plane, a narrow vertical annotation rail, and supporting paper panels arranged in measured asymmetry. Leave at least one large quiet zone per major viewport so density never becomes uniform.

### Hierarchy

Headlines use Mincho contrast and long trailing rules; operational text uses a disciplined gothic; metadata and counts use mono. Emphasis is achieved through position, spacing, and a single vermilion seal, not through many font weights or many colors.

### Density

Low-to-medium density. Controls are compact but never cramped; cards breathe with oversized padding. Data may be information-rich, but every cluster is separated by dividers and empty margins.

### Signature Patterns

- every major panel uses a 1px charcoal border plus an inset 1px translucent inner frame to mimic layered paper construction
- section identifiers appear in a dedicated vertical rail using writing-mode vertical-rl with upright glyphs and generous tracking
- headings carry an extended hairline rule that stretches far beyond the text and aligns to the grid as an editorial anchor
- status markers and critical counts appear as small vermilion square seal blocks rotated 2 degrees rather than pill badges
- surface texture combines subtle repeating horizontal line grain with softly translucent shoji overlays inside selected panels

## Layout

### Grid

Desktop uses a 12-column asymmetrical editorial grid with a fixed narrow side rail and a dominant 8-column content field beside supporting 3-column stacks. Tablet collapses to 8 columns with the rail becoming a horizontal label band. Phone uses a single-column flow with internal panel grids preserved only where horizontal scrolling is appropriate.

### Breakpoints

1200px+ full editorial spread; 1024px two-tier grid with compressed rail; 768px stacked narrative panels; 480px single-column mobile with full-width actions, scrollable tables, and stacked tab/filter controls.

### Whitespace

Whitespace is structural. Use 40-96px outer margins on desktop, 24-40px on tablet, and 16-24px on phone. Never fill every cell; preserve blank modules to create rhythm.

## Guidance

### Do

- use vermilion only for signals that deserve ritual attention
- let borders, rules, and spacing carry structure before adding fills
- combine Mincho headings with gothic UI labels for clear role separation
- keep cards quiet and tactile with paper texture and low-contrast surfaces
- treat vertical labels as navigational architecture, not decoration

### Don't

- do not center all content or create perfectly symmetrical dashboards
- do not turn every status into a bright chip or pill
- do not use heavy shadows or glossy gradients
- do not collapse whitespace to fit more widgets
- do not animate with bounce, spring, or playful overshoot