Ukiyo Glitch Brutalism

# Ukiyo Glitch Brutalism

## Philosophy

Ukiyo Glitch Brutalism fuses the disciplined flatness and contour drama of Japanese woodblock prints with the confrontational utility of digital brutalism. The result is a product language built from bold inked boundaries, deliberate emptiness, poster-like color planes, and sharp technological interference. It treats the interface as a printed sheet interrupted by signal corruption: elegant negative space is sliced by scanlines, registration offsets, and hard-edged utility panels.

### Values

- Respect negative space as an active compositional force, not leftover area.
- Use contours and frame lines to define structure before relying on shadow or blur.
- Keep color fields flat and intentional, echoing inked blocks rather than gradients.
- Let digital artifacts feel designed: glitches, offsets, and scanlines should sharpen identity, not reduce clarity.
- Compose asymmetrically with clear visual gravity so the page feels curated like a print poster.
- Balance poetic calm and harsh utility so the interface feels both crafted and immediate.

### Anti-Values

- Soft glassmorphism and atmospheric blur.
- Symmetrical dashboard grids that erase tension.
- Overly realistic textures or ornamental faux-Japanese motifs.
- Color noise without hierarchy.
- Tiny low-contrast controls that disappear into the page.

### Visual Character

- thick near-black ink outlines framing every major panel and control
- dramatic negative space with oversized quiet margins around one dominant content column
- flat vermilion, indigo, parchment, and pine-green color blocks with almost no gradients
- digital glitch overlays using scanlines, misregistered color shadows, and clipped horizontal bands
- asymmetric compositions with stacked side labels, vertical tags, and offset panel corners

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#C53A2F` |
| secondary | `#1F3A5F` |
| accent | `#2A8C6E` |
| background | `#F3E9D2` |
| surface | `#F8F1E1` |
| text | `#171311` |
| muted | `#7E6F5C` |
| border | `#171311` |
| error | `#A12822` |
| success | `#2F6B50` |
| warning | `#B06A1A` |
| info | `#345AA8` |

### Typography

- **Heading Font**: Zen Kaku Gothic New
- **Body Font**: Shippori Mincho B1
- **Mono Font**: Share Tech Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.55
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;700;800&family=Share+Tech+Mono&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 4px
- **Md**: 10px
- **Lg**: 18px
- **Full**: 9999px

### Shadows

- **Sm**: 4px 4px 0 #171311
- **Md**: 8px 8px 0 #171311
- **Lg**: 12px 12px 0 #171311

### Surfaces

- **Treatment**: paper
- **Card Style**: flat parchment panels with occasional solid color slabs and glitch overlays
- **Bg Pattern**: lines

### Borders

- **Default Width**: 3px
- **Accent Width**: 5px
- **Style**: solid
- **Character**: dense sumi-like outlines with emphatic outer frames and occasional double-rule dividers

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(0.2, 0.9, 0.2, 1)
- **Philosophy**: snappy

## Rules

### Composition

Anchor each screen with one dominant narrative panel, one offset utility rail, and several smaller slabs that feel pinned around it. Use asymmetry, but keep reading order obvious through strong framing and label systems.

### Hierarchy

Headlines and numeric status blocks dominate through scale and border weight, while supporting copy sits in restrained serif text. Utility labels use mono microtype and vertical tags to create navigational rhythm.

### Density

Moderate density: enough tools and data to feel operational, but with intentional gaps so negative space preserves the print-inspired calm.

### Signature Patterns

- panels use clipped or stepped corners instead of perfect rectangles
- major surfaces include pseudo-element glitch bands made from repeating-linear-gradient scanlines
- headlines and badges use subtle color-channel offset shadows to imply print misregistration
- section markers appear as vertical cartouche labels pinned to panel edges
- key dividers use double rules or heavy border stacks rather than thin separators

## Layout

### Grid

Desktop uses a 12-column asymmetric composition with a wide main sheet, narrow utility rail, and offset floating strips. Tablet collapses to 8 columns with the rail moving below the hero. Mobile becomes a single-column stack with full-width actions and horizontally scrollable dense data only where necessary.

### Breakpoints

mobile: 0-599px, tablet: 600-959px, desktop: 960px+

### Whitespace

Preserve large top and side breathing space around the hero sheet. Within panels, padding should feel like printed margins: generous for narrative blocks, tighter for data modules.

## Guidance

### Do

- Do let one color field dominate each region while neighboring panels stay parchment or indigo.
- Do use thick outlines on cards, inputs, buttons, tables, and alerts so structure reads instantly.
- Do preserve large breathing areas and let some zones remain intentionally sparse.
- Do use glitch overlays sparingly as a structural motif on headers, chips, and media frames.
- Do style all form controls with the same inked frame language.
- Do keep interactions tactile through offset shadows and pressed states.

### Don't

- Do not fill every area with decoration; emptiness is part of the style.
- Do not use smooth gradients, glass blur, or soft neumorphic depth.
- Do not center everything; the language depends on directional tension.
- Do not treat glitch as random damage or illegible distortion.
- Do not leave browser-default checkboxes, selects, or buttons visible.
- Do not overuse rounded corners or cute iconography.