Risograph Spot-Color Editorial

# Risograph Spot-Color Editorial

## Philosophy

A web editorial language that translates risograph print logic into interface form: limited spot-color layers, visible grain, poster-scale composition, and intentionally imperfect registration used as personality rather than error. It feels like an illustrated weekend magazine assembled from bold cut-paper shapes and overprinted inks.

### Values

- limited palettes over full-spectrum color abundance
- analog warmth over sterile pixel perfection
- graphic storytelling over widget catalogs
- deliberate texture and print artifacts as identity
- bold hierarchy through scale, silhouette, and overprint contrast

### Anti-Values

- glassmorphism and luminous chrome
- hyper-real gradients and polished 3D depth
- tiny fussy detail work
- generic SaaS dashboards
- perfectly aligned frictionless minimalism

### Visual Character

- two- or three-ink spot-color palette on warm paper background
- full-page grain and paper-fiber texture overlays across large surfaces
- slight offset registration shadows where color layers intentionally misalign by a few pixels
- flat silhouette illustrations built from simple geometric cutout shapes
- poster-like hero compositions with oversized headlines and asymmetric editorial blocks

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#ff5fa2` |
| secondary | `#2f6bff` |
| accent | `#ff4438` |
| background | `#f6eddc` |
| surface | `#f3e7d1` |
| text | `#1f1a17` |
| muted | `#6f655e` |
| border | `#1f1a17` |
| error | `#d5442f` |
| success | `#2f8b57` |
| warning | `#c78a16` |
| info | `#2f6bff` |

### Typography

- **Heading Font**: Archivo Black
- **Body Font**: Newsreader
- **Mono Font**: IBM Plex Mono
- **Base Size**: 18px
- **Scale Ratio**: 1.2
- **Line Height**: 1.55
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:wght@400;500&family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 6px
- **Md**: 14px
- **Lg**: 24px
- **Full**: 9999px

### Shadows

- **Sm**: 0 2px 0 rgba(31,26,23,0.12)
- **Md**: 0 6px 0 rgba(31,26,23,0.14)
- **Lg**: 0 10px 0 rgba(31,26,23,0.16)

### Surfaces

- **Treatment**: paper
- **Card Style**: warm paper panels with screenprint texture and occasional spot-color flood areas
- **Bg Pattern**: noise

### Borders

- **Default Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: inked editorial rules and poster-edge frames that feel hand-pressed rather than digitally sharp

### Motion

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

## Rules

### Composition

Build pages as magazine spreads rather than app screens: one dominant poster hero, stacked story bands, pull-quote interruptions, and interleaved illustration panels. Prefer asymmetry, large blocks of color, and obvious editorial pacing.

### Hierarchy

Use oversized all-caps display headlines, compact monospace labels, and calmer serif body copy. Hierarchy comes from scale jumps, ink block contrast, and deliberate misregistered shadow layers.

### Density

Medium density with spacious margins around hero content and tighter stacked details in article cards. Keep modules bold and few rather than many small utilities.

### Signature Patterns

- headlines use a duplicated offset ink layer behind the main text to simulate slight registration drift
- major panels include noise or halftone grain overlays using pseudo-elements
- illustration blocks are composed from flat silhouette shapes with no internal shading
- section frames and dividers use thick poster-rule borders and taped label chips
- feature cards alternate full spot-color floods with paper panels to mimic printed spreads

## Layout

### Grid

A 12-column editorial grid on desktop, collapsing to 8 columns on tablet and 4 columns on mobile, with asymmetric hero spans and staggered secondary modules.

### Breakpoints

mobile: 0-767px, tablet: 768-1099px, desktop: 1100px+

### Whitespace

Use generous outer margins, poster-like vertical spacing between story bands, and compressed internal spacing inside labels and metadata strips.

## Guidance

### Do

- limit each screen to two dominant inks plus paper
- let texture visibly sit on top of otherwise simple geometry
- use illustrations and silhouettes as structural anchors
- embrace tiny misalignments that suggest physical print layers
- compose scenes that feel like covers, spreads, or feature packages

### Don't

- introduce glossy UI chrome or translucent glass cards
- use more than a few accent hues at once
- smooth away grain, fibers, and print irregularity
- fill layouts with generic component-library patterns
- replace bold editorial scale with tiny balanced interfaces