# Design Language for jeongchi.boo

## Aesthetics and Tone

`jeongchi.boo` is a **goblincore zine-lab** — the personal territory of someone who collects cursed objects, makes art from dirt and teeth, and considers burnt-orange the color of revelation. The site reads like a handmade chapbook that got haunted: thick ink bleeds into rough paper, celestial diagrams sit beside crumbling botanical prints, and glitch artifacts interrupt the page like transmission noise from another frequency.

The governing aesthetic is **goblincore meets raw editorial chaos** — earthen, unsettling, fiercely handmade. Not polished brutalism; not ironic ugliness. This is *genuine texture*: mudstone pigments, torn mycelium, ink stains that were never cleaned up. The site exists in the zone between an underground zine rack, a witch's field notebook, and a corrupted archive of star charts.

**Tone:** Unfiltered, first-person, territorial. No explanatory copy, no introductions. The page assumes you already belong here or you don't. Sentences fragment on purpose. Images crash into text. The celestial motif — stars, moon phases, navigational diagrams — grounds the chaos in something older and larger than the maker.

**Mood references:** A 1970s underground press pamphlet photographed on a rain-wet picnic table. A glitched VHS frame of a night sky. Parchment with mushroom stains. A star atlas printed on brown butcher paper.

## Layout Motifs and Structure

The page is built as a **modular-blocks grid that refuses to be neat** — a 12-column CSS Grid where each content block is assigned a span of 3–9 columns, never the same width twice in sequence, and rows overlap by 1–2 units using `grid-row` overlap so blocks edge into each other like torn paper layered in a collage.

**Block vocabulary:**
- **Lede block** — Full-width (12 col), 100vh, no padding flush against the viewport top. A single large headline in Bebas Neue at `clamp(80px, 14vw, 160px)` stacked over a mixed-media collage background (torn paper texture + star chart SVG overlay + glitch stripe). No nav bar — a floating two-letter glyph mark (`정치`, rendered as an SVG stamp) sits in the upper-left corner.
- **Text slabs** — Narrow columns (4–5 col) of body text in IBM Plex Mono set at 14px/1.8, flush-left ragged-right. Text blocks are placed off-center, sometimes bleeding into the right gutter on desktop.
- **Image blocks** — 3–7 col wide, no captions, no borders, images rendered with CSS `mix-blend-mode: multiply` over the page's earthen background, so they absorb the burnt-orange and moss tones.
- **Star-diagram panels** — full-bleed SVG constellations or navigational circles, 2 col wide, used as vertical dividers between text sections. They glow faintly in `#FFD580` (amber gold) against `#1C1208` (charred brown).
- **Glitch interrupt rows** — thin 40px-high horizontal strips of glitched color (RGB channel-shift CSS animation) that appear between major sections, like horizontal scan damage.

**Desktop:** 12-column, 1440px max, with 24px gutters. Blocks overlap on the grid z-axis. Body scrolls vertically — no horizontal scroll.
**Mobile:** single column, blocks stack full-width, glitch strips collapse to 16px.

The overall reading experience is like turning pages in a zine — each block feels like a separate physical artifact pinned to the same surface, not a flowing document.

## Typography and Palette

**Primary Display — [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue):**
The workhorse display face. Used at extreme scale for headlines, section titles, and the site name. `font-weight: 400` (only weight). Tracking: `0.05em` to `-0.02em` depending on scale — wide at small sizes, tight at 120px+. All uppercase by design.

**Body / Code — [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono):**
Weight 400 and 600. Used for all running text, labels, dates, and annotations. Its mono rhythm evokes field notes and data readouts, which lands perfectly in the goblincore-zine context. Set at 13–15px body size with loose leading (1.8–2.0).

**Accent / Decorative — [Abril Fatface](https://fonts.google.com/specimen/Abril+Fatface):**
Used sparingly — pull quotes, single-word callouts, and the astrological section headers. Its ink-trap fatness reads as letterpress-printed, which amplifies the handmade zine quality.

**Palette:**

| Name | Hex | Role |
|---|---|---|
| Charred Soil | `#1C1208` | Page background — near-black warm brown |
| Burnt Orange | `#C45C1A` | Primary accent — links, glitch stripes, active marks |
| Ember Glow | `#E8782A` | Hover states, bright accent variant |
| Parchment | `#D9C9A3` | Body text on dark backgrounds |
| Ash Grey | `#7A7468` | Secondary text, labels, meta information |
| Amber Gold | `#FFD580` | Star diagram lines, constellation marks |
| Moss Deep | `#2A3A1E` | Block backgrounds — deep forest-floor green, rare use |
| Glitch Cyan | `#00FFEA` | Channel-shift glitch artifacts only — never used for text |
| Glitch Magenta | `#FF005C` | Paired with Glitch Cyan in RGB-shift animations only |

Background: `#1C1208`. No white anywhere. The page lives entirely in the dark-earth end of the spectrum.

## Imagery and Motifs

**Core imagery mode: mixed-media collage.** Images are never photography presented straight. Every image is a composite: torn paper or rough linen texture layered under a photographic element (mushroom specimens, night sky film stills, mudstone close-ups, pressed leaves) combined with SVG overlays and CSS `mix-blend-mode` treatment. The result is neither pure photo nor pure illustration — it occupies the middle zone that goblincore lives in.

**Motif family: star-celestial.**
- Celestial navigation circles: thin-rule SVG circles subdivided into 12 or 360 segments, like an astrolabe or a star compass. Rendered in `#FFD580` (Amber Gold) at 40–60% opacity over block backgrounds.
- Constellation line-maps: custom SVG point-and-line diagrams of constellations (Corvus, Lyra, Scorpius — chosen for their mythological darkness). Not decorative stock; each has a small IBM Plex Mono label in `#Ash Grey`.
- Moon phase glyphs: eight phases rendered as SVG circles at 32px, used as bullet points and section markers.
- Scattered star-field: a CSS `radial-gradient` or canvas layer of tiny white pinpoints at 10% opacity, spread across the charred-soil background at all times.

**Glitch pattern system:**
- Horizontal RGB channel-split strips: `translateX(4px)` red, `translateX(-4px)` cyan on a transparent overlay, triggering on scroll entry via `IntersectionObserver`.
- Text glitch on hover: targeted `<span>` elements with a CSS keyframe that briefly offsets red and blue pseudo-element copies of the text.
- Broken-frame border: 2px dashed borders in `#C45C1A` with `border-image` set to a repeating gap pattern — like a torn perforation.

**Decorative elements:**
- Ink blot SVGs at block corners (irregular closed paths, semi-transparent black, rotated randomly).
- Small hand-drawn-style annotation arrows in IBM Plex Mono label style.
- A repeating background texture: CSS `url()` pointing to an inline base64 SVG of fine paper grain noise at 4% opacity over `#1C1208`.

## Prompts for Implementation

Build `jeongchi.boo` as **a single-page vertical scroll of collaged modular blocks** — one HTML file, one CSS file, minimal vanilla JS. No framework, no build step, no bundler. The page should feel like opening a local HTML file someone sent you in an encrypted archive.

**Structure (vertical scroll, no page nav, no horizontal movement):**

1. **Lede block** (`#lede`): 100vh, `#1C1208` base, full-bleed mixed-media background built from CSS layers: `(1)` star-field `radial-gradient` at 10% opacity, `(2)` an inline base64 SVG of a torn paper silhouette in dark moss at the bottom edge, `(3)` a large SVG astrolabe circle centered at 80% opacity. Centered vertically: the site name **JEONGCHI** in Bebas Neue at `clamp(80px, 14vw, 160px)`, letter-spacing `-0.01em`, color `#D9C9A3`. Below it, in IBM Plex Mono 13px: a single fragmented phrase in `#7A7468` — something like `*  정치  *  the-politics-of-dirt  *  2025  *`. No hero button, no CTA.

2. **First glitch strip** (`#g1`): 40px tall, `background: #C45C1A`, `position: relative`, with `::before` and `::after` pseudo-elements in `#00FFEA` and `#FF005C` offset by `translateX(3px)` and `translateX(-3px)`, creating the RGB channel-split look. Triggers a 0.4s CSS animation on scroll entry.

3. **Text manifesto block** (`#manifesto`): 5-column span (of 12), offset 2 columns from the left. Abril Fatface pull-quote at 32px in `#C45C1A` floated top. Below it, IBM Plex Mono 14px body text in `#D9C9A3`. This block has a `border-left: 3px solid #C45C1A` and `padding-left: 24px`. Grid placement: `grid-column: 2 / 7`, `grid-row: 3 / 5`.

4. **Constellation panel** (`#cstl-1`): SVG of Corvus constellation at 100% block height, thin `#FFD580` lines and dots, labels in IBM Plex Mono 11px `#7A7468`. Grid placement: `grid-column: 8 / 11`, `grid-row: 3 / 6`, so it overlaps the manifesto row vertically.

5. **Mixed-media image blocks** (`#img-1`, `#img-2`): Two images stacked diagonally. Each `<figure>` has `mix-blend-mode: multiply`, `filter: sepia(30%) contrast(1.2)`. Images are rough-textured: specimen photos (mushroom, pressed leaf, or soil closeup). No captions, no alt text decorating the UI — just the raw image bleeding into the charred background.

6. **Star-diagram divider** (`#star-div`): Full 12-column width, 200px tall. An SVG navigation circle (360-degree rule with degree marks), centered, color `#FFD580` at 50% opacity. Bebas Neue label reading `NAVIGATING THE UNMAPPED` in `#C45C1A` at 18px, centered below the circle.

7. **Second text block** (`#text-2`): Asymmetric — `grid-column: 4 / 10`. IBM Plex Mono body. A second short paragraph of raw, fragmentary writing in the goblincore-zine voice. No headers. Ends mid-thought.

8. **Moon phase row** (`#moon-row`): 12-column width, 80px tall. Eight SVG moon phase glyphs (`⬤` variants built in SVG, not Unicode) spaced evenly at 32px each in `#Amber Gold`. A horizontal rule of `1px solid #2A3A1E` above and below.

9. **Closing lede** (`#coda`): 60vh. Bebas Neue at `clamp(60px, 10vw, 120px)` reading a single word or phrase in `#C45C1A` — something personal, non-explanatory. Star-field CSS background active. No footer links, no social icons.

**JS behaviors (vanilla, minimal):**
- `IntersectionObserver` triggering `.glitch-active` class on glitch strips as they enter viewport — runs the RGB-split CSS keyframe once.
- Hover text-glitch on all Bebas Neue headings: add/remove `.text-glitch` class on `mouseenter`/`mouseleave`, which runs a 3-frame CSS keyframe (`translateX(-3px)` red pseudo-element / `translateX(3px)` cyan pseudo-element / reset) over 0.2s.
- No JS routing, no fetch, no external API calls.

**AVOID:** Navigation bars. Hamburger menus. Social media link rows. Newsletter sign-up forms. Footer columns. Progress bars. Stat counters. Price grids. Any element that signals "product page" or "portfolio site."

## Uniqueness Notes

**Chosen seed (per assignment):** aesthetic = goblincore, layout = modular-blocks, typography = bebas-bold, palette = burnt-orange, patterns = glitch, imagery = mixed-media, motifs = star-celestial, tone = raw-authentic.

**Three differentiators from the corpus (informed by frequency analysis):**

1. **burnt-orange palette at 1% frequency — used as a literal earth-fire material, not a warm-brand cue.** The corpus shows warm/gradient palettes dominating at 90%+. `#C45C1A` and `#E8782A` here are chosen because they are the color of fired clay and iron oxidation — they belong to the earth and the kiln, not to a startup's "approachable" brand system. The charred-soil `#1C1208` background (near-black warm brown) is a palette move entirely absent from the 90%-white-background corpus.

2. **goblincore aesthetic at 0% explicit corpus representation — executed with genuine material specificity, not as a vibe.** The corpus has zero goblincore designs. This design does not apply the aesthetic as surface decoration; it builds it into the typography (IBM Plex Mono as field notes), the imagery treatment (multiply-blend specimen photos), the motif system (astrolabe/constellation charts as found-object artifacts), and the color philosophy (earth, char, amber — not green-witch-forest cliché).

3. **Modular-blocks layout with deliberate grid overlap at 4% frequency — used to simulate physical collage layering.** The 90% corpus uses centered or full-bleed layouts. The 12-column grid here allows `grid-row` and `grid-column` overlap so blocks physically edge into each other, making the page feel like a pinboard or a zine spread rather than a web document. This is structurally distinct from both the masonry card layout (archetype.boo) and the single-column essay form (archaic.studio).

**Avoided patterns per frequency analysis:**
- NO centered layout (90% corpus — avoided)
- NO gradient palette (91% corpus — avoided; all colors are flat/solid)
- NO photography presented straight (91% corpus — all images processed through `mix-blend-mode: multiply` + sepia filter to become part of the collage, not standalone photos)
- NO white/light backgrounds (dominant corpus pattern — background is `#1C1208` throughout)
- NO CTA blocks, stat grids, or service-listing sections
<!-- DESIGN STAMP
  timestamp: 2026-05-08T11:14:09
  seed: seed
  aesthetic: `jeongchi.boo` is a **goblincore zine-lab** — the personal territory of someone ...
  content_hash: 29f58d9f6ef4
-->