# Design Language for goomimi.com

## Aesthetics and Tone

`goomimi.com` is a **Korean street altar bleeding into a pixel-art ROM dump** — imagine a 판타지 (fantasy) RPG game cartridge that a haenyeo diver found wedged inside a Jeju Island crack shrine, cracked it open, and found her grandmother's face tiled across the ROM data. The visual register is: **Korean folk ritual objects (무속, minhwa folk painting) translated pixel-by-pixel into a 16×16 grid**, then printed on translucent marble slabs and left to crack in neon rain.

The tone is `raw-authentic`: no polish, no aspirational lifestyle sheen, no UX pleasantries. The site speaks like a halmeoni who just woke up and is not pretending to be anything she is not. Text is blunt. Margins are aggressive. Nothing is rounded to make you feel safer. The neon screams because it wants to, not because a brand manager approved it.

The marble-and-pixel collision is the conceptual engine: marble connotes permanence, ancestry, the carved-in; pixels connote fragmentation, glitch, the copied-over. The site is a **generational artifact that got corrupted mid-transfer** — the original family photograph now partially dithered, the original stone now shot through with neon veins. This is beautiful because it is true: culture doesn't transfer cleanly, and the corruption is not a failure, it's the evidence.

Color temperature: aggressively cool-to-electric. No warm neutrals. No sepia. No "accessible pastels." The dopamine-neon palette fires at full saturation: screaming magenta against electric lime on a near-black base veined with marble white.

## Layout Motifs and Structure

The page is built as a **fixed sidebar + main scroll panel** — a composition borrowed from 16-bit JRPG menu screens and Korean funeral program booklets simultaneously.

**Left sidebar (fixed, 240px):** Acts as the 캐릭터 창 (character window) from an RPG — displays the site identity, navigation glyphs drawn as 16×16 pixel icons, and a slowly shifting marble-vein texture beneath everything. The sidebar does not scroll. It is permanent like a grave marker. Navigation items are pixel-art glyphs (not text bullets, not hamburger menus) — each one a hand-drawn 16×16 sprite in neon magenta on near-black marble.

**Main content area (scrollable):** Not a content feed, not a card grid. The main area is a **single uninterrupted scroll of vertical panels**, each panel using a different blur-focus depth to simulate what it feels like to look through cracked ceremonial glass at something just out of focus. Foreground elements (text, pixel-art objects) are sharp. Background (marble SVG texture, smeared neon gradients) is blurred at `filter: blur(8px)` behind a frosted-pixel overlay.

**Panel rhythm:** Three visual modes alternate as the user scrolls:
1. **Sharp foreground mode** — pixel art object fills 60% of panel, text is crisp black on neon-lit marble
2. **Blur-focus transition** — the pixel art dissolves into marble texture via CSS `backdrop-filter`, then reforms
3. **Text panel** — full-width blurred marble background, one line of handwritten text centered, nothing else

**No sticky headers, no navbars at top, no hero CTA.** The sidebar IS the navigation. The scroll IS the experience. The only interactive affordance is: pixel-art glyphs in sidebar that, on hover, emit a 2-frame blink animation (like selecting a menu item in a 1993 RPG).

Grid: CSS Grid `240px 1fr` at desktop. At mobile, sidebar collapses to a top strip of pixel-icon glyphs (horizontal row, fixed), main content shifts to single column beneath.

## Typography and Palette

**Typography (all Google Fonts, verified):**

