# Design Language for matsurika.dev ## Aesthetics and Tone matsurika.dev is a **holographic HUD-overlay developer's collage in muted-vintage tones** -- imagine the cockpit of a 1970s passenger aircraft, instrument panels coated with thin holographic foil, content scrolling across the displays as a Dadaist photo-collage. The aesthetic is *holographic-vintage*: the chrome iridescence of modern holographic foils running over softly desaturated mid-century instrument-panel beige. The mood is *nostalgic-retro* -- a hint of melancholy, a HUD that's been *in service* for fifty years and has accumulated dust and patina. The brand "matsurika.dev" frames the site as a developer's portfolio reconceived as a HUD instrument panel -- each "skill" or "project" is a HUD readout, presented within a collage of cut-paper photographs, deco rules, and holographic strip-edges. The tone is gently melancholic, expert, slightly tired. Inspirational anchors: 1970s Boeing 747 cockpit photographs, Hannah Höch's Dadaist collages, the holographic foil printing of vintage trading cards, Pan Am's airline branding under E. Otto Bach, the muted color palette of *2001: A Space Odyssey*'s rotating wheel station, and the photo-collage artwork of Jamie Reid. ## Layout Motifs and Structure A **hud-overlay** composition with a central content stream framed by floating HUD elements at every edge -- like reading a developer's portfolio through the cockpit window of an aging spacecraft. Photo-collage scraps drift across the layout as decorations, with holographic foil edges shimmering on every panel. **Structural anatomy:** - **Top HUD bar (full-width, 64px):** A vintage instrument-panel-beige strip with the wordmark "matsurika.dev" in sans-grotesk, a "STATUS: NOMINAL" indicator, and a live timer ticking up (the dev's tenure). Holographic foil edge along the bottom. - **Left side-rail (180px wide, sticky):** A vertical stack of small HUD-style panels: "SKILLS [16 entries]", "PROJECTS [42 entries]", "YEARS [13.7]", each with tiny scroll-triggered counter animations. Holographic-foil edges. - **Right side-rail (180px wide, sticky):** A vertical stack of "RECENT ACTIVITY" log lines in sans-grotesk, timestamped, scrolling slowly upward (1px/s) like a real activity log. - **Central content stream (~64% wide, vertical scroll):** The portfolio proper -- 8-12 project entries, each a photo-collage card with: a flowing-curve graphic border, a vintage-aesthetic photograph of the project, holographic foil overlay strips, and 3-4 lines of project description. - **Scroll-triggered collage scraps:** Small photo-collage fragments (cut-paper photo clippings) drift into the layout from the side rails as the user scrolls, accumulating along the central stream's margins. - **Bottom HUD bar:** A "FLT TIME: 12:34:56" timer + colophon text + final holographic-foil rule. Spatial rhythm: HUD-paneled and busy at edges, quieter in the central reading stream. The user's eye is constantly drawn to peripheral HUD activity. ## Typography and Palette **Fonts (all Google Fonts):** - **Sans grotesk (primary):** "DM Sans" 400/500/700 -- a humanist grotesque sans with friendly proportions. Used for the wordmark at clamp(32px, 5vw, 64px), body at 14-15px, line-height 1.55. Project titles at 24-28px. - **HUD readouts / labels:** "DM Sans" 500 small-caps at 10-11px, letter-spacing 0.22em, tabular numbers -- the entire HUD typography. - **Numerals / timers:** "DM Sans" 600 with lining figures, tabular numbers. **Palette (muted-vintage):** - `#E5DDC8` -- Instrument Beige (primary background, like aged cockpit panels) - `#5C5448` -- Cockpit Brown (typography, panel borders) - `#7E7561` -- Dust Olive (secondary type, HUD-secondary text) - `#C9BCA0` -- Worn Linen (panel inner fills) - `#A35F4A` -- Vintage Russet (rare accent, "warning" highlights) - `#3D3826` -- Walnut Shadow (deep contrast, deepest type) - *Holographic foil overlay:* a muted iridescent gradient `#D8B5C4` (muted pink) -> `#B5C9D8` (muted cyan) -> `#C4D8B5` (muted green) -> `#D8C9B5` (muted gold) -- 4-stop, used at 12-22% opacity along panel edges. Vintage strategy: every color is desaturated 40-55% from its pure form. The holographic foil is *muted* -- not the loud iridescence of 2026 designs, but the *faded* iridescence of a 50-year-old foil sticker. ## Imagery and Motifs **Core visual motifs:** - **Photo-collage (the centerpiece imagery):** Each project entry features a Dadaist photo-collage: cut-paper rectangular photographic fragments (a hand, a screen, a circuit, a sky) layered with deliberate overlap and 4-8 degree rotations. Each fragment has a thin Cockpit Brown border (the "scissor edge" of paper). - **Flowing-curve motifs (HUD overlays):** Thin SVG curves with flowing s-shapes appearing as HUD decoration -- circuit-board curves, signal traces, decorative arcs. Used as panel borders and section dividers. - **Holographic foil strips:** Each panel has a 4-6px holographic foil strip along one or two edges (typically top + right), animated with slow hue-rotation. - **Vintage instrument indicators:** Small SVG circular indicators (dials, status lamps, gauges) drawn in Dust Olive on Instrument Beige, scattered throughout the HUD. - **Scroll-triggered debris:** Small photo-collage scraps that fly in from off-screen as the user scrolls, settling in the margins of the central stream. **Decorative patterns:** - A faint vintage paper-grain texture (SVG turbulence at 6% opacity, with subtle warm tinting) over the entire background. - A subtle scan-line pattern (0.5px lines, 3% alpha, 4px spacing) overlays the central stream -- a CRT-monitor relic. ## Prompts for Implementation **Open with the HUD booting.** First 2400ms: viewport begins all Instrument Beige. The HUD bars at top and bottom fade in (200ms each). Side rails slide in from the left and right (translateX ±180px -> 0 over 800ms cubic-bezier). The central stream's wordmark appears with a brief chromatic-shift (200ms holographic split, settle). HUD timers begin ticking. Scroll-triggered collage scraps begin drifting in from below as the user scrolls. **Scroll-triggered pattern (featured):** This is the primary motion vocabulary. - Every element on the page has a scroll-triggered behavior -- entries fade in, scraps fly in, timers update, foil strips shimmer. - Collage scraps: trigger via IntersectionObserver. Each scrap flies in from a random screen edge (translateX/Y ±240px -> 0, rotate ±30deg -> ±8deg, 800ms cubic-bezier ease-out). - Counters update on scroll-into-view (skill counts ticking up from 0). - Holographic foil strips have a `background-position` animation triggered on scroll: the strip's foil pattern slides across by `scrollY % 100px` -- so the foil literally shimmers as the user scrolls. - Side-rail activity logs scroll upward at a slow rate when active, faster when the user is scrolling. - Use `prefers-reduced-motion` to disable scroll-coupled animations (replace with instant reveals). **Photo-collage entrance choreography:** Each project entry's photo-collage builds layer-by-layer when scrolled into view: - First fragment fades in (300ms). - Second fragment slides in at 4deg rotation (translate + rotate, 480ms). - Third fragment scales in (scale 0.85 -> 1.0, 320ms). - Each subsequent fragment offset by 100ms. - Fragments have soft drop-shadows (4px 8px Walnut Shadow at 0.2 alpha) producing the cut-paper depth feel. **Holographic foil hue rotation:** Foil strips on every panel cycle their hue slowly: ```css @keyframes muted-foil { 0%, 100% { filter: hue-rotate(0deg) saturate(0.7); } 50% { filter: hue-rotate(28deg) saturate(0.85); } } animation: muted-foil 32s ease-in-out infinite; ``` The `saturate(0.7-0.85)` is critical -- it keeps the foil *muted-vintage* rather than loud-holographic. **HUD activity log:** The right side-rail's activity log adds entries every 8-12 seconds. Each new entry appears at the bottom with a brief typewriter effect (40ms/char), then the entire log slides upward by one line over 400ms. **Storytelling beats (nostalgic-retro developer portfolio, no marketing CTAs):** 1. HUD boot intro. 2. Top hero with wordmark + status indicators. 3. Project entries: 8-12 photo-collage cards with HUD-style metadata strips, descriptions in sans-grotesk. 4. Activity log on the right side-rail continuously updating. 5. Footer HUD bar with flight-time counter + colophon. **Anti-patterns to avoid:** No CTAs, no "Hire me" buttons (the tone is melancholic-expert, not promotional), no testimonials, no pricing. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Holographic aesthetic (5%) with muted-vintage palette (1%):** The combination is unique -- holographic is usually loud-saturated; pairing with muted-vintage produces a "faded foil" feel not attempted elsewhere. 2. **HUD-overlay layout (2%) reframed as nostalgic cockpit rather than sci-fi futurism:** Most HUD-overlay designs lean futuristic; this one leans *vintage* -- 1970s Boeing cockpit, not 2026 Star Trek. 3. **Photo-collage imagery (5%) as the entire visual content vocabulary:** Most photo-collage uses are limited to one or two compositions; here every project entry is a full collage, building up via scroll-triggered animation. 4. **Scroll-triggered pattern (35%) used in an unusually unified way:** Most scroll-triggered designs use it for individual reveals; this one couples *every* visual element (foil hue, log scroll, counter ticks, scrap drift) to scroll position -- creating a single coherent kinetic system. 5. **Flowing-curves motif (3%) as HUD decoration:** Most flowing-curves uses are botanical or natural; here they're repurposed as HUD signal-traces and decorative instrumentation, paired with sans-grotesk typography. **Chosen seed/style:** aesthetic=holographic, layout=hud-overlay, typography=sans-grotesk, palette=muted-vintage, patterns=scroll-triggered, imagery=collage, motifs=flowing-curves, tone=nostalgic-retro. **Avoided overused patterns:** Refused parallax-as-primary (95%), centered/card-grid (95%/91%), mono typography (81%), and the default mysterious-moody tone (71%) for nostalgic-retro melancholia.