# Design Language for perso.news

## Aesthetics and Tone

perso.news is a personal news curation and commentary feed — a single person's raw, unfiltered lens on the world. The aesthetic is **inflated-3d meets edgy-rebellious**: every element has mass and weight, as if the UI itself was inflated with pressurized air, then slashed open at the corners. Think bubble letters spray-painted on a subway wall but rendered in ultra-high-fidelity 3D — puffy, tactile, and slightly threatening.

The mood is **confrontational intimacy**. This is not a polished media brand. It is one person shouting through a megaphone they hand-painted themselves. The tone rejects corporate news polish and algorithmic feed blandness. Instead: stark contrasts, oversized opinion labels, and UI elements that feel physically present — like they could bruise you if you touched them.

Visual references: Virgil Abloh's industrial quotation marks around ordinary objects, zine culture photocopied at 130% contrast, and inflated 3D type as seen in Supreme drops and streetwear lookbooks. The watercolor bleed bleeds underneath the hard 3D surfaces like ink soaking through newsprint — a deliberate contradiction of soft and violent.

## Layout Motifs and Structure

The site is a **single vertical timeline** — no grid, no columns, no cards. Each news item is a **timeline node** on a continuous vertical spine: a thick neon-electric vertical line (4px, #00FF87) running top-to-bottom down the left third of the viewport, with items staggered left and right of the spine in an alternating rhythm.

**Spine anatomy:**
- The vertical line is the axis. Timeline nodes are circular 3D blobs (inflated, puffy border-radius ~50% but slightly squashed) that sit on the line, colored by topic category.
- Left-staggered items: editorial/opinion pieces. Right-staggered items: linked news stories.
- Each item node expands on scroll-entry via CSS 3D transform — scale from 0.6 to 1.0 with a spring easing, giving the feeling of inflating under your gaze.

**Spatial logic:**
- Hero zone: full-viewport-height opening slate — the word "PERSO" in 18vw inflated grotesque type, with a watercolor wash bleeding behind the letterforms in electric violet (#BF00FF) and acid green (#00FF87), while the letters themselves are 3D-extruded in near-black (#0A0A12) with a neon green highlight edge.
- Timeline begins below the fold. The spine scrolls into view as a path-draw SVG animation — the line literally draws itself downward as you enter the section.
- No pagination. No "load more." The entire feed is one continuous scroll document.
- Footer is raw: just a monospaced tagline and a PGP-style fingerprint string.

**Breakpoints:** On mobile, the spine shifts to the far left edge; all items stack single-column flush right. The blob nodes become inline punctuation marks rather than hanging nodes.

## Typography and Palette

**Primary Display — Barlow Condensed** (Google Fonts), weight 800–900, ALL CAPS for headlines and date stamps. Extremely tall x-height, industrial, slightly aggressive. Used at sizes from 14vw (hero) down to 2.4rem (item headlines).

**Body and Labels — Space Grotesk** (Google Fonts), weight 400–700. The grotesque-neo workhorse: wide apertures, quirky terminals on the 'a' and 'g' that give it personality without slipping into playfulness. Used for article blurbs, category tags, and inline commentary at 1rem–1.2rem.

**Accent Mono — Space Mono** (Google Fonts), weight 400 only. Reserved for timestamps, URLs, and the footer fingerprint. Feels like a ticker-tape machine or a protest flyer printed on a dot-matrix.

**Color palette:**
- `--void`: #0A0A12 — near-black with a faint blue undertone; background
- `--acid-green`: #00FF87 — primary neon accent; spine line, active states, node highlights
- `--electric-violet`: #BF00FF — secondary neon; watercolor wash base, category tags for opinion
- `--hot-magenta`: #FF006E — tertiary neon; breaking/urgent items, error states, slash motifs
- `--ghost-white`: #F0F0F8 — body text on dark ground, slightly blue-tinted
- `--dim-surface`: #14141F — card/node surface, 1 step above void
- `--neon-yellow`: #FFE600 — rare accent for "pinned" or "this week's obsession" items

All neon colors are used with `text-shadow` / `box-shadow` glow stacks: three-layer glow (tight 0 0 4px, medium 0 0 16px, ambient 0 0 40px) at 60% opacity to simulate actual light emission without overwhelming legibility.

## Imagery and Motifs

**Watercolor underlays:** Each timeline node has a watercolor wash background — not a photo, but a generated/hand-painted SVG watercolor blob in one of the neon palette colors at 15–25% opacity. The blobs are irregular, with paper-texture grain overlay (CSS `filter: url(#noise)` SVG filter). They bleed beyond the node boundary slightly, creating the sense of ink spreading under pressurized 3D elements.

**Inflated 3D type motifs:** Category tags ("POLITICS", "TECH", "CULTURE", "OPINION") are rendered as 3D inflated pill badges — white gradient fill with a thick neon-colored border (4px), a subtle radial highlight in the upper-left simulating light hitting a puffy surface, and a bottom drop shadow in the matching neon color (0 8px 24px rgba(0,255,135,0.4)).

**Sharp-angle slash motifs:** Decorative slashes (//) appear throughout — before dates, inside headlines as separators, and as oversized background glyphs (single ">" or "//" at 40vw, opacity 3%, in ghost-white) that give depth to empty spaces without cluttering. These are the visual signature of the author's "editorial cut."

**Path-draw SVG animations:** The timeline spine is a single `<path>` element that draws itself on scroll entry using `stroke-dasharray`/`stroke-dashoffset` animation driven by Intersection Observer + CSS custom properties. Each node blob also has a micro path-draw ring that circles around the node when the item enters viewport — a brief 0.4s circular stroke animation in the item's category neon color.

**No stock photography.** If an article thumbnail is used, it is treated: desaturated to 0% then duotoned with `mix-blend-mode: color` in either acid-green or electric-violet. Maximum 1 thumbnail per 5 items; most items are pure typography + watercolor blob.

## Prompts for Implementation

**Hero section:** Full-viewport slate, `background: #0A0A12`. The word "PERSO" rendered in Barlow Condensed 900, 18vw, with CSS `text-shadow` generating a 3D extrusion effect (stacked offsets: 1px 1px #00FF87, 2px 2px #00FF87, ... 6px 6px #00FF87, then a final 7px 7px #0A0A12 hard stop). Behind the text: an inline SVG watercolor blob in `#BF00FF` at 20% opacity, with an SVG `feTurbulence` filter for organic edge irregularity. Below the hero title: a single line in Space Grotesk 700 — the author's manifesto in 12–14 words, in `#F0F0F8`, no period at the end.

**Timeline spine:** A full-height `<svg>` absolutely positioned, containing one `<path d="M 80 0 L 80 [totalHeight]">` in `#00FF87` with `stroke-width: 3`, drawn via scroll-driven `stroke-dashoffset` animation. Nodes are `<div>` elements positioned absolutely on the spine with a CSS `clip-path: polygon(...)` creating a slightly squashed hexagonal-blob shape (not a perfect circle — slightly wider than tall, with softened but not fully rounded corners to honor the sharp-angles motif).

**Item nodes:** Each node: `background: #14141F`, watercolor SVG blob child at 18% opacity, category badge (inflated 3D pill), Barlow Condensed headline (2.2rem–3rem depending on importance), Space Grotesk blurb (3–4 sentences max), Space Mono timestamp. Scroll-entry animation: `transform: scale(0.65) translateX(-20px)` → `scale(1) translateX(0)` with `transition: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)` (spring overshoot).

**Path-draw node rings:** Each node has an absolutely-positioned `<svg>` child containing a `<circle>` with `stroke-dasharray: circumference` and `stroke-dashoffset: circumference` (fully hidden). On Intersection Observer trigger (threshold 0.4), apply a CSS class that transitions `stroke-dashoffset` to 0 over 0.4s — the ring draws itself clockwise around the node. Stroke color matches the item's category neon.

**Slash decorative glyphs:** `<span aria-hidden="true">` elements with `//` in Barlow Condensed 900, positioned absolute, color `#F0F0F8` at 3% opacity, `font-size: clamp(8rem, 20vw, 24rem)`, `z-index: 0`, `pointer-events: none`. Placed behind every 3rd timeline item to break visual monotony.

**Overall scroll feel:** No smooth-scroll hacks. Native scroll only. The path-draw and spring animations do the experiential work. The reader should feel like they're pulling a ribbon of news out of a pressurized container — each item pops into shape as it emerges.

**Avoid:** hero CTAs, subscription nudges, "most popular" sidebars, share-count badges, avatar grids, pricing blocks. This is a feed, not a product page.

## Uniqueness Notes

1. **Inflated 3D type as editorial weapon, not novelty.** Most sites using inflated-3d treat it as decoration. Here it is the primary voice: 3D extrusion via stacked text-shadow is the author's tone — puffy but hard-edged, like a protest sign that refuses to be ignored. No other design in the corpus combines inflated-3d with a news timeline spine in this way (inflated-3d sits at under 7% usage, and timeline-vertical is rarely paired with dark-neon palette).

2. **Watercolor as anti-polish signal.** Watercolor imagery (9% frequency) is overwhelmingly used in "artistic gallery" or "botanical" contexts in the corpus. Here it functions as the opposite: the bleed and irregularity of watercolor under hard neon 3D surfaces signals rawness and handmade urgency — the author is not a brand. The neon-watercolor contradiction is the site's visual fingerprint.

3. **Path-draw SVG spine as the UI's central animation.** Rather than using path-draw as a decorative flourish (the common use), the vertical spine IS the navigation metaphor. The drawing of the line is the page's loading ritual — it establishes the timeline metaphor before any content renders. This is architecturally unusual; path-draw-svg (underused in corpus) is elevated to structural role.

4. **Sharp-angle slash motifs as authorial voice.** The "//" and ">" glyphs as oversized background elements and inline separators borrow from command-line and zine culture simultaneously — reinforcing the edgy-rebellious tone without using clichéd grunge textures or distortion effects. No other design in the current corpus uses punctuation-as-motif at this scale.

5. **Zero photography by default.** Against the corpus trend of using duotone-photo or glassmorphic-cards over images, perso.news is typography + watercolor-blobs + 3D badges only. Images are opt-in, treated aggressively (full desaturate + duotone blend), and rare. The feed reads as a manifesto, not a magazine.

**Chosen seed:** aesthetic: inflated-3d, layout: timeline-vertical, typography: grotesque-neo, palette: dark-neon, patterns: path-draw-svg, imagery: watercolor, motifs: sharp-angles, tone: edgy-rebellious

**Avoided patterns (per frequency analysis):** hand-drawn (58% — overused), editorial layout (51% — overused), terminal aesthetic (31% — overused), botanical imagery (28% — overused), glassmorphism (21% — overused). No soft pastels, no warm earth tones, no serif-classic typography.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T19:57:03
  seed: seed:
  aesthetic: perso.news is a personal news curation and commentary feed — a single person's r...
  content_hash: 857b51790976
-->