Kukan Press Grid

# Kukan Press Grid

## Philosophy

Kukan Press Grid is a publication-driven interface language informed by Japanese culture magazines, compact urban newspapers, bookstore journals, event weeklies, and meticulously edited city guides. It treats the screen as an arranged spread where multiple stories, annotations, listings, and image captions coexist, allowing readers to scan laterally and build context through adjacency. The mood is metropolitan, observant, and typographically disciplined rather than product-marketing slick. Dense information is acceptable, but it must be sequenced through visible rules, folio markers, kickers, and contrasting text systems so the page still feels edited. In digital form, the language should preserve the sensation of a carefully art-directed print layout translated into a responsive reading environment.

### Values

- Editorial density with visible structure and reading cues
- Typographic contrast between literary display, practical body text, and coded metadata
- Browsing by juxtaposition, annotation, and side-notes rather than single-funnel conversion flows
- Paper-like tactility expressed through warm surfaces, crisp rules, and cropped image windows

### Anti-Values

- Empty single-hero product landing pages
- Uniform card systems where every module shares the same framing and priority
- Glossy glass effects or startup-gradient sheen that erase the publication feeling
- Interfaces that hide dates, districts, authorship, or issue context until hover or drill-down

### Visual Character

- Warm paper-colored surfaces sit over a faintly ruled background grid, while every major module is enclosed by precise 1px black editorial rules and selected story groups receive heavier 3px dividers to establish spread hierarchy.
- Display headlines use a high-contrast serif with long vertical stress, body copy uses a disciplined Japanese gothic sans, and dates, districts, issue numbers, and timing labels run in compact monospace uppercase strips that read like production metadata.
- Primary screens are composed as asymmetrical multi-column spreads with narrow side rails, stacked annotation slips, and inset caption columns, creating several simultaneous reading paths instead of one centered content funnel.
- Accent gestures appear as salmon underline bars, pale ink side slips, and rotated district stickers that overlap panel edges by a few pixels, introducing controlled interruption without breaking the base grid.
- Imagery is always cropped into editorial windows such as tall vertical slices, narrow panoramic strips, and split photo panes, with each frame carrying visible captions, folio numbering, or archive labels rather than floating as decorative wallpaper.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#111111` |
| secondary | `#5B5B5B` |
| accent | `#E94B35` |
| background | `#F4F0E8` |
| surface | `#FFFDF8` |
| text | `#151515` |
| muted | `#746E67` |
| border | `#1E1E1E` |
| error | `#C43D2F` |
| success | `#2E6B57` |
| warning | `#D08A22` |
| info | `#3D63A8` |

### Typography

- **Heading Font**: Cormorant Garamond
- **Body Font**: Zen Kaku Gothic New
- **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=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,40,48,64]
- **Outer Margin**: 24px
- **Module Padding**: 18px
- **Gutter**: 18px

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(0,0,0,0.08)
- **Md**: 0 8px 24px rgba(17,17,17,0.08)
- **Lg**: 0 18px 50px rgba(17,17,17,0.12)

### Surfaces

- **Treatment**: paper
- **Card Style**: warm paper panels with crisp inset rules, full-width metadata strips, cropped media windows, and occasional tinted annotation slips that feel pasted into an editorial spread
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: crisp newspaper-like rules with selective heavier dividers for feature packages, issue markers, and subscription stamps so borders actively create hierarchy rather than merely outlining boxes

### Motion

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

## Rules

### Composition

Compose every screen as an unequal editorial spread built on a strict grid. Large features should sit beside narrow rails, diary notes, schedule strips, or citation columns so the eye can travel horizontally before it travels vertically. Keep modules rectangular and paper-like, but subdivide them internally with kickers, captions, inset sidebars, and rule-separated metadata.

### Hierarchy

Hierarchy should come from column span, crop proportion, type contrast, and the amount of visible metadata rather than oversized hero chrome. Feature stories earn larger serif headlines and bigger image windows, service information uses compact sans blocks, and navigation or filters read as monospace production controls. Calls to action should feel stamped, tabbed, or proof-marked instead of glossy.

### Density

