Japanese Stationery Grid System

# Japanese Stationery Grid System

## Philosophy

A paper-first interface language that borrows the discipline of Japanese notebooks, planners, and labeled filing systems, then makes room inside that order for delicate illustration. It treats the screen like a carefully composed page: every region is ruled, margin-aware, captioned, and quietly expressive.

### Values

- clarity through modular page structure
- gentle utility with visible organization
- illustration that stays bounded and useful
- micro-annotation as a navigational aid
- calm focus through restrained color

### Anti-Values

- full-bleed chaos
- oversized hero-first layouts
- loud saturated palettes
- decorative imagery without function
- borderless ambiguous grouping

### Visual Character

- fine 1px ruled grids visible across cards and work areas
- caption tabs and sectional labels attached to the edges of panels
- small annotation text and metadata tucked into margins and corners
- illustration contained inside bounded inset panels rather than spilling freely
- paper-forward neutrals accented by a single soft ink or botanical color

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#596a8a` |
| secondary | `#c7b8a3` |
| accent | `#8ea78a` |
| background | `#f7f3eb` |
| surface | `#fffdf8` |
| text | `#2f2a24` |
| muted | `#7b746b` |
| border | `#cfc5b7` |
| error | `#b85c4f` |
| success | `#6f8f72` |
| warning | `#c59a4a` |
| info | `#7186a5` |

### Typography

- **Heading Font**: Cormorant Garamond
- **Body Font**: Zen Kaku Gothic New
- **Mono Font**: JetBrains Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.2
- **Line Height**: 1.55
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=JetBrains+Mono:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Radii

- **None**: 0
- **Sm**: 6px
- **Md**: 12px
- **Lg**: 18px
- **Full**: 9999px

### Shadows

- **Sm**: 0 1px 0 rgba(47,42,36,0.05)
- **Md**: 0 10px 30px rgba(89,106,138,0.08)
- **Lg**: 0 18px 40px rgba(47,42,36,0.10)

### Surfaces

- **Treatment**: paper
- **Card Style**: warm off-white sheets with ruled underlays and inset illustration windows
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: precise notebook rules with occasional thicker tab edges and framed illustration boxes

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: deliberate

## Rules

### Composition

Compose interfaces like planner spreads: generous outer margins, consistent column rules, and bounded utility blocks that leave breathing room for notes and imagery.

### Hierarchy

Hierarchy comes from label systems, ruled subdivisions, quiet typographic contrast, and selective use of the accent color instead of large scale shifts.

### Density

Moderately dense. Information can be plentiful, but every cluster must sit inside a named module with visible spacing and micro-labels.

### Signature Patterns

- every major panel carries a visible repeating ruled-grid background
- section headers use attached caption tabs that protrude from panel edges
- metadata and helper copy are rendered as tiny uppercase annotation text with mono numerals
- illustrations always live in bordered inset frames within the layout grid
- lists and forms align to notebook-style columns with vertical rules separating fields

## Layout

### Grid

A 12-column desk-page grid on desktop, collapsing to 8 and then 4 columns while preserving margin gutters and ruled subdivisions inside modules.

### Breakpoints

Desktop >= 1180px, tablet <= 960px, mobile <= 680px. At each breakpoint, caption tabs remain attached and illustration panels move below primary content rather than disappearing.

### Whitespace

Generous perimeter margins, moderate inter-panel spacing, and small internal padding that keeps the page feeling efficient but never cramped.

## Guidance

### Do

- use visible rules and subtle grid lines to organize every module
- keep labels short and precise, like notebook headings or archival tabs
- pair expressive illustration with explicit boundaries and captions
- use one muted accent color sparingly for focus and categorization
- leave margins open for notes, timestamps, and helper annotations

### Don't

- replace structure with large atmospheric gradients
- let imagery bleed across functional controls
- use multiple bright accents in the same view
- hide metadata that could reinforce page order
- round everything into soft blobs that erase the stationery feel