Hub
GRID SYSTEM / 12-COL / 2024
BRUTALIST

No Frills. Pure Structure.

Brutalist design exposes every structural element. The grid is not hidden — it IS the design. Thick borders, raw typography, visible columns: nothing is decorated, everything is declared. This is architecture, not illustration.

RAW / UNPOLISHED
Grid Anatomy — 12 Columns / Visible Gutters
01
02
03
04
05
06
07
08
09
10
11
12
SPAN 325%
SPAN 325%
SPAN 650%
SPAN 433%
SPAN 866%
FULL WIDTH — SPAN 12 — THE GRID IS THE DESIGN — STRUCTURE OVER DECORATION
Manifest /
Spec Sheet
01 NO ROUNDED CORNERS. BORDER-RADIUS IS BANNED.
02 BORDERS MINIMUM 4PX. EVERY EDGE VISIBLE.
03 NO GRADIENTS. NO SHADOWS. NO GLOW.
04 MONOSPACE FOR DATA. DISPLAY FOR IMPACT.
05 THE GRID IS NOT HIDDEN. THE GRID IS THE DESIGN.
06 IF IT LOOKS COMFORTABLE, YOU'RE DOING IT WRONG.
APPROVED

Overlap
Is Intent

Collision
Creates Tension

Z-INDEX: 3 / GRID-COLUMN: 2 / 10 / MARGIN-TOP: 90PX — DELIBERATE STRUCTURAL INTERFERENCE
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
DIV
01 Keep backgrounds flat. Create contrast through borders, text weight, and raw structure. No decoration.
02 Alignment and division over spacing. The grid itself is visible — columns, gutters, borders are the design language.
03 Buttons and elements are solid-color blocks with thick borders. Every component declares its own boundaries.

AI Request Prompt

Design a landing page in Brutalist Grid style — experimental product showcase with raw structure and high-contrast blocks.

COLOR TOKENS:
--bg: #e6e6e1
--ink: #111
--red: #d72600
--yellow: #ffd12f
--panel-bg: #fff
--side-bg: var(--yellow)
No other colors. Background is flat var(--bg). No gradients on backgrounds.

TYPOGRAPHY:
Heading: 'Archivo Black' 400 (single weight), uppercase, tracking -0.01em
Body: 'IBM Plex Mono' 400 / 500 / 700
Scale: clamp(2rem, 5.4vw, 4.2rem) for h1
Heading line-height: 0.95
Body line-height: 1.65
Hero paragraph max-width: 560px

UI:
Grid container: 12-column grid, 3px solid var(--ink) outer border
Hero: grid-column span 8, border-right 3px solid var(--ink), border-bottom 3px solid var(--ink), padding clamp(18px, 3.5vw, 36px), background #fff
Sidebar: grid-column span 4, border-bottom 3px solid var(--ink), padding 18px, background var(--yellow)
Stats: border-top 2px solid var(--ink), padding-top 10px, margin-top 10px, font-weight 700
Panels: grid-column span 4, border-right 3px solid var(--ink), padding 16px, background #fff (last panel border-right 0)
Buttons: 2px solid var(--ink), background var(--red), color #fff, padding 7px 12px, font-family inherit, no border-radius

LAYOUT:
Content max-width: min(1160px, 94vw)
Page padding: 20px 0 70px
Grid: 12-column, hero 8col + side 4col row, then 3 equal panels row
No gap between grid cells — borders serve as dividers

MOTION:
Entrance: translateX(-8px) → 0, opacity 0 → 1, 550ms steps(2, end), stagger 120ms per panel
Hover: none — static interface
No scroll-triggered animations. Respect prefers-reduced-motion.

RESPONSIVE:
850px: All grid items → span 12, border-right removed, single column stack
1160px: Full 12-column grid, 8+4 hero split, 3-panel row

FORBIDDEN:
- Horizontal scroll at any viewport
- Smooth gradients, glows, or soft shadows
- Rounded corners (border-radius) on any element
- Pastel tones or low-contrast color combinations
- Decorative imagery or illustrations
- Smooth easing functions — use steps() only

OUTPUT:
1) Color + typography tokens as CSS custom properties
2) Component structure: 12-col grid with Hero (8col), Sidebar (4col), Info panels (3x 4col)
3) Semantic HTML + CSS with responsive support