Signal Press Brutalism

# Signal Press Brutalism

## Philosophy

Signal Press Brutalism is a publication-first interface language shaped by independent magazines, photocopied zines, poster systems, and early brutalist web attitudes. It treats the screen like a production board: headlines are oversized and blunt, utility text is monospaced and annotated, images are cropped like pasted print fragments, and the grid stays visible as part of the composition rather than being hidden behind polish.

### Values

- Editorial hierarchy must feel immediate and forceful, with covers, decks, side notes, and issue labels behaving like print matter translated to screen.
- Material roughness is a feature: visible rules, registration offsets, grain, hard crops, and taped-note motifs make production artifacts part of the interface identity.
- Utility and expression coexist: forms, filters, navigation, and reading tools stay usable, but they inherit the same raw typographic and structural language as the feature content.
- Asymmetry and interruption are encouraged when they sharpen hierarchy and pacing rather than creating random chaos.

### Anti-Values

- Soft SaaS polish, glassmorphism, and luxury gradients that erase the sense of printed matter.
- Neutral component-library layouts where every card, button, and panel shares the same generic rounded-box treatment.
- Excessive animation smoothness or ornamental motion that makes the interface feel premium rather than mechanical and editorial.

### Visual Character

- Oversized condensed sans-serif headlines sit inside rigid black rule frameworks, often paired with small uppercase monospace metadata strips that read like pasted production labels.
- Cards and panels use thick 3px black borders, square corners, and offset fluorescent underlays or misregistered pseudo-elements so each block looks like an overprinted poster mounted on the page.
- Page sections expose the grid with asymmetric columns, broad gutters, vertical rule dividers, and marginal annotation rails instead of hiding structure behind seamless card masonry.
- Images appear as harsh editorial crops with grayscale or duotone treatment, grain overlays, caption bars, and surrounding crop-mark details that mimic scanned print layouts.
- Accent color is used like spot ink or marker pen in abrupt slashes, label strips, and pull-quote highlights rather than smooth background fills or ambient glows.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#0a0a0a` |
| secondary | `#f3efe6` |
| accent | `#ff5a1f` |
| background | `#f1ede3` |
| surface | `#fffdf8` |
| text | `#111111` |
| muted | `#5f5a52` |
| border | `#101010` |
| error | `#c92a2a` |
| success | `#18794e` |
| warning | `#d97904` |
| info | `#0b7285` |

### Typography

- **Heading Font**: Archivo Condensed
- **Body Font**: IBM Plex Sans
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.5
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Condensed:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 0
- **Md**: 0
- **Lg**: 0
- **Full**: 9999px

### Shadows

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Off-white paper panels with visible grain overlay, stark black rules, and fluorescent offset backplates.
- **Bg Pattern**: grid

### Borders

- **Default Width**: 3px
- **Accent Width**: 6px
- **Style**: solid
- **Character**: Heavy print-shop rules, square-corner frames, divider bars, and label outlines should be a primary visual ingredient, not a finishing detail.

### Motion

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

## Rules

### Composition

Compose pages like issue covers and feature spreads: anchor the screen with one dominant headline block, support it with stacked metadata bands, then break the grid with secondary stories, pull quotes, and utility panels that feel pinned into place. Major regions should read as editorial modules rather than generic product cards.

### Hierarchy

Hierarchy comes from scale contrast, border weight, label treatment, and abrupt column shifts. Headlines should be dramatically larger than body text; monospace annotations and issue numerals create intermediate layers; captions and utility controls remain smaller but high-contrast and boxed.

### Density

Moderately dense. Pack the page with information and visible navigation options, but preserve reading rhythm through disciplined spacing bands, strong dividers, and clear module separation.

### Signature Patterns

- Every major panel uses a square 3px black frame plus an offset pseudo-element backplate in fluorescent orange or acid lime to create deliberate misregistration and overprint energy.
- Section headers combine giant condensed uppercase typography with a horizontal rule stack and small monospace kicker labels, producing a cover-line system instead of standard card titles.
- Metadata, captions, and control labels sit inside bordered strip elements with uppercase mono text, mimicking pasted tape labels and production notes across the interface.
- Feature imagery is wrapped with crop-mark corners, grain overlays, and caption bars so media reads like scanned printed matter rather than clean product photography.
- The layout uses exposed editorial rails: vertical divider lines, asymmetric multi-column spans, and margin notes that intentionally reveal the page grid as a compositional device.

## Layout

### Grid

Desktop uses a 12-column editorial grid with persistent left utility rail and flexible feature spans; tablet reduces to 8 columns with stacked rails; mobile becomes a single-column feed with preserved label strips and full-width modules.

### Breakpoints

Desktop 1440px and above, tablet 768px to 1439px, mobile 375px to 767px.

### Whitespace

Whitespace is disciplined rather than airy: tight internal padding for labels and controls, larger band spacing between major editorial modules, and deliberate gutters that keep the exposed grid legible.

### Responsive

- **Desktop**: Three-zone composition with masthead, feature well, and utility rail.
- **Tablet**: Feature and secondary modules stack into two columns while the utility rail converts into horizontal toolbars.
- **Mobile**: Single-column flow with headline block first, controls and metrics stacked, full-width buttons, and horizontally scrollable data only when necessary.

## Guidance

### Do

- Use condensed display typography for headlines and issue numbers, with monospaced labels for metadata, controls, and navigational wayfinding.
- Keep borders heavy, corners square, and module layering visible through offset plates, rule dividers, crop marks, and caption bars.
- Treat imagery as editorial material: crop aggressively, add captions, and let grain or duotone treatments reinforce the publication feel.
- Design complete reading scenes with filters, subscription prompts, issue navigation, and article modules instead of isolated component catalogs.

### Don't

- Do not soften the system with pill buttons, large border radii, translucent glass cards, or ambient gradient washes.
- Do not rely on neutral product-dashboard composition where all blocks have equal weight and the page loses cover-line hierarchy.
- Do not use polished icon packs or cute illustrations that undermine the raw print-shop and independent-publication tone.
- Do not hide the grid under excessive spacing; the structure should remain visibly authored and editorial.