# Design Language for gunsul.quest ## Aesthetics and Tone gunsul.quest channels the frenetic, hyperstimulated energy of a Tokyo arcade at 2AM colliding with an illegal data market operating behind a neon-drenched ramen stall. The aesthetic is **maximalist glitch excess** -- every surface vibrates, every edge bleeds color, and the visual density is deliberately overwhelming in a way that rewards exploration rather than punishes it. Think of the visual overload you experience standing in the center of Shibuya Crossing as every billboard fires simultaneously, but filtered through a corrupted GPU that introduces chromatic aberration, scan-line tears, and data moshing artifacts into every frame. The mood is not dystopian or nihilistic. It is euphoric chaos -- the dopamine rush of information moving too fast to parse, the thrill of a glitch that reveals something beautiful beneath the surface noise. The domain name "gunsul" (Korean for construction/architecture) reframes this chaos as intentional construction: every glitch is a deliberate architectural decision, every noise artifact is a load-bearing structural element. The site feels like walking through a building made entirely of light, where the walls flicker between transparency and opacity and the floor plan rewrites itself as you move through it. The tone is unapologetically energetic, bordering on aggressive. Text arrives fast, moves fast, and refuses to sit still. The experience does not wait for the viewer -- it demands they keep up. There is no hand-holding, no gentle fade-ins. Elements slam into existence, shatter into fragments, then reassemble slightly differently than before, as if the page is a living organism that metabolizes its own content and excretes it in mutated forms. ## Layout Motifs and Structure The layout is **full-bleed with zero margins** -- content stretches to every edge of the viewport with no breathing room, no safe zones, no gutters. The page itself is one enormous canvas where overlapping regions compete for visual dominance. There is no traditional grid; instead, content follows a **collision-stack** architecture where elements are layered on top of each other with partial transparency, creating palimpsest-like depth where earlier content bleeds through later content. **Collision-Stack System:** - **Layer 0 (Signal Floor):** A continuously animated background composed of a CSS-generated noise field -- random `background-image: repeating-conic-gradient()` patterns that shift hue every 3 seconds using CSS custom property animations. This layer is never static. Its constant low-frequency movement creates a subliminal sense of instability beneath everything else. - **Layer 1 (Data Substrate):** Oversized typographic fragments -- single characters or word fragments from the domain name "gunsul.quest" -- rendered at 30vw to 60vw scale, positioned off-center using `position: fixed` so they remain anchored while the scroll layer moves past them. These function as architectural pillars that the scrolling content weaves around, creating a sense of moving through a typographic cityscape. - **Layer 2 (Content Stream):** The primary scrollable content, arranged in an irregular vertical sequence of full-viewport sections that alternate between three composition modes: - **Burst Mode:** Content centered in a tight cluster with elements radiating outward from a central point, as if an explosion froze mid-detonation. Text, images, and decorative fragments overlap heavily. - **Corridor Mode:** A narrow vertical strip (30vw wide) of content centered on screen, flanked by dense noise textures on either side, creating a claustrophobic tunnel effect. Content within the corridor is stacked tightly with negative margins pulling elements into each other. - **Scatter Mode:** Content fragments distributed seemingly randomly across the full viewport using CSS grid with `grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))` and varying `grid-row-end: span N` values. Items are rotated at slight angles (-4deg to 4deg) and overlap their neighbors by 15-30%. - **Layer 3 (Interference):** A `position: fixed` overlay of thin horizontal lines (2px tall, spaced 4px apart, rgba white at 0.03 opacity) that simulates a CRT scan-line effect across the entire page. This layer also contains intermittent "glitch bars" -- horizontal strips 20-80px tall that flash across the screen at random intervals (every 4-8 seconds), briefly displacing the content beneath them using `clip-path` and `transform: translateX()` to create a horizontal tear effect. **Navigation:** There is no traditional navigation bar. Instead, a single glyph in the top-right corner (the Korean character 건, the first syllable of gunsul) pulses with a neon glow. Clicking it triggers a full-screen overlay that slides in from the right with a glitch-tear transition, containing navigation links rendered in oversized monospace type arranged vertically. ## Typography and Palette **Typography:** - **Display / Headlines:** "Bungee Shade" (Google Fonts) -- a layered, three-dimensional display typeface with built-in inline, outline, and shadow variants. Its aggressive block letterforms with decorative drop-shadows embody the maximalist ethos: even the typography refuses to be flat or simple. Used at 4rem to 12rem for section headers and typographic architectural elements. Set with `font-weight: 400`, `letter-spacing: 0.04em`, `line-height: 0.95`. The shadow layer creates depth even without CSS box-shadow, making each headline feel like a physical object protruding from the screen. - **Secondary Display:** "Stalinist One" (Google Fonts) -- a constructivist-inspired display typeface with extreme geometric angularity and propaganda-poster authority. Used for sub-headings and callout text at 1.8rem to 3.5rem. Its sharp, commanding presence contrasts with Bungee Shade's playful dimensionality, creating friction between seriousness and spectacle. `font-weight: 400`, `letter-spacing: 0.02em`, `line-height: 1.05`, `text-transform: uppercase`. - **Body / Interface:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a monospaced skeleton, bridging the gap between technical precision and humanist readability. Its slightly squared letterforms feel constructed rather than drawn, echoing the "construction" meaning of gunsul. Used at 0.95rem to 1.3rem for body text, UI labels, and metadata. `font-weight: 400-500`, `letter-spacing: 0.01em`, `line-height: 1.55`. - **Data / Accent:** "Share Tech Mono" (Google Fonts) -- a monospaced face optimized for screen rendering, used for any data fragments, code-like decorative elements, glitch-text overlays, and the timestamp/coordinate readouts that appear in the interference layer. 0.75rem to 1rem, `letter-spacing: 0.08em`, uppercase. **Color Palette:** The palette is built on a dopamine-neon foundation -- high-saturation, high-energy colors that vibrate against a near-black base. No pastels, no muted tones, no subtlety. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Void Base | Obsidian | #0A0A0F | Primary background, the dark void behind all layers | | Signal Core | Electric Magenta | #FF00FF | Primary accent, glitch-bar color, nav glyph glow | | Pulse | Toxic Cyan | #00FFED | Secondary accent, hover states, scan-line highlights | | Alert | Hazard Yellow | #FFE600 | Tertiary accent, callouts, warning-style decorative elements | | Data Stream | Phosphor Green | #39FF14 | Monospace text overlays, data fragments, cursor trails | | Burst | Violent Orange | #FF6B00 | Burst-mode explosion radiants, border accents | | Ghost Text | Static Gray | #8B8B9A | Body text, metadata, muted interface elements | | Bleed | Hot Pink | #FF1493 | Background gradient bleeds, hover-state transitions | | Substrate | Deep Indigo | #1A0A3E | Layer 1 typographic elements, secondary backgrounds | Color application follows a **maximum contrast** principle: neon colors always sit on the near-black base, never on each other. When two neon colors must interact, one is reduced to 20% opacity and used as a background wash while the other remains at full saturation. The result is that every colored element pops aggressively from its background, creating the retinal buzz of a gas-discharge tube display. ## Imagery and Motifs **Mixed-Media Glitch Collage:** The imagery vocabulary is deliberately chaotic: CSS-generated patterns, SVG fragments, gradient-mesh abstractions, and corrupted-data textures collide on every surface. No stock photography. No photographic realism. Everything is synthetic, generated, or corrupted. **Primary Visual Elements:** 1. **Data-Moshed Gradients:** Large rectangular blocks (40vw x 60vh) of CSS gradients that have been "corrupted" through extreme layering. Implementation: stack 5-8 `background-image` layers of `linear-gradient`, `radial-gradient`, and `conic-gradient` with partially overlapping color stops and `background-blend-mode: difference` or `background-blend-mode: exclusion`. The result is a churning, interference-pattern-like field of color that resembles corrupted JPEG artifacts. Each section gets a unique gradient stack, ensuring no two look alike. 2. **ASCII Topology Maps:** Decorative panels filled with monospaced characters arranged to form topographic contour patterns. These are implemented as `
` blocks with `Share Tech Mono`, where rows of characters like `░▒▓█▄▀` form abstract landscape silhouettes. The text color cycles through the neon palette using CSS animation (`@keyframes color-cycle`) with each row slightly offset in timing, creating a rippling color wave effect across the topology.

3. **Scan-Line Portraits:** Abstract face-like compositions built entirely from horizontal lines of varying thickness. Using CSS `repeating-linear-gradient` with gaps that vary in width to suggest eye-like or mouth-like voids, these create an uncanny feeling of being watched by the interface itself. They appear as `::before` pseudo-elements on section dividers.

4. **Fragmented Korean Characters:** The characters from 건설 (gunsul, meaning construction) and 퀘스트 (quest) are deconstructed -- individual strokes extracted and scattered as decorative elements throughout the page. These strokes are implemented as SVG paths, rotated and scaled independently, creating a visual language of "construction in progress" where the characters are perpetually being assembled and disassembled.

5. **Noise Grain Overlay:** A full-viewport `position: fixed` layer using an SVG `` filter with `baseFrequency="0.65"` and `type="fractalNoise"`, applied at very low opacity (0.04) over the entire page. This adds analog film grain to the digital maximalism, softening the hard edges of the neon colors just enough to prevent true eye strain while maintaining the chaotic energy.

**Motif: Abstract-Tech Construction:**

The unifying motif treats the website itself as a construction site for digital architecture. Decorative elements include:
- **Blueprint grid lines:** Faint cyan (#00FFED at 0.08 opacity) grid overlays that appear behind content sections, suggesting architectural plans
- **Structural brackets:** Large `[` and `]` characters rendered at 20vw scale, flanking content sections like scaffolding
- **Progress indicators:** Thin horizontal bars at section boundaries that animate from 0% to 100% width as the section scrolls into view, suggesting a build process
- **Coordinate labels:** Small monospace readouts in the corners of sections showing fake coordinates (`x:0742 y:1138 z:009`) in phosphor green

## Prompts for Implementation

**Full-Screen Glitch Narrative Experience:**

The site opens with a 3-second "boot sequence" -- the viewport fills with rapidly scrolling monospace text (Share Tech Mono, phosphor green on obsidian black) simulating a system initialization log. Lines scroll up at approximately 40 lines per second, too fast to read, creating the impression of vast computational activity. At the 2-second mark, a "glitch event" tears the boot text apart: horizontal strips of the viewport displace left and right by 20-60px over 400ms, accompanied by a brief flash of electric magenta across the full viewport (opacity 0 to 0.8 to 0 over 300ms). The boot text dissolves, and the first content section slams into place with a `transform: scale(1.3)` that snaps to `scale(1)` over 200ms with `cubic-bezier(0.16, 1, 0.3, 1)` easing.

**Scroll Behavior:**

- Content sections do NOT fade in gently. They use a **slam-cut** transition: as the user scrolls a section into the viewport, it appears at full opacity with a 1-frame `translateY(-8px)` that resolves instantly, creating a percussive, staccato rhythm.
- Every fourth section triggers a micro-glitch: the entire viewport shifts `translateX(3px)` for 80ms then snaps back, accompanied by a 2px horizontal scan-line displacement.
- Background gradient stacks on each section animate their `background-position` based on scroll position using CSS `scroll-timeline`, creating slow parallax-like drift without traditional parallax layering.

**Glitch Animation System:**

Implement a CSS-only glitch engine using `@keyframes` that can be applied to any element via a `.glitch` class:

```
@keyframes glitch-shift {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(15% 0 60% 0); transform: translate(-4px, 2px); }
  40% { clip-path: inset(70% 0 5% 0); transform: translate(4px, -1px); }
  60% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 0); }
  80% { clip-path: inset(5% 0 80% 0); transform: translate(3px, 1px); }
}
```

This creates the signature glitch-tear effect by showing only horizontal slices of the element, offset from their true position. Apply with `animation: glitch-shift 4s infinite steps(1)` for a harsh, digital stutter. Layer two copies of the same element with slight color offsets (one shifted +2px in cyan, one shifted -2px in magenta) to create chromatic aberration.

**Interactive Glitch Response:**

On hover, elements do not smoothly transition. They "break" -- applying an immediate 1-frame `skewX(2deg)` with simultaneous `filter: hue-rotate(60deg)` that resolves over 150ms. This makes every interaction feel like the interface is momentarily destabilized by the user's presence.

Mouse movement anywhere on the page should cause the Layer 3 scan-line overlay to subtly shift its vertical position (tracking `clientY` and applying a `translateY` of `clientY * 0.02`px), creating the sensation that the viewer is peering through a physical screen that responds to their gaze.

**Typography Animation:**

Headlines rendered in Bungee Shade should have their shadow layer separated into a `::after` pseudo-element positioned 3px right and 3px down, colored in electric magenta. On scroll into view, the shadow and the text arrive from slightly different directions (text from left, shadow from right) and converge over 300ms, giving the impression that the dimensional layers of the typeface are assembling in real time.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, gentle fade-in animations, floating action buttons, sticky headers, breadcrumbs, hero images with overlay text on photographs, any element that suggests a SaaS landing page or corporate product site.

**PREFER:** Full-viewport narrative sections, typographic architecture, generative visual textures, aggressive transition timing, layered depth, scan-line and interference effects, data-as-decoration, construction/assembly metaphors.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Collision-Stack Layout Architecture:** No other design in the portfolio uses a four-layer fixed/scrolling collision system where content literally overlaps and bleeds through other content. While broken-grid (7%) and layered-depth (7%) exist as patterns, the collision-stack approach is fundamentally different -- it treats the page as a z-axis battlefield rather than an organized composition. Content is not arranged; it is accumulated.

2. **CSS-Only Glitch Engine as Primary Animation Vocabulary:** While glitch appears at 11% as an aesthetic tag, no other design makes glitch displacement the SOLE animation paradigm. There are no fade-ins, no slide-ins, no scale transitions. Every animation is a variation of clip-path tearing, chromatic aberration splitting, or transform-based displacement. The glitch is not decorative -- it IS the motion language.

3. **Deconstructed Korean Typography as Structural Motif:** The fragmentation of Hangul characters (건설/퀘스트) into individual stroke elements used as architectural decoration is unique to this domain. No other design deconstructs its domain name's script system into visual building blocks. The strokes function simultaneously as letters being built and structures being erected, creating a visual double meaning specific to the "gunsul" (construction) concept.

4. **Zero-Margin Full-Bleed with Interference Overlay:** While full-bleed appears at 33%, the combination of absolute zero margins with a persistent CRT scan-line interference overlay and randomized glitch-bar interruptions creates a viewing experience unlike any other design. The page feels less like a website and more like a broadcast signal being received through damaged equipment.

5. **Boot Sequence Opening:** The simulated system-initialization opener with scrolling monospace log text is not used in any other design. It establishes the site as a machine to be activated rather than a page to be read, setting an entirely different expectation framework from the first interaction.

**Chosen seed/style:** aesthetic: maximalist, layout: full-bleed, typography: display-bold, palette: dopamine-neon, patterns: glitch, imagery: mixed-media, motifs: abstract-tech, tone: energetic

**Avoided overused patterns:** Centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered as sole pattern (96%), minimal imagery (95%), vintage motifs (78%), friendly tone (97%), playful aesthetic (97%). This design deliberately inverts the portfolio's defaults by using maximalist density instead of clean space, neon-on-black instead of warm tones, slam-cut glitch transitions instead of gentle scroll-triggered reveals, and mixed-media chaos instead of minimal imagery.