Dense but edited. Every viewport should show multiple active stories, notes, and utilities at once, while consistent spacing, thin rules, and disciplined type scales prevent the page from collapsing into noise. The system should feel like an arranged publication board rather than a dashboard of interchangeable widgets.

### Signature Patterns

- Every major module starts with a full-width metadata band in uppercase monospace, separated from the content area by a thin bottom rule so each panel reads like a tagged editorial asset.
- Feature blocks use asymmetrical internal grids such as 8/4, 7/5, or stacked slice-plus-sidebar arrangements, with at least one narrow companion column carrying notes, figures, or captions beside the primary story.
- Salmon underline bars and small rotated district stickers overlap panel edges by a few pixels, creating deliberate editorial interruption that feels pasted or stamped onto the spread.
- Photo areas are framed as editorial crops—vertical slices, panoramic strips, or split panes—and every image frame includes visible captions, folio numbering, or archive references inside the module.
- Section transitions are marked by oversized low-contrast folio numerals paired with thin horizontal rules, simulating the pacing and sequencing of turning through a magazine issue.

## Layout

### Grid

Desktop uses a 12-column layout inside a 1440px frame with 18px gutters and 24px page padding. Tablet compresses to 8 columns while preserving metadata bands, narrow side notes, and paired story structures. Mobile becomes a 4-column stack where side rails convert into full-width slips but remain visibly attached to their parent modules.

### Breakpoints

Desktop: 1200px and above. Tablet: 700px to 1199px. Mobile: below 700px. At tablet, wide editorial spreads collapse into stacked feature packages with retained kicker bars and caption strips. At mobile, controls, article rails, and utility panels become full-width blocks while preserving folio markers and metadata visibility.

### Whitespace

Whitespace behaves like editorial pacing rather than luxury emptiness. Use active gutters between modules, blank paper bands to separate sections, and tighter internal spacing inside data-rich panels so density still feels intentionally sequenced.

### Density

Maintain visible richness at every size by showing several concurrent stories, notes, and controls without tabs or accordions hiding basic context.

## Guidance

### Do

- Combine serif display, gothic sans body text, and monospace metadata so each text layer has a distinct editorial job.
- Keep dates, districts, issue numbers, captions, and reading time visible inside modules instead of treating them as optional extras.
- Use cropped media windows, caption strips, and narrow annotation rails so imagery feels selected and edited rather than dropped into generic cards.
- Place at least one sidebar slip, quote rail, or stat column beside a major story in every viewport.
- Style buttons, filters, checkboxes, selects, and tabs as printed production controls with rules, labels, and stamp-like emphasis.

### Don't

- Do not collapse the experience into a single centered hero followed by identical cards.
- Do not apply the same image ratio, headline scale, and padding rhythm to every content block.
- Do not introduce frosted glass, plush neumorphism, or glossy gradients that fight the paper-and-ink vocabulary.
- Do not hide essential metadata behind hover states, nested menus, or secondary detail drawers.
- Do not leave browser-default form controls or detached accent stickers that ignore the grid structure.

## Imagery Direction

### Illustration Style

Documentary photography, halftone textures, simple line annotations, and occasional collage fragments rather than glossy product renders.

### Hero Image Direction

Use tightly cropped city fragments, interiors, posters, shelves, streets, and hands-in-action; prioritize editorial crops over centered subject portraits.

### Icon Style

Hairline editorial glyphs, arrows, folio marks, and transit-like labels.

### Image Gen Prompts

- Japanese editorial magazine spread aesthetic, warm paper texture, urban culture coverage, tightly cropped photography, crisp black rules, subtle red accent labels
- City guide newspaper layout with vertical photo slices, serif headlines, mono metadata, paper background, disciplined editorial spacing

## Generative Canvas

### Webgl Techniques

- none by default

### Canvas Effects

- subtle grain overlay
- optional scrolling underline reveal

### Shader Palette

- #F4F0E8
- #FFFDF8
- #E94B35
- #151515

### Animation Philosophy

Motion should feel like paper pieces sliding into place or underlines advancing across a proof, never like immersive cinematic spectacle.