- **Primary / Handwritten display**: [`Nanum Brush Script`](https://fonts.google.com/specimen/Nanum+Brush+Script) — Korean calligraphy brush digitized, weight 400. Used for all section headings, the wordmark `goomimi`, and any pull-quote. Set at `clamp(2.8rem, 6vw, 7rem)`. The brush strokes have actual ink variation — they read as handmade even at large sizes. This is the anchor: everything else is measured against this rawness.
- **Body / Sidebar labels**: [`Black Han Sans`](https://fonts.google.com/specimen/Black+Han+Sans) — ultra-condensed Korean gothic, weight 900. Used for sidebar navigation labels (set small, 11px, all-caps), body copy in the main scroll panels (set at 15px, 1.6 line-height), and any data-style annotation. The extreme weight at small size creates a deliberate tension with the brush display type.
- **Pixel accent / ROM data**: [`Share Tech Mono`](https://fonts.google.com/specimen/Share+Tech+Mono) — monospace, weight 400. Used exclusively for: pixel-art captions, coordinate labels (e.g. `X:089 Y:044`), and the glitch-text fragments that appear during blur-focus transitions. Set at 11–13px. Color: always `#39FF14` (electric lime) or `#FF2D78` (neon magenta).

**Palette — Dopamine Neon on Marble:**

| Name | Hex | Use |
|---|---|---|
| Marble Black | `#0D0D0F` | Page background, sidebar base |
| Marble Vein | `#E8E4DC` | Marble texture highlight, text on dark |
| Neon Magenta | `#FF2D78` | Primary accent, pixel-art fill, headings |
| Electric Lime | `#39FF14` | Secondary accent, mono labels, cursor glow |
| Pixel Cobalt | `#1F51FF` | Tertiary, background depth, minhwa blue |
| Deep Violet | `#1A0535` | Sidebar deep shadow, panel transitions |
| Hot Amber | `#FFB800` | Minhwa gold accent, hover states, tiger motif |

Background texture: marble veining rendered as a repeating SVG `feTurbulence` filter (`baseFrequency="0.018" numOctaves="4"`) in `Marble Vein` against `Marble Black`, layered beneath a `backdrop-filter: blur(8px)` frosted overlay in the main panel backgrounds. The marble is not decorative — it is the substrate, and everything is scratched into it.

## Imagery and Motifs

**All imagery is pixel art rendered as inline SVG grid-of-rects.** No photographs (corpus: 92% — we abstain entirely). No stock vectors. No icon fonts. Every visual object is a hand-designed 16×16 or 32×32 pixel sprite, rendered as an `<svg>` grid of `<rect>` elements, each rect 4×4 CSS pixels, giving a clean pixel scale at any zoom.

**Cultural pixel-art object roster (recurring motifs, each a named SVG sprite):**

- **달항아리 (moon jar)** — the 조선 white porcelain moon jar, 32×32 pixels, rendered in `Marble Vein` whites with a single neon magenta crack vein. The primary "hero object" of the site — appears in the sidebar header and again large in the first main panel.
- **호랑이 (tiger)** — the Korean folk tiger (해학적 호랑이, the comic tiger of minhwa), 16×16 pixels, `Hot Amber` and `Marble Black`. Used as a cursor companion: follows the mouse at a 4px offset, blinking every 1.2 seconds.
- **무속 방울 (shaman bell)** — the brass bell cluster from Korean shamanic ritual, 16×16, in `Pixel Cobalt` and `Hot Amber`. Appears in sidebar beneath navigation.
- **연꽃 (lotus)** — 16×16, `Neon Magenta` petals on `Deep Violet`. Appears as section divider between main panels.
- **석등 (stone lantern)** — 32×32, `Marble Vein` outline, `Electric Lime` flame inside. Used in the blur-focus transition panels as the light source whose glow bleeds into the blur.

**Motif logic:** Every pixel object is drawn with the aesthetic vocabulary of **minhwa (민화) folk painting** — flat color fills, no gradients within the sprite itself, bold outlines, deliberate anti-realism. The cultural referents are not decorative nods; they are load-bearing: the moon jar is Korea's most revered ceramic object precisely because it is imperfect. The comic tiger is beloved precisely because it refuses to be intimidating. These objects carry meaning before the first word is read.

**Marble texture as a motif:** The marble is not background noise. It is the medium into which the pixel art has been pressed — the pixel sprites appear to be tiled *into* the marble, as if carved. Achieve this with CSS `mix-blend-mode: multiply` on the sprite layer over the marble SVG texture.

## Prompts for Implementation

**The story to tell.** A visitor opens what they think is a personal site, but it is actually a 디지털 제단 (digital altar) — a votive space, not a portfolio. There is no hero. There is no CTA. There is no "about me." There is only: a pixel-art moon jar that has been cracking for thirty years, a tiger that follows your cursor because it is curious, and a series of handwritten lines that a grandmother may or may not have said to her granddaughter in a language the granddaughter only half-remembers. The visitor does not do anything here. They witness.

**Scroll mechanics:**
- The sidebar stays. Always.
- The main panel scrolls. Each panel is `100vh` minimum.
- On scroll, each panel's background marble SVG blurs in via a CSS transition: `filter: blur(0px)` → `blur(12px)` → `blur(0px)` as the panel enters, holds, exits the viewport. Use `IntersectionObserver` with threshold steps `[0, 0.2, 0.5, 0.8, 1.0]` to drive this.
- Pixel-art sprites animate by frame (2–3 frames, CSS `steps()` timing) only on hover or scroll-entrance. Otherwise static.

**Sidebar implementation:**
- Fixed `position: fixed; left: 0; top: 0; height: 100vh; width: 240px`
- Background: marble SVG texture at `opacity: 0.6` over `#0D0D0F`
- Navigation: 5–6 pixel-art glyph sprites, each 16×16px rendered at 48×48px (CSS `image-rendering: pixelated`), stacked vertically with 24px gap, labeled beneath in `Black Han Sans` 11px
- On glyph hover: 2-frame blink animation (glyph inverts colors), `neon-magenta` glow pulse via `box-shadow`

**Main panel implementation:**
- Panel 1 (Sharp): 달항아리 sprite at 192×192px (48×48 grid-rects × 4px), centered, `Nanum Brush Script` title below
- Panel 2 (Blur-Focus): background marble blurs, stone lantern sprite's lime flame blooms `0→4px glow`, one fragment of Share Tech Mono coordinate text drifts in from left
- Panel 3 (Text Only): full-width marble blur at `blur(18px)`, single `Nanum Brush Script` phrase, white on dark, nothing else. No border. No card. Just the text floating on blurred stone.
- Panel 4 (Sharp): tiger sprite + 3–4 lines of `Black Han Sans` body copy at 15px — raw, plainspoken, no bullet points, no headers within the panel
- Panel 5 (Blur-Focus): lotus divider blooms across panel width (16 lotus sprites in a row, each staggered 80ms), then blur resolves to the closing panel
- Panel 6 (Text Only): shaman bell sprite (small, 64×64px), one final handwritten line, then the page ends. No footer. No social links. No "back to top."

**AVOID in implementation:**
- CTA buttons of any kind
- Pricing blocks or feature comparisons
- Social proof, testimonials, star ratings
- Newsletter signup, cookie banners
- Sticky top navigation bar (sidebar is the nav)
- Any gradient that doesn't involve marble texture
- Photography or photorealistic imagery
- Rounded corners except on pixel sprites where the pixel grid naturally produces them
- `font-size` smaller than 11px for Share Tech Mono labels

**Animation budget:** Intentionally minimal. The blur-focus is the primary kinetic effect. Pixel sprite frame animation is the secondary. Everything else is static. The restraint IS the rawness — the site does not perform for you.

## Uniqueness Notes

**Differentiators from every other design in the registry:**

1. **Pixel-art as cultural archive, not nostalgia bait.** The corpus uses pixel-art (1%) almost exclusively as retro-gaming decoration. Here, every pixel sprite is a direct encoding of a specific Korean cultural object with ritual meaning — the moon jar, the shaman bell, the minhwa tiger. The pixel grid is used because it forces reduction to essence, the same way a folk painting forces reduction to essence. This is the only design in the registry that uses pixel-art as an anthropological tool.

2. **Marble texture as substrate, not decoration.** Marble-texture appears in 4% of designs, always as a luxury-signifier background. This design inverts the value: the marble is cracked, veined, and blurred — it reads as old stone, not luxury counter-top. The pixel sprites are pressed *into* the marble using `mix-blend-mode: multiply`, making the marble the medium of inscription rather than the backdrop. No other design treats texture as medium.

3. **Sidebar navigation as the only wayfinding.** Sidebar layout appears in 32% of designs. In 100% of those, the sidebar accompanies a traditional top navbar or breadcrumb. This design has NO top navigation — the fixed sidebar is the sole orientation device. The pixel-art glyph navigation (no text labels visible until hover) demands the visitor slow down and read the glyphs, the way you would read a shrine's pictographic instructions.

4. **Blur-focus as the primary scroll event.** The blur-focus pattern is at 2% usage. Across the corpus, blur is used for hover tooltips or image loading. This design uses progressive blur/unblur on full panels as the primary scroll-rhythm — each panel breathes in (blurs) and breathes out (sharpens) like something being remembered and then forgotten again. This is culturally resonant: 기억 (memory) in Korean aesthetics is not retrieval but re-embodiment.

5. **Dopamine-neon palette against marble, not dark glass.** Dopamine-neon appears in 4% of designs, always against pure dark `#000` or terminal black. Here, the neon fires against veined marble white-on-black — the electric lime and magenta hit the marble vein texture and scatter, behaving more like neon seen through a rain-wet stone surface than like UI highlights on a dark screen. This is palette-as-physics, not palette-as-branding.

**Chosen seed:** aesthetic: pixel-art, layout: sidebar, typography: handwritten, palette: dopamine-neon, patterns: blur-focus, imagery: marble-texture, motifs: cultural, tone: raw-authentic

**Avoided patterns (from frequency analysis):**
- hand-drawn (67%) — abstained; using pixel-art (1%) instead
- centered (92%) — sidebar layout breaks the centered monoculture entirely
- parallax (90%) — replaced with blur-focus (2%) as the primary scroll effect
- photography (92%) — zero photography; pixel SVG sprites only
- warm palette (93%) — cool/electric palette exclusively; no warm neutrals
- vintage motifs (55%) — cultural motifs (4%) instead; contemporary ritual objects, not nostalgia objects
- mono typography (87%) — handwritten (`Nanum Brush Script`) as primary display; mono (`Share Tech Mono`) used only for glitch-data accents
<!-- DESIGN STAMP
  timestamp: 2026-05-07T20:39:56
  domain: goomimi.com
  seed: seed:
  aesthetic: `goomimi.com` is a **Korean street altar bleeding into a pixel-art ROM dump** — ...
  content_hash: 64986c3f980f
-->