# Design Language for naru.day ## Aesthetics and Tone naru.day inhabits the visual space of a corrupted broadcast signal from a parallel dimension where bubblegum-pink static replaces white noise and data corruption manifests as candy-colored pixel avalanches. The aesthetic is **glitch** in its most joyful, anarchic form -- not the cold, dystopian glitch of surveillance footage decay, but the ecstatic visual rupture of a children's television signal being hijacked by a benevolent digital entity. Imagine a CRT monitor displaying a pastel-saturated test pattern that suddenly fractures into cascading shards of hot magenta, electric cyan, and acid lemon, each fragment trailing particle sparks as it tumbles through the viewport. The tone is **bold-confident** -- unapologetically loud, assertive without aggression. naru.day does not whisper or suggest; it declares. Every visual element carries the certainty of a system that knows it is glitching and has decided that the glitch is the message. There is no attempt to mask the digital corruption -- instead, the corruption is celebrated as the primary aesthetic language. Text flickers with deliberate chromatic aberration. Sections shift and resettle as though the page itself is a living signal struggling to hold coherence. The confidence comes from this embrace: the site does not apologize for its broken transmission, it insists that fragmentation is a valid form of beauty. The mood draws from the collision of Japanese "kawaii" digital culture with VHS-era signal degradation -- the sugar-rush palette of Harajuku storefronts filtered through the scan-line distortion of a deteriorating magnetic tape. "Naru" (なる, "to become") drives the conceptual narrative: the site is always in a state of becoming, never resolved, perpetually mid-transformation between one visual state and another. ## Layout Motifs and Structure The layout follows a **minimal-navigation** philosophy -- navigation elements are reduced to near-invisibility, appearing only when summoned by interaction. The primary navigation is a single glyph (a corrupted hamburger icon whose three lines continuously glitch and reassemble) positioned at the viewport's top-right corner. When activated, it expands into a full-viewport overlay where menu items are scattered across the screen at seemingly random coordinates, each item flickering into visibility with a staggered chromatic-aberration entrance animation. There is no header bar, no footer links, no breadcrumbs. The site is a single continuous descent. **Viewport Segmentation:** The page is divided into full-viewport "signal blocks" -- each section occupies exactly 100vh and is separated from the next by a 4px horizontal "scan line" rendered as a repeating linear gradient of alternating `#FF2D9B` and `#00F0FF` at 1px intervals. These scan-line dividers pulse with a subtle brightness oscillation (opacity alternating between 0.6 and 1.0 over 2 seconds, ease-in-out). Each signal block uses a distinct internal composition: 1. **Block Type A -- "Clean Signal":** Content is centered both vertically and horizontally within the viewport. A single headline and a short paragraph, surrounded by generous negative space. The text appears stable, but a barely-perceptible RGB split (1-2px offset on the red and blue channels via layered text-shadows) betrays that the "clean" signal is already compromised. 2. **Block Type B -- "Degraded Signal":** Content is positioned at a 2-4 degree rotation (`transform: rotate(-2.5deg)`), as though the signal has drifted off-axis. Text blocks are clipped by rectangular `clip-path` regions that shift position on scroll, creating the illusion of data being partially overwritten. Background features horizontal scan-line artifacts (repeating 2px transparent / 1px `rgba(0,240,255,0.08)` stripes). 3. **Block Type C -- "Full Corruption":** The entire viewport becomes a canvas for particle effects and animated glitch textures. Text is fragmented into individual characters, each wrapped in a span that can independently glitch (random `translateX/Y` offsets of 2-8px, random `skewX` of -5 to 5 degrees, random hue-rotate filters). Content is readable but requires the viewer to accept visual instability as part of the reading experience. The three block types cycle in a loose A-B-C-A-B-C rhythm, with the corruption level intensifying as the user scrolls deeper. By the final section, even "Clean Signal" blocks exhibit significant distortion. **Grid Foundation:** Beneath the visual chaos, a strict 12-column grid (with 24px gutters at desktop, 16px at mobile) provides structural integrity. Content never exceeds 8 columns width on desktop. The grid itself is invisible but its presence is felt in the consistent left-alignment of text blocks and the mathematical precision of element spacing, creating a tension between structural order and surface-level chaos. ## Typography and Palette **Typography:** - **Display / Headlines:** "Share Tech Mono" (Google Fonts) -- a monospaced typeface with a distinctly technical, terminal-readout character. Its uniform character width reinforces the digital-signal metaphor, and its slightly condensed proportions give headlines a compact, data-stream density. Used at `font-size: clamp(2.2rem, 5.5vw, 4.8rem)` with `font-weight: 400` (the only available weight) and `letter-spacing: 0.06em`. Headlines are set in uppercase with a persistent chromatic aberration effect: three layered `text-shadow` values offset the text in `#FF2D9B` (-2px, 0), `#00F0FF` (2px, 0), and `#BDFF00` (0, 2px), creating a permanent RGB-split that intensifies on hover (offsets increase to 4px with a 150ms transition). - **Body / Paragraph:** "Space Mono" (Google Fonts) -- another monospaced face, but with more generous x-height and slightly rounder terminals than Share Tech Mono, giving body text better readability at smaller sizes while maintaining the tech-mono aesthetic. Used at `font-size: clamp(0.95rem, 1.1vw, 1.15rem)` with `font-weight: 400`, `line-height: 1.75`, and `letter-spacing: 0.02em`. Body text is set in sentence case. A subtle `text-shadow: 0 0 8px rgba(255,45,155,0.15)` gives every paragraph a faint magenta glow, as though the text is being projected onto a slightly fogged screen. - **Accent / Labels:** "Silkscreen" (Google Fonts) -- a pixel-grid bitmap typeface that renders as though displayed on a low-resolution LED matrix. Used sparingly for UI labels, timestamps, section markers, and metadata. Set at `font-size: 0.7rem`, `letter-spacing: 0.15em`, uppercase. Color alternates between `#00F0FF` and `#BDFF00` depending on context. **Palette:** The candy-bright palette is built on five primary colors plus two structural neutrals: | Role | Color | Hex | Usage | |------|-------|-----|-------| | **Glitch Magenta** | Hot pink-magenta | `#FF2D9B` | Primary accent, chromatic aberration layer 1, interactive elements, scan-line dividers | | **Signal Cyan** | Electric cyan | `#00F0FF` | Secondary accent, chromatic aberration layer 2, hover states, particle trails | | **Data Lime** | Acid yellow-green | `#BDFF00` | Tertiary accent, chromatic aberration layer 3, active states, notification pings | | **Candy Coral** | Warm neon coral | `#FF6B6B` | Warning states, emphasis highlights, alternating section accents | | **Ultraviolet** | Deep electric purple | `#7B2FFF` | Gradient anchoring, depth shadows, overlay tints | | **Void Black** | Near-true black | `#0A0A0F` | Primary background, text containers | | **Static White** | Warm off-white | `#F0EEF5` | Primary text color, high-contrast elements | The background is `#0A0A0F` throughout -- a black so deep it absorbs the candy-colored elements and makes them appear to float in a lightless void. There are no light-mode alternatives. The entire experience is built for darkness, where the neon palette achieves maximum visual impact. **Gradient System:** - **Primary gradient:** `linear-gradient(135deg, #FF2D9B 0%, #7B2FFF 50%, #00F0FF 100%)` -- used for large decorative elements, section backgrounds at reduced opacity (0.08), and the navigation overlay. - **Glitch gradient:** `linear-gradient(90deg, #FF2D9B, #BDFF00, #00F0FF, #FF6B6B, #7B2FFF)` -- a five-stop rainbow used for border animations and progress indicators, animated with `background-size: 400% 100%` and a continuous `background-position` shift over 8 seconds. ## Imagery and Motifs **Particle System (Primary Motif):** The signature visual element is a persistent **particle-effects** system that operates across the entire page. Particles are tiny squares (2x2px to 6x6px) rather than circles, reinforcing the pixel/digital aesthetic. Each particle is assigned one of the five candy-bright colors at random and behaves according to one of three movement patterns: 1. **Drift particles** (60% of total): Float upward at 0.2-0.5px per frame with gentle horizontal sinusoidal oscillation (amplitude: 20-40px, period: 3-6 seconds). These create the ambient "digital snow" effect -- the persistent visual noise of a corrupted signal. 2. **Burst particles** (30% of total): Emitted in clusters of 8-15 from the user's cursor position on click events. They explode outward in a radial pattern with initial velocity of 3-8px/frame, decelerating via exponential ease-out, and fade to zero opacity over 1.2 seconds. Each burst particle leaves a 100ms motion trail (3 ghost copies at decreasing opacity). 3. **Glitch particles** (10% of total): Teleport randomly across the viewport every 0.5-2 seconds (randomized interval per particle). They appear at full opacity, hold position for 100-300ms, then vanish and reappear elsewhere. Their movement is discontinuous -- they never travel between positions, they simply exist and then exist elsewhere. The particle system renders on a fixed-position `` element behind all content (z-index: 0), with content containers at z-index: 1-10. Particle density scales with viewport width: approximately 80 particles at 1440px, 40 at 768px, 20 at 375px. **Glitch-Art Textures:** Key sections feature CSS-generated glitch textures as decorative backgrounds: - **Horizontal Tear:** A 100%-width band (height: 3-12px, randomized) that appears at random vertical positions within a section. The band's content is a horizontally-offset duplicate of the section's content, shifted 20-60px to the right with a hue-rotate filter applied. The tear appears for 80ms, vanishes for 2-4 seconds, then reappears at a different vertical position. Implemented via `clip-path: inset()` on a duplicated content layer. - **Color Channel Separation:** On scroll, section backgrounds momentarily split into separate R, G, B layers (using three overlapping divs with `mix-blend-mode: screen` and individual color fills), each offset by 3-6px in different directions. The separation lasts 200ms and triggers when a section crosses 40% of the viewport height during scroll. - **Pixel Sort Bands:** Vertical stripes (width: 1-4px) of sorted-by-brightness color values, rendered as narrow `linear-gradient` columns positioned at irregular intervals across section backgrounds. These mimic the "pixel sorting" glitch-art technique and are statically positioned (no animation) to provide visual texture without motion fatigue. **Scan-Line Overlay:** A persistent full-viewport scan-line overlay sits above all content at z-index: 100 with `pointer-events: none`. It consists of alternating 1px transparent and 1px `rgba(0,0,0,0.06)` horizontal stripes, creating the subtle CRT monitor effect. The overlay's opacity pulses between 0.3 and 0.7 on a 4-second cycle, simulating the brightness fluctuation of an aging display. **Cursor Treatment:** The default cursor is replaced with a custom SVG cursor -- a 16x16px crosshair rendered in `#00F0FF` with a 1px `#FF2D9B` drop shadow. On hover over interactive elements, the crosshair expands to 24x24px and rotates 45 degrees. A circular glow (radial gradient from `rgba(0,240,255,0.15)` to transparent, radius: 60px) follows the cursor position with a 50ms lag, creating a soft spotlight effect on the dark background. ## Prompts for Implementation **Full-Screen Narrative Opening:** The site opens to a full-viewport "signal acquisition" sequence. The screen begins as `#0A0A0F` void. After 200ms, horizontal scan lines fade in from the top and bottom edges, converging toward the center over 1.5 seconds. When they meet at the vertical center, a bright `#00F0FF` horizontal line flashes across the full width (100ms flash, 50ms darkness, 80ms flash) -- simulating a monitor powering on. The flash resolves into the domain name "naru.day" rendered in Share Tech Mono at `clamp(3rem, 8vw, 7rem)`. The text does not simply appear -- it assembles character by character with a 60ms stagger, each character entering with a vertical "drop" from 20px above its final position and a simultaneous chromatic aberration that starts at 6px offset and settles to the standard 2px over 300ms. During assembly, random characters briefly display as corrupted Unicode glyphs (e.g., "█", "▓", "░", "╳") before resolving to the correct letter. Below the domain name, a subtitle fades in over 800ms: a single line of body text in Space Mono describing the site's purpose. The subtitle text has a typewriter-cursor blink (a 2px-wide `#BDFF00` rectangle) that persists for 3 seconds after the text completes, then fades. The particle system activates during the character assembly sequence, starting with zero particles and ramping to full density over the 3-second intro duration. **Section Transitions via Fade-Reveal:** Section transitions use the **fade-reveal** pattern as the primary entrance animation. As the user scrolls, each signal block begins fully transparent and translates 40px below its final position. When the block's top edge crosses the 70% viewport threshold, it fades in (opacity 0 to 1) and translates to its resting position over 600ms with an ease-out-cubic timing function. However, the fade-reveal is augmented with a glitch interruption: at the 50% point of the fade animation (300ms), the incoming section "glitches" -- it snaps 8px to the right, applies a 100ms burst of chromatic aberration (text-shadow offsets spike to 6px), then snaps back to center. This creates a signature "the signal almost didn't make it" moment in every transition. The glitch interruption is achieved via a CSS keyframe animation layered on top of the primary fade transition. **Scroll-Driven Corruption Meter:** A thin (3px) progress bar is fixed to the left edge of the viewport, spanning the full height. It fills from top to bottom as the user scrolls, colored with the animated glitch gradient. But this is not a smooth fill -- the bar's height value updates in discrete 4% increments (simulating low-resolution data sampling), and every increment triggers a brief flash of the bar's color at full opacity before settling to 0.6 opacity. At 100% scroll depth, the bar explodes into 50 burst particles that scatter across the left 20% of the viewport. **Interactive Glitch Trigger:** Any heading element, when clicked, triggers a 500ms "full glitch" event: the entire viewport shakes (2px random translateX/Y offsets applied to the body at 30fps), the scan-line overlay jumps to 0.9 opacity, all text on-screen simultaneously shifts through a rapid hue-rotate cycle (0deg -> 90deg -> 180deg -> 270deg -> 360deg over 500ms), and 30 burst particles emit from the clicked heading's bounding box center. The event is throttled to prevent re-triggering within 2 seconds. **NO CTA-heavy layouts.** The site contains zero call-to-action buttons, zero pricing tables, zero stat-grids, zero testimonial carousels. Every section is narrative content -- text, imagery, and atmosphere. Interactive elements exist for delight, not conversion. **Mobile Adaptation:** On viewports below 768px, the particle system reduces to drift-only (no burst or glitch particles) at 20 particle maximum. The chromatic aberration offsets reduce to 1px. The custom cursor is disabled (touch devices). The scan-line overlay reduces to 0.3 max opacity. Signal block rotations (Block Type B) reduce to 1 degree. These reductions preserve the aesthetic while respecting mobile performance constraints. **Performance Guardrails:** The canvas particle system uses `requestAnimationFrame` with a frame-skip mechanism that targets 30fps rather than 60fps. All CSS animations use `transform` and `opacity` exclusively (never animating `width`, `height`, `top`, `left`, or `margin`). The scan-line overlay is a single repeating-linear-gradient on a pseudo-element, not individual DOM elements. Glitch textures (horizontal tears) use `will-change: clip-path` only during active animation cycles and remove the property when idle. ## Uniqueness Notes **Differentiators from other designs:** 1. **Candy-Bright Glitch Fusion (unprecedented combination):** The candy-bright palette appears at only 1% frequency across the entire portfolio, and its pairing with the glitch aesthetic (12%) creates a combination that exists in zero other designs. Most glitch designs default to dark-neon or monochrome palettes; naru.day inverts this expectation by pairing signal corruption with bubblegum colors, producing a visual language that is simultaneously broken and joyful -- corrupted data rendered in the palette of a candy store. 2. **Minimal-Navigation at 2% Frequency:** Only 2% of portfolio sites use the minimal-navigation layout pattern. naru.day takes this further by making navigation not merely minimal but actively hostile to conventional UX -- the scattered-coordinate menu overlay, the single glyph trigger, the complete absence of header/footer navigation. The site treats wayfinding as an extension of the glitch aesthetic: you navigate by embracing disorientation. 3. **Particle-Effects Motif at 1% Frequency:** Particle effects appear in only 1% of designs, making it one of the rarest motifs in the portfolio. naru.day's three-class particle system (drift, burst, glitch) with distinct behavioral rules for each class goes far beyond the typical ambient particle background, creating a living atmospheric layer that responds to user interaction and evolves with scroll depth. 4. **Triple-Monospace Typography Stack:** Using three distinct monospace/pixel typefaces (Share Tech Mono, Space Mono, Silkscreen) at different hierarchy levels is unique in the portfolio. While tech-mono appears at 6% frequency, no other design commits to an all-monospace type stack. This creates absolute visual consistency -- every letterform on the page shares the fixed-width DNA of terminal output, reinforcing the digital-signal narrative without any typographic code-switching. 5. **Signal Degradation as Scroll Narrative:** The progressive corruption mechanic (clean signal at top, full corruption at bottom) creates a spatial storytelling arc that is absent from other designs. The scroll position becomes a narrative variable -- how far you have scrolled determines how "damaged" the transmission is. This transforms passive scrolling into an active story experience where the viewer's own movement degrades the content they are consuming. **Chosen Seed/Style:** `aesthetic: glitch, layout: minimal-navigation, typography: tech-mono, palette: candy-bright, patterns: fade-reveal, imagery: glitch-art, motifs: particle-effects, tone: bold-confident` **Avoided overused patterns:** - Playful aesthetic (95%) -- replaced with glitch (12%) - Centered layout (99%) -- replaced with minimal-navigation (2%) - Vintage motifs (85%) -- replaced with particle-effects (1%) - Warm palette (100%) -- replaced with candy-bright (1%) - Scroll-triggered patterns (97%) -- replaced with fade-reveal (9%) - Friendly tone (98%) -- replaced with bold-confident (4%) - Minimal imagery (94%) -- replaced with glitch-art (5%)