# Design Language for prototype.moe ## Aesthetics and Tone prototype.moe channels the visual language of a high-end fashion editorial printed on heavyweight uncoated stock -- the kind of magazine you find on the coffee table of a brutalist concrete penthouse overlooking Tokyo Bay at golden hour. The aesthetic is **editorial luxe meets digital interference**: imagine the restrained elegance of a Cereal Magazine spread colliding with the corrupted signal artifacts of a VHS tape left recording a sunset. Every element carries the tension between meticulous curation and deliberate digital decay. The tone is **luxurious** in the way a handmade Japanese knife is luxurious -- not through ornamentation but through the evident precision of every decision. There is no excess. The luxury here is spatial: vast margins, deliberate pauses between content blocks, the quiet confidence of a design that does not need to fill every pixel. But threaded through this restraint are moments of controlled chaos -- glitch artifacts that fracture the grid like hairline cracks in a porcelain glaze, reminding the viewer that this is a prototype, a thing still becoming, a signal still resolving. The mood oscillates between the warm amber stillness of a sunset sky and the electric instability of a malfunctioning display. It is simultaneously the most serene and the most unstable site in the portfolio -- calm surfaces hiding volatile undercurrents. ## Layout Motifs and Structure The layout employs a **ma-negative-space** philosophy, drawing from the Japanese concept of "ma" (the meaningful void between things). Content does not simply float in whitespace; the whitespace itself is the primary compositional element. The page is structured as a series of deliberate absences punctuated by precise content placements. **Spatial Architecture:** - **The Void Grid:** Rather than a traditional 12-column grid, the layout uses a 5-column structure where columns 1, 3, and 5 are intentionally left empty as breathing channels. Content occupies only columns 2 and 4, creating a rhythm of void-content-void-content-void. On mobile, this collapses to a single column with extreme top/bottom padding (15vh between sections) to preserve the spatial intervals. - **Vertical Rhythm as Narrative:** The vertical spacing follows a Fibonacci-derived sequence: section gaps alternate between 8vh, 13vh, 21vh, and 34vh. This creates an accelerating sense of space as the user scrolls deeper -- the site literally breathes more slowly as it progresses, like a meditation slowing from shallow breaths to deep ones. - **Asymmetric Weight:** Text blocks are never centered. They anchor to the left edge of their content column with a hard flush-left alignment, while their right edges are ragged and organic. This creates a tension between the geometric precision of the grid and the natural irregularity of language. Headings occasionally break out of their column, bleeding 15% into the adjacent void channel -- a controlled violation that draws the eye. - **Glitch Fractures:** At three specific scroll positions (25%, 55%, 85%), the layout itself appears to momentarily fracture. Content blocks shift 2-4px horizontally for 150ms, thin horizontal lines of the sunset palette colors streak across the viewport, and the grid briefly becomes visible as faint hairlines before resolving back to stability. These are not decorative -- they are structural events that mark narrative transitions. ## Typography and Palette **Typography:** - **Headlines:** "Commissioner" (Google Fonts) -- a versatile variable font with a wide weight range (100-900). Used at weight 300 for headlines, which is counterintuitive: the thinnest weight for the largest text creates an ethereal, almost fragile presence that contrasts with the boldness of the sunset palette. Headlines are set at `clamp(2.5rem, 5.5vw, 5rem)` with `letter-spacing: -0.02em` and `line-height: 1.05`. The tight tracking and leading create dense, architectural text blocks that read as visual objects rather than mere words. - **Body Text:** "Commissioner" at weight 400 and `font-size: clamp(1rem, 1.15vw, 1.2rem)` with `line-height: 1.72`. The generous leading creates visible horizontal bands of whitespace between lines, reinforcing the ma-negative-space philosophy at the typographic micro-level. Paragraph max-width is locked to 38ch -- narrower than conventional wisdom suggests, creating tall, slender text columns that echo the vertical emphasis of the overall layout. - **Accent/Labels:** "Commissioner" at weight 700 and `font-size: 0.7rem` with `letter-spacing: 0.18em` and `text-transform: uppercase`. Used for navigation labels, section markers, and metadata. The heavy weight at small size creates dense, authoritative typographic anchors that counterbalance the airiness of the headlines. - **Monospace Interruptions:** "IBM Plex Mono" (Google Fonts) at weight 400 and `font-size: 0.85rem`. Used sparingly for glitch-state text -- when a section undergoes its glitch fracture, body text momentarily switches to this monospace face for 200ms before reverting, as if the rendering engine briefly exposed its raw source. Also used for the footer copyright and any technical metadata. **Palette:** The palette is drawn from the final twenty minutes of a Pacific sunset, captured through a screen with a faulty color profile: | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Ground | Obsidian Dusk | `#1C1018` | Primary background -- a near-black with a warm burgundy undertone, like the sky at the moment after the sun disappears below the horizon | | Warm Ground | Ember Slate | `#2E1F2A` | Secondary background for content blocks, cards, and elevated surfaces | | Sunset Core | Molten Coral | `#E8654A` | Primary accent -- the concentrated orange-red of the sun touching the waterline. Used for the first glitch-line, link hover states, and the primary heading on the hero | | Sunset Spread | Apricot Haze | `#F2A65A` | Secondary accent -- the diffused golden orange of the sky 10 degrees above the horizon. Used for secondary headings and geometric shape fills | | Sunset Fade | Peach Vapor | `#F5CDA7` | Tertiary accent -- the pale warmth at the top of the sunset gradient. Used for body text color against the dark ground | | Atmosphere | Lavender Ash | `#9B8AA0` | Muted purple-grey representing the twilight zone where warm sunset meets cool night. Used for labels, metadata, and de-emphasized text | | Interference | Glitch Cyan | `#3AFFE8` | Used ONLY during glitch events -- a sharp, digital cyan that does not belong in the sunset palette, creating deliberate chromatic disruption | | Surface | Warm Mist | `#F7EDE2` | Light background alternative for inverted sections, carrying the warmth of the sunset into bright contexts | ## Imagery and Motifs **Gradient Mesh as Primary Visual Medium:** prototype.moe uses no photographs, no illustrations, no icons. Its visual richness comes entirely from **CSS gradient meshes** -- complex layered radial and conic gradients that simulate the luminous, shifting color fields of a sunset sky. These are not background decorations; they are the imagery. Each major section features a gradient mesh element that spans 60-80% of the viewport width and 40-60% of the viewport height. These meshes are constructed from 4-6 layered `radial-gradient()` declarations using the sunset palette colors, with each gradient positioned at different offsets and scales. The result is a painterly, almost atmospheric color field that feels organic despite being pure CSS -- like a Mark Rothko painting rendered in sunset tones. **Gradient Mesh Construction Pattern:** ``` background: radial-gradient(ellipse 80% 60% at 30% 40%, #E8654A33 0%, transparent 70%), radial-gradient(ellipse 50% 80% at 70% 30%, #F2A65A44 0%, transparent 60%), radial-gradient(ellipse 120% 40% at 50% 80%, #F5CDA722 0%, transparent 50%), radial-gradient(ellipse 40% 40% at 80% 60%, #9B8AA033 0%, transparent 80%); ``` Each mesh subtly animates: the gradient positions shift by 2-5% over 20-30 second CSS animation cycles using `@property` registered custom properties for smooth interpolation. The movement is imperceptible at any given moment but creates a living, breathing quality over time -- like watching actual clouds of color drift across a sunset sky. **Geometric Shapes as Structural Markers:** Geometric shapes serve as the motif vocabulary. Three shapes recur throughout: 1. **The Diamond (rotated square):** 45-degree rotated squares in `#E8654A` at 15% opacity, positioned at section boundaries. These are purely CSS (`width: 120px; height: 120px; transform: rotate(45deg)`). They mark the beginning of each narrative section, acting as typographic ornaments -- the editorial equivalent of a drop cap, but geometric. 2. **The Circle Fragment:** Quarter-circles and semicircles in `#F2A65A` at 10% opacity, clipped with `clip-path`, positioned at the extreme edges of the viewport (partially off-screen). These create the impression of larger forms existing beyond the visible frame, reinforcing the sense of a design that extends infinitely beyond its boundaries. 3. **The Line:** Thin horizontal rules (1px) in `#9B8AA0` that span exactly 61.8% of the viewport width (the golden ratio), left-aligned. These separate sections but also function as visual rhythm markers -- a visual metronome clicking through the page's tempo. **Glitch Events:** At the three designated scroll positions, the visual field undergoes a **glitch event** lasting 300ms: - Gradient meshes shift abruptly by 10-15% in random directions - Two thin horizontal bars (3px height) of `#3AFFE8` (Glitch Cyan) streak across the viewport at random vertical positions - Geometric shapes momentarily double, with the duplicate offset by 4px horizontally and tinted cyan - Body text swaps to IBM Plex Mono for 200ms - The entire viewport shifts 2px right then back, simulating a scan-line misalignment These events are triggered by `IntersectionObserver` and execute via CSS animations with `animation-fill-mode: forwards` on specific keyframe sequences. They happen once per page load -- they are events, not loops. ## Prompts for Implementation **Full-Screen Narrative Opening:** The site opens to a full-viewport field of Obsidian Dusk (`#1C1018`). For 1.2 seconds, nothing is visible -- the screen is a warm void. Then, a gradient mesh fades in over 2 seconds at the center-right of the viewport: a slow bloom of Molten Coral and Apricot Haze, like watching a sunset develop on Polaroid film. The mesh occupies roughly 40% of the viewport and is slightly blurred (`filter: blur(40px)`) to create a soft, atmospheric presence. At 2.5 seconds, the site title "prototype" appears at the left of the viewport (column 2 of the void grid), set in Commissioner weight 300 at 7vw. It fades in from opacity 0 over 800ms. Below it, ".moe" appears in Commissioner weight 700 at 1.2rem, uppercase, letter-spaced at 0.3em, in Lavender Ash -- a quiet, confident whisper beneath the airy headline. The contrast between the enormous, featherlight "prototype" and the tiny, dense ".moe" establishes the typographic tension that pervades the entire site. At 4 seconds, a thin horizontal line (the golden-ratio rule, 61.8vw) draws itself from left to right below the title over 600ms, in Lavender Ash. Below this line, a single sentence appears: a tagline or manifesto fragment, set in Commissioner weight 400 at 1.15vw, in Peach Vapor. Maximum 12 words. **Scroll Narrative Structure:** The page unfolds as a vertical journey through approximately 6-8 full-viewport sections, each separated by the Fibonacci-derived spacing. The scroll experience is native (no scroll-jacking), but each section triggers its content to animate in via the `glitch` pattern: elements do not simply fade in -- they arrive through a micro-glitch, appearing with a 2px horizontal offset and a 50ms flash of Glitch Cyan border before settling into their final position. This creates the impression that each piece of content is being transmitted through an unstable channel. **Section Template:** Each content section follows this pattern: 1. A diamond geometric marker enters the viewport (scale 0 to 1 over 400ms, with a 2-frame glitch at scale 0.6) 2. A gradient mesh bloom fades in on the opposite side of the viewport from the text (2 second fade) 3. The section heading glitches in (horizontal offset animation, 150ms) 4. Body text appears line-by-line with 50ms stagger delays 5. A golden-ratio line draws itself at the section's conclusion **Key Implementation Directives:** - Use CSS `@property` for animated gradient positions -- this enables smooth GPU-accelerated gradient transitions - All glitch animations must use `will-change: transform` and composite-only properties (transform, opacity) for 60fps performance - The Glitch Cyan color `#3AFFE8` must NEVER appear in static states -- it exists only in motion, only during glitch events - Geometric shapes should use `mix-blend-mode: soft-light` against dark backgrounds to create luminous transparency - The entire site should function with JavaScript disabled (graceful degradation): gradient meshes and geometric shapes render statically, only animations are lost - No scroll-jacking, no smooth-scroll override, no custom scrollbar. The browser's native scroll must be respected - AVOID: CTA buttons, pricing blocks, stat-grids, testimonial carousels, feature comparison tables. This is a narrative experience, not a landing page - AVOID: Any stock photography or placeholder images. The gradient meshes ARE the imagery - Bias toward a single continuous HTML document with no navigation links -- one long vertical poem of color and geometry **Animation Timing:** - Use `cubic-bezier(0.16, 1, 0.3, 1)` for all entrance animations (sharp deceleration) - Glitch events use `steps(3)` timing for the scan-line effect - Gradient mesh drift uses `linear` timing over 20-30s durations for imperceptible movement - Stagger delays between sibling elements: 50ms (tight enough to feel connected, loose enough to feel sequential) ## Uniqueness Notes **Differentiators from other designs:** 1. **Gradient Mesh as Sole Imagery:** While 95% of designs in the portfolio use "minimal" imagery and 72% rely on photography, prototype.moe uses neither. Its entire visual richness comes from layered CSS gradient meshes -- painterly color fields that animate imperceptibly over 20-30 second cycles. No other design in the portfolio uses gradient meshes as the primary and exclusive visual medium. The effect is closer to a James Turrell light installation than a website. 2. **Ma-Negative-Space Layout with Void Columns:** The 5-column grid where 3 columns are intentionally empty is unique in the portfolio. At only 1% frequency, the ma-negative-space layout approach is nearly unused. Most designs treat whitespace as leftover; this design treats content as interruptions in an otherwise continuous field of emptiness. The Fibonacci-derived vertical spacing (8vh/13vh/21vh/34vh) further distinguishes the spatial rhythm from any other design. 3. **Glitch as Punctuation, Not Aesthetic:** While "glitch" appears as a pattern at low frequency, most glitch-influenced designs treat it as a persistent visual style. prototype.moe uses glitch as punctuation -- brief, precisely timed events that interrupt the otherwise serene editorial flow. The Glitch Cyan (#3AFFE8) color exists only in motion, never at rest, making it a temporal color that cannot be captured in a screenshot. This temporal-only color is unprecedented in the portfolio. 4. **Single-Font System with Variable Weight Range:** Using Commissioner across all typographic roles (headlines at 300, body at 400, labels at 700) with IBM Plex Mono only for glitch-state interruptions creates a monastic consistency that most designs avoid. The commissioner-versatile typography approach sits at only 2% frequency. The counterintuitive choice of the lightest weight for the largest text inverts standard typographic hierarchy. 5. **Sunset Palette on Dark Ground:** The sunset-warm palette (1% frequency) is deployed not against a warm light background as one might expect, but against near-black with burgundy undertones (#1C1018). This inversion -- warm colors glowing against darkness -- creates the specific visual quality of an actual sunset: luminous warmth emerging from encroaching night. The Lavender Ash (#9B8AA0) bridge color connects warm and cool zones in a way no other design in the portfolio attempts. **Documented Seed/Style:** aesthetic: editorial, layout: ma-negative-space, typography: commissioner-versatile, palette: sunset-warm, patterns: glitch, imagery: gradient-mesh, motifs: geometric-shapes, tone: luxurious **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with editorial (25%) - centered layout (99%) -- replaced with ma-negative-space (1%) - mono typography (99%) -- replaced with commissioner-versatile (2%) - warm palette as generic warmth (100%) -- refined to specific sunset-warm (1%) - scroll-triggered as sole pattern (96%) -- replaced with glitch as primary pattern - minimal/photography imagery (95%/72%) -- replaced with gradient-mesh (2%) - vintage motifs (87%) -- replaced with geometric-shapes (4%) - friendly tone (98%) -- replaced with luxurious (4%)