Tokyo Indie Zine Illustration

# Tokyo Indie Zine Illustration

## Philosophy

A design language that feels like an authored Tokyo illustration annual rather than a startup interface: cream paper grounds, pale gouache-like washes, black ink figure lines, and small editorial notes framing each moment as a cropped poster fragment.

### Values

- authored imperfection over polished neutrality
- narrative vignettes over component catalogs
- quiet typography with strong image-space tension
- cultural poster memory over explicit branding
- human linework over vector sterility

### Anti-Values

- dashboard blandness
- full-bleed corporate gradients
- overweight UI chrome
- loud growth-product color coding
- symmetrical template sameness

### Visual Character

- cream paper background with faint grain and warm edge tint
- black ink outlines sitting slightly off-register from pale watercolor wash shapes
- poster-framed panels with generous margins and asymmetric cropping
- compact editorial captions in tiny mono blocks tucked into corners
- softly misaligned stamps, underlines, and accent bars that imply hand assembly

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#2f2924` |
| secondary | `#b06a5d` |
| accent | `#4f7c8b` |
| background | `#f5eedf` |
| surface | `#fff9ef` |
| text | `#241f1b` |
| muted | `#786b61` |
| border | `#27211c` |
| error | `#b24b43` |
| success | `#607a57` |
| warning | `#bf8b3d` |
| info | `#5e7c96` |

### Typography

- **Heading Font**: Aoboshi One
- **Body Font**: Zen Old Mincho
- **Mono Font**: IBM Plex 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=Aoboshi+One&family=IBM+Plex+Mono:wght@400;500&family=Zen+Old+Mincho:wght@400;500;700&display=swap

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 8px
- **Md**: 18px
- **Lg**: 28px
- **Full**: 9999px

### Shadows

- **Sm**: 0 2px 0 rgba(39,33,28,0.08)
- **Md**: 0 10px 30px rgba(74,55,34,0.10)
- **Lg**: 0 20px 60px rgba(74,55,34,0.14)

### Surfaces

- **Treatment**: paper
- **Card Style**: cream poster cards with pale wash underpainting and visible grain overlays
- **Bg Pattern**: noise

### Borders

- **Default Width**: 1.5px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: thin ink-keyline borders with occasional offset accent rules and stamp circles

### Motion

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

## Rules

### Composition

Build pages as a poster wall of narrative fragments: one dominant hero vignette, supporting cropped scenes, and a narrow editorial rail for metadata rather than conventional app navigation.

### Hierarchy

Illustration and wash fields lead first, headline second, caption system third. Labels stay compact and low-volume so the image framing carries the emotional weight.

### Density

Moderate density with small captions and generous outer margins; internal clusters can feel tight, but every major poster panel needs breathing room around it.

### Signature Patterns

- every major panel has an oversized poster margin and an inner figure vignette cropped off at least one edge
- wash blobs sit behind content with a 6-12px transform offset from the black ink outline layer
- captions use tiny uppercase mono labels with thin rules and issue/date metadata
- select accent details such as stamps, underlines, and side rules are intentionally misaligned by a few pixels
- buttons and inputs read like clipped paper labels with ink borders and soft wash fills rather than glossy controls

## Layout

### Grid

A 12-column poster grid on desktop collapsing to 8 and then 4 columns; hero scene spans 7 columns, editorial rail spans 5, and lower fragments interlock with deliberate asymmetry.

### Breakpoints

Desktop >= 1200px, tablet 760-1199px, mobile <= 759px. On smaller screens the poster rail stacks beneath the hero while preserving cropped framing and caption anchoring.

### Whitespace

Use generous page margins and card padding to emulate print borders; allow tighter spacing only inside caption clusters and metadata strips.

## Guidance

### Do

- use hand-drawn line motifs and imperfect registration to make digital layouts feel authored
- pair restrained serif copy with tiny mono metadata for editorial credibility
- treat each section like a gallery poster excerpt rather than a product module
- keep the palette washed and nuanced, with accent hues arriving in irregular fields

### Don't

- do not introduce SaaS dashboard cards or metric-heavy panels
- do not use ultra-bold geometric sans for primary reading text
- do not center everything symmetrically
- do not polish away offset edges, texture, or illustration marks