# Design Language for murasaki.moe ## Aesthetics and Tone murasaki.moe is a **glitch** portfolio — but elegant, not violent. The aesthetic recovers glitch art from its rave-flyer chaos and returns it to the controlled register of haute couture editorial: think Iris van Herpen's 3D-printed dress silhouettes rendered as RGB-displaced botanical drawings, or the algorithmic embroidery of Mary Katrantzou's archive captured mid-corruption. The tone is **elegant-sophisticated** — every glitch is measured, every offset is deliberate, every channel-split happens on a button-press, never as ambient decoration. Inspiration draws from the wet-glass glitches of Tauba Auerbach's *Pour Series*, the magazine spreads of *POP* magazine, the algorithmic floral generations of David Reeves, and the controlled chromatic-aberration of Andrew Kim's later editorials. Visiting feels like turning the pages of a couture portfolio that occasionally hiccups in beautiful ways. ## Typography and Palette **Typography** is led by Frutiger LT Std (or its Google Fonts analog, Frutiger Variable via the closest available — for this design we specify **Roboto Flex** as the Google Fonts-available *frutiger-clean* alternative, since true Frutiger is licensed): Roboto Flex 300 at 18px / 1.6 for body, Roboto Flex 800 at 96pt for portfolio piece titles, and Roboto Flex 500 at 13px tracked +120 uppercase for section labels and tag-cloud entries. All typography is set in cream `#F0E8E4` on a deep purple ground. Secondary face Cormorant Garamond Italic at 22px is used only for piece-attribution prose ("a study of mauve and machine, 2026"). Numbers are tabular oldstyle. **Palette** is a **gradient** spanning the murasaki spectrum: - `#2A0B2E` — deep aubergine (page ground) - `#4D1454` — primary purple (gradient mid) - `#7A2B7E` — mauve violet (gradient highlight) - `#B45EC4` — orchid pink (RGB-displaced channel highlight) - `#3DE0FF` — cyan ghost (chromatic-aberration cyan channel) - `#FF3D6E` — magenta ghost (chromatic-aberration magenta channel) - `#F0E8E4` — cream-pearl (typography ground) - `#0A0512` — black-purple (deep card shadow) The cyan and magenta ghosts only appear during glitch bursts, riding ±2px to ±6px offsets of the underlying element. ## Layout Motifs and Structure The architecture is a **portfolio-grid** of 12 hero pieces arranged in a tall 3-column layout where every card maintains a strict 3:4 aspect ratio. Each card is large (max-width 420px) and the grid is generously gapped (40px vertical, 32px horizontal) so cards breathe in the dark. Cards stack vertically with a slight asymmetric offset every other row (+12px vertical drift) to break perfect column alignment — a Mary Katrantzou-style controlled irregularity. The page header is a 100vh hero with a single oversized portfolio name "murasaki.moe" set in Roboto Flex 800 with a continuous subtle RGB-displacement ambient (≤1px) so the letters hum without being chaotic. A floating bottom-right hash-tag cloud lists the studio's tags ("textile / botanical / generative / glitch / 2026") in cream uppercase, each tag a tiny clickable filter. ## Imagery and Motifs Imagery is built around **abstract-shapes** — each portfolio card hosts one large abstract composition that suggests a couture textile pattern: ribbon-folds, lace-meshes, bias-cut spiral folds, lattice-knots, marbled velvet samples. Compositions are rendered as SVG with controlled `` filters that selectively shift one channel by 2–4px on hover, producing the chromatic-aberration glitch only when the cursor approaches. **Floral-botanical** motifs are woven into the abstract shapes — a Hibiscus silhouette warps into a ribbon-fold, a Wisteria stem becomes a lattice braid. Decorative furniture includes a thin vertical "rule" running down the left margin of every third row, broken intermittently by a Cormorant Italic numeral, and a tiny single-pixel cyan/magenta tracer dot that follows the cursor by 80ms lag — a "ghost trail" that hints at the chromatic universe one click away. ## Prompts for Implementation Build an elegant portfolio-grid with controlled glitch. Each card has three stacked layers: (1) base abstract-shape SVG in `#F0E8E4`, (2) cyan-channel duplicate offset by `var(--glitch-x-cyan)` (default 0px), (3) magenta-channel duplicate offset by `var(--glitch-x-magenta)` (default 0px). Hover increases offsets to ±4px with a 1.4s `cubic-bezier(0.16, 1, 0.3, 1)` ease; the signature **bounce-enter** pattern animates each card's first appearance with a CSS keyframe `bounce-in` that scales from 0.92 → 1.04 → 1.0 over 700ms while simultaneously decaying a +6px chromatic offset to 0px — the card "lands" with a small chromatic ringing. The page header's "murasaki.moe" wordmark has an always-on ambient ≤1px RGB-displacement using `@property --glitch-amp` interpolating between 0 and 1.4 over 12-second random intervals, so the brand subtly trembles. The floating hash-tag cloud reacts to click with a 200ms scale 1.0 → 1.08 → 1.0 spring overshoot. Avoid CTA stacks, pricing menus, signup ladders, stat grids, social proof rows — this is an artist's portfolio, not a product page. The footer is a single line of Cormorant Italic: "murasaki.moe — studio of mauve and machine, atelier 14." ## Uniqueness Notes - **Differentiator 1:** Glitch reframed as couture — chromatic aberration is a controlled accent, not an aesthetic flood; almost no design in the registry uses `glitch` aesthetic with `elegant-sophisticated` tone. - **Differentiator 2:** Imagery is 100% SVG abstract shapes that fuse botanical motifs — sidesteps the 89% photography saturation noted by frequency. - **Differentiator 3:** Bounce-enter pattern combines a scale spring with a chromatic decay — a layered entry, not the typical single-axis overshoot. - **Differentiator 4:** Floral-botanical motifs are *woven* into abstract shapes rather than illustrated as standalone flowers — a textile-design approach. - **Differentiator 5:** Always-on ambient ≤1px RGB-displacement on the wordmark — a subliminal motion almost no registry design includes. - Planned seed: aesthetic=glitch, layout=portfolio-grid, typography=frutiger-clean, palette=gradient, patterns=bounce-enter, imagery=abstract-shapes, motifs=floral-botanical, tone=elegant-sophisticated. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.