Why CSS tables killed the vibe—and why pure terminal character tables fix it.

When a brutalist page mixes raw HTML serif text with modern CSS-styled <table> cards (gray header bars, uppercase micro-labels, CSS cell borders, gray footers), two problems happen immediately:

Style collision: CSS tables look like a modern SaaS billing dashboard, fighting against the raw 1995 HTML nostalgia of motherfuckingwebsite.com and berkshirehathaway.com.
Visual monotony: Every widget becomes the exact same gray-header rectangle, making 6 sections feel like one endless tax form.

The Fix (Hard Two-World Boundary):
Human arguments use 100% raw browser Serif (h1, h2, p, native ul/ol). Machine & market data uses 100% fixed-width Terminal Character Art (where borders, trees, dot-leaders, and bars are drawn out of monospace characters: ┌─┬─┐, ═══, +---+, ......., ├─ └─, █░).

FONT & TABLE ARCHITECTURE (2 FONTS · 0 CSS CARDS)
════════════════════════════════════════════

1. HUMAN VOICE -> RAW HTML SERIF
   Font: Georgia, "Times New Roman", serif
   Used ONLY for:
   ├─ H1, H2 headlines (bold, balanced)
   ├─ Body paragraphs (16px-17px, max 58ch)
   └─ Native HTML <ul> / <ol> lists

2. MACHINE VOICE -> RETRO TERMINAL MONOSPACE
   Font: ui-monospace, SF Mono, Menlo, mono
   Used ONLY for:
   ├─ T1: Double-rule market board (═══ / ───)
   ├─ T2: Box-drawn grid table (┌─┬─┐ / │)
   ├─ T3: ASCII plus table (+---+---+ / |)
   ├─ T4: Dot-leader receipt (item ..... €0.10)
   ├─ T5: UNIX character tree (├─ / │ / └─)
   └─ T6: Character bar & curve (██░░ / ┼ ╲)

════════════════════════════════════════════
NO GRAY CARD HEADERS. NO UPPERCASE MICRO-LABELS.
NO FOOTNOTE BARS. ONLY SERIF TEXT + CHAR ART.

A · The 4 Serif Text Styles (Human Voice)

We killed h3, .fine footnotes, .block-head, .block-foot, and .alert. Only four serif text styles exist:

[S1 · H1 Page Headline] — clamp(1.85rem, 1.1rem + 3.6vw, 3.2rem) · Bold 700 · Line-height 1.06

Take the internet back.

[S2 · H2 Section Headline] — clamp(1.35rem, 1rem + 1.6vw, 2.05rem) · Bold 700 · Line-height 1.14

Three posts should cost three posts.

[S3 · Body Paragraph <p> + <b>] — 15.5px mobile / 16.5px desktop · Line-height 1.55 · Max 58ch

Subscriptions are a human UX. Your AI agent shouldn't need a $29/month SaaS plan just to perform one action. Pay per atomic call, get a receipt, and stop when you want.

[S4 · Brutalist HTML List <ul> / <ol>] — Native browser bullets/numbers

Quote first: Agent checks the price before spending a cent.
Execute inside cap: Hard monthly spend limit controlled by you.
Auto-refund: Failed destinations refund on the spot.

B · The 4 Monospace Styles (Machine Voice)

Monospace is strictly for numbers, tickers, commands, and 44-column character tables:

[M1 · HN Top Utility Bar] — 12px mobile / 13px desktop on #e8e8e0

[↘] UNBUNDLE market | pricing | letter invite ↘

[M2 · Inline Ticker / Code <code>] — Inline inside serif prose

Use #001 SOC.PUB at €0.10/post or wrap your own API with npm create unbundle.

[M3 · Paper Terminal Char Block (.retro-paper)] — #000000 on #ffffff, 44 cols

RECEIPT · Held €0.50 -> Refund -€0.10 = €0.40

[M4 · Dark Terminal Char Block (.retro-term, Rule C)] — #eceee8 on #0c0d0b with .t-hi (amber) & .t-down (green)

#001 SOC.PUB · €0.10 -> €0.04 ↘ [FREED]

The 6 Retro Terminal Table & List Primitives

Every data block is capped at 44 columns wide so it fits a 390px mobile screen edge-to-edge with zero horizontal scrolling.

STYLE T1 · DOUBLE-RULE MARKET BOARD (═══)
════════════════════════════════════════════
TICKER         CAPABILITY      PRICE / CALL
────────────────────────────────────────────
#001 SOC.PUB   Social publish  €0.10→€0.04 ↘
#002 EMAIL.VFY Email verify    [queued]
#003 SEO.SERP  Live SERP data  [queued]
#004 WEB.SHOT  URL screenshot  [queued]
#005 PDF.MD    PDF -> Markdown [queued]
#006 YOUR.CAP  Wrap your API   npm create ↘
════════════════════════════════════════════

STYLE T2 · BOX-DRAWN GRID TABLE (┌─┬─┐)
┌─────────────────┬───────┬───────┬────────┐
│ DESTINATION     │  SERV │   NET │  TOTAL │
├─────────────────┼───────┼───────┼────────┤
│ X (post + URL)  │ €0.10 │ €0.20 │  €0.30 │
│ LinkedIn        │ €0.10 │ €0.00 │  €0.10 │
│ Bluesky         │ €0.10 │ €0.00 │  €0.10 │
├─────────────────┴───────┴───────┼────────┤
│ QUOTE TOTAL (held at publish)   │  €0.50 │
└─────────────────────────────────┴────────┘

STYLE T3 · DOT-LEADER CASH RECEIPT (.......)
============================================
Held at publish (3 destinations) ..... €0.50
├─ X · service fee .......... [posted] €0.10
├─ X · network cost ......... [posted] €0.20
├─ LinkedIn · service fee ... [posted] €0.10
├─ Bluesky · service fee .... [FAILED] €0.10
└─ Refunded (Bluesky) ....... [refund]-€0.10
--------------------------------------------
CHARGED TO WALLET .................... €0.40
============================================

STYLE T4 · ASCII PLUS MATRIX (+---+---+)
+----------------------+-------------------+
| HOW YOU POST         | CHEAPEST FIT      |
+----------------------+-------------------+
| <=3 channels by hand | Buffer Free (€0)  |
| Daily human team     | Postiz ($29/mo)   |
| 1,000+ API posts/mo  | PostForMe ($10/m) |
| Agent, a few/week    | SOC.PUB (€0.10 ↘) |
+----------------------+-------------------+

STYLE T5 · UNIX TREE LIST (├─ / │ / └─)
OLD WORLD (BUNDLED SAAS RENT)
├─ $29/mo social scheduler
├─ $49/mo SEO keyword suite
├─ $49/mo email verification plan
├─ $50/mo screenshot API subscription
└─ = $177/mo fixed rent (98% unused)

NEW WORLD (UNBUNDLE ↘ PER-CALL WALLET)
├─ €0.10 -> €0.04/call across capabilities
├─ quote -> execute -> itemized receipt
├─ wrap & sell your own: npm create unbundle
└─ route to the cheapest verified clone ↘

STYLE T6 · CHAR BARS & STEP CURVE (█░ / ┼ ╲)
1 LAUNCH POST (X + LINKEDIN + BLUESKY):
  $29 SaaS  █████████████  ~€27/mo rent wall
  SOC.PUB   █░░░░░░░░░░░░  €0.50 total ↘

VOLUME DEFLATION CURVE (CAP: €15.00/MO):
  €0.10 ┼ ████████ (1-20 publishes/mo)
  €0.07 ┼          ████████ (21-100) ↘ -30%
  €0.04 ┼                   ████████ (101+)
  €0.00 └─────────┬────────┬────────► VOL