RAW//BLOCK brutalist component system · v1 · MIT OPE DASHBOARD

RAW BLOCK.
NO POLISH.

Thick 3–5px borders replace shadows. Zero rounded corners. Full black/white inversion on hover and active states. Source design kit.

01

COLORS

#000 · #FFF · #0000FF(labels only)

BLACK #000000
TEXT · BORDERS · FILLS

WHITE #FFFFFF
BACKGROUND · INVERSE TEXT

BLUE #0000FF
HYPERLINKS ONLY

SUCCESS #008000

WARNING #FFA500

ERROR #FF0000

SUNKEN #F0F0F0
INPUT FILL

DISABLED BORDER #CCCCCC

02

TYPOGRAPHY

Archivo Black · Work Sans · Space Mono

H1 · 64PX · ARCHIVO BLACK

H2 · 48PX · ARCHIVO BLACK

H3 · 32PX · ARCHIVO BLACK

H4 · 22PX · WORK SANS SEMIBOLD

Body — Work Sans 16px regular, 1.6 line height. Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard. Links stay blue.

Small — Work Sans 14px regular, 1.5 line height. Every letter tells a story worth reading.

Tiny — Work Sans 12px regular, 1.4 line height. Every letter tells a story worth reading.

Mono — Space Mono 15px regular, 1.5 line height. run_id: ope-1726190000

03

BUTTONS

uppercase · 2px tracking · 3px border · inversion hover
Primary · Secondary · Ghost · Destructive
Sizes · Disabled
04

CARDS

3px default · 5px elevated · no shadow

CARD TITLE

Sample body text for the card component. White fill, 3px black border, square, 24px padding, no shadow.

ELEVATED CARD

A heavier 5px border marks importance. Hierarchy comes from border weight and scale — never from shadows.

FAIL · 7 FINDINGS
05

INPUTS

#F0F0F0 fill · Space Mono 15 · 3→5px focus border

We never store credentials. Local env only.

Please enter a valid email

06

CHIPS

filter (invert on active) · status (colored 2px borders)

Filter chips

Status chips

PASS WARNING FAIL UNKNOWN INFO
07

LISTS

3px dividers · underline hover · inverted active
  • 03-CODE-META-001 — Document has no title P49.0
  • 14-A11Y-IMG-001 — 3 of 8 images lack alt text P28.8
  • 16-SEC-CSP — Security header missing P11.2
  • 06-SEM-JSONLD-001 — No JSON-LD detected P9.6

Checks + radios

08

TOOLTIP

black block · Space Mono 13 · adjacent · no arrow
09

INVERTED SURFACE

full inversion for emphasis sections

ZERO → DOMINANCE.

SADAK SE UTHA KR STAR BNA DUNGA. One engine. Every platform. Real growth — borders, type and evidence do all the talking.

OPEN OPE DASHBOARD
10

DO / DON'T

DO

  • Use thick 3–5px borders as the primary visual organizer.
  • Invert fills fully for hover and active states.
  • Use Archivo Black at 48–64px for maximum impact.
  • Embrace asymmetric, intentionally irregular layouts.
  • Uppercase + tracking for buttons and labels.

DON'T

  • Round any corners — sharp edges are non-negotiable.
  • Use opacity for disabled states; grey fills only.
  • Use #0000FF for anything except hyperlinks.
  • Add decorative images, icons or illustrations.
  • Polish, refine, or add shadows. Ever.