The Daily Cyborg — Visual Identity Reference

The Daily Cyborg — Visual Identity Reference

The One-Liner

80’s Matrix Reloaded — a broadsheet newspaper printed on an ancient, slightly haunted CRT terminal.

The site’s aesthetic is a collision of two eras that shouldn’t coexist: Gothic blackletter (think illuminated manuscripts and 19th-century mastheads) and phosphor-green terminal output (think 1980s workstation in a dark room). Neither dominates. The result reads like something dug up — a transmission from a future that already passed, printed on newsprint that was scanned and compressed and is now glowing faintly on a failing monitor.

The newsletter covers the human-machine frontier, and the design embodies the tension: old craft meets new signal. It is intentionally not sleek. It is intentionally not modern. It earns its CRT effects by restraint — everything is muted, everything is slightly wrong in the way that old hardware is slightly wrong. A técnicos-precise broadsheet worn by human hands.

Palette — “V1 Muted Phosphor”

This is the canonical palette. Never substitute bright/saturated values.

Glow Policy

No glow anywhere except one place: the masthead title (h1.masthead-title) keeps a single gentle residual phosphor glow:

text-shadow: 0 0 18px oklch(0.78 0.11 142 / 0.28), 0 0 2px oklch(0.78 0.11 142 / 0.6);

Hover states, buttons, rules, cards — no glow. Color or border changes only.

Typography

Five typefaces. Each has a fixed role. Do not swap them.

Typography Rules

• Masthead: clamp(3rem, 8vw, 6.5rem), centered, font-weight 400 (blackletter is already heavy)
• Post titles: ALL CAPS, letter-spacing: 0.04em, font-weight: 700
• Nav links: ALL CAPS, font-size: 0.75rem, letter-spacing: 0.25em
• Section labels: VT323, bracketed with ∷ label ∷ syntax
• Drop caps: UnifrakturMaguntia, font-size: 5rem, phosphor color, float left — explicit .drop-cap class only, never auto-applied to p:first-of-type

Ambient Effects

These define the CRT atmosphere. All are suppressable via readable mode.

Glyph Rain Character Set

Katakana mixed with code symbols: アイウエオ… + 01010110+-*/<>[]{}. NOT full matrix rain — only 70% column density, slow drift speed (0.55 px/frame), no bright head glyphs. Subtle.

Image Treatment

All thumbnails: filter: saturate(0.55) brightness(0.82) — desaturated, slightly dark. Hover lifts to saturate(0.8) brightness(0.95). Never full color, never full brightness. Photos on the About page and the cyborg-tension banner use filter: sepia(0.12) contrast(1.05) instead.

Readable Mode

Readable mode is an accessibility escape hatch, not an alternative brand expression. Toggle via the Aa button (stored in localStorage as data-readable="true" on <html>).

When active:

• Grain, scanlines, glyph rain, and flicker all disappear
• Body font switches to -apple-system system sans-serif
• Colors shift to high-contrast warm whites (#f0ede6)
• Dark backgrounds remain — this is not a light mode

The CRT experience is the identity. Readable mode is a courtesy.

Layout System

• Max content width: 1200px
• Post body max width: 720px (centered, generous margins)
• Column gap: 2rem (desktop), 1rem (mobile)
• Homepage: broadsheet grid — lead post spans full width, subsequent posts in two columns below
• Border radius: zero everywhere. All corners are square.
• Borders: hairline only (1px solid var(--rule) or var(--rule-faint)). No thick decorative borders except the weekend section divider (3px double phosphor rule) and form/card top accents (2px solid phosphor top edge only).

Component Patterns

Buttons

• Border: 1px solid var(--phosphor)
• Color: var(--phosphor)
• Background: transparent
• Hover: background fills to var(--phosphor), text inverts to var(--bg-primary)
• NO glow on hover — fill only
• Font: Courier Prime, ALL CAPS, letter-spacing: 0.22em

Cards

• Background: var(--bg-card)
• Border: 1px solid var(--rule-faint) (bottom), optional 2px solid var(--phosphor) top accent on featured containers
• No shadow, no radius

Section Labels

• Font: VT323
• Color: var(--phosphor)
• Syntax: ∷ LABEL TEXT ∷ (double colon glyphs, all caps, wide letter-spacing)
• Often centered between horizontal hairlines

Tags / Pills

• Font: Courier Prime, 0.65rem, ALL CAPS
• Border: 1px solid var(--rule-faint)
• Color: var(--phosphor-dim)
• No background fill (just border)

Post Body Subheadings (h3)

• Inline-block with phosphor border box: border: 1px solid oklch(0.55 0.12 142 / 0.55)
• Background: oklch(0.55 0.12 142 / 0.06)
• Padding: 0.3em 0.9em
• Not full-width — wraps to content only

Blockquotes / Pull Quotes

• Left + right 2px solid var(--phosphor) (not just left)
• Background: var(--bg-card)
• Decorative opening curly quote from UnifrakturMaguntia at 0.3 opacity, large (5rem)
• Body in Lora italic

Custom Graphics

Daily Thumbnail Images

86 AI-generated images in assets/images/daily/, named cyborg_{topic}_{hex}.png. Applied as featured image on each post card (desaturated + dimmed via CSS filter). These should feel editorial and atmospheric — not diagram-y or corporate. Consistent naming: cyborg_ prefix, topic slug, 4-char hex fingerprint.

Image Generation Style — “Cyborg Archive” Aesthetic

Generated via AI image tools using the following prompt spec (documented in Cyborg_Brand_Guide_from_gemini.md):

• Display: Old, low-fidelity CRT monitor. Barrel distortion, visible horizontal scanlines, corner vignette.
• Texture: Phosphor burn-in, quiet flickering, distressed surface, subtle grain.
• Palette:
  • Background: near-black with faint green undertone (#050F05)
  • Primary elements: muted phosphor green (#7EC87E)
  • Background noise: dim phosphor green (#3D6B3D)
  • Accent: warm amber (#C8913A) sparingly for critical highlights only
• Construction: Central figures or abstract concepts built entirely from data fragments — Katakana strings (アイウエオカキクケコ), binary sequences (01010110), ASCII symbols (+ - < > [ ] { })
• Language: NO readable English words. All “text” in images must be symbolic or Katakana.
• Mood: Quiet, contemplative, slightly melancholic. High negative space. “Human as data” — organic forms translated into digital phosphor noise.
• Composition: Minimalist. The concept floats in the void.

When generating a new thumbnail: provide the topic/concept to an image AI with this style brief. The CSS filter applied in the browser (saturate(0.55) brightness(0.82)) will further mute the image to blend with the dark page.

Cyborg Tension Banner

assets/images/cyborg-tension.jpg — used as a section banner in post layout below the “Articles Guiding the Cyborg Tension” h2. Displayed at max-height: 260px, object-fit cover, object-position: center 30%, slight sepia filter.

Movie Posters (Weekend Edition)

Stored in assets/images/media_recommendations/. Never hotlink — always local copies. Displayed at max 220px wide, centered, with a subtle phosphor box-shadow glow (this is the ONE place beyond the masthead where a faint glow is acceptable — it imitates a backlit poster).

The Singularity Tracker Predictor

Lives at /singularity-tracker-predictor/. Uses its own CSS file (assets/css/singularity-tracker.css) scoped to .st-* namespace, but inherits all CSS custom properties from the main design system — same palette, same fonts, same hairline borders.

Distinctive elements:

• Large countdown timer (days/hours/min/sec) in Share Tech Mono, oversized
• Amber eyebrow labels (∷ Live Intelligence ∷)
• Data source cards in the card component pattern
• “LOADING” skeleton states use --phosphor-mute
• Live dot indicator (green when fresh, amber when stale)

The Singularity Tracker must always feel like a dashboard pulled from the same terminal as the newsletter — not a standalone app bolted on.

Voice + Copy Conventions

These apply to UI strings, section labels, and CTAs — not editorial content.

• ALL CAPS for nav, buttons, labels, and section headers
• Sentence case for body copy and sub-labels
• ∷ (double colon, U+2237) as the standard typographic bullet/separator — not ::, not ·
• ▶ (triangle) as the list bullet in what-to-expect type lists
• Issue numbering: Issue No. XXX with zero-padded three digits
• CTA box headline: “WOULD YOU LIKE TO JOIN THE CYBORG UPRISING?”
• CTA button: “SUBSCRIBE TO THE NEWSLETTER”
• Ticker label: “NEURAL WEATHER ∷” (amber)
• Tagline under masthead: “— Dispatches from the Human-Machine Frontier —” (phosphor, VT323, wide letter-spacing)

Anti-Patterns — What to Avoid

File Map