# Design Language for maid.quest ## Aesthetics and Tone maid.quest is a **holographic scholarly dashboard rendered in terracotta and iridescent light** -- imagine if Vatican Library scholars had access to holographic projection: ancient Latin tomes are presented as 3D-rendered holograms hovering over warm terracotta desks, organized in a dashboard of academic specimens. The aesthetic merges holographic-iridescent surfaces (rainbow chromatic foils, prismatic refractions) with a warm terracotta palette and revival-serif typography. The mood is *scholarly-intellectual* -- thoughtful, deliberate, monastically focused, but with rainbow-light reflections sliding across every surface. The brand "maid.quest" reads as a "scholarly quest" -- a research vessel of the mind. The site is a dashboard of holographic research artifacts: open codices, prismatic data charts, levitating 3D-rendered models of objects under study. Each "research" section is a dashboard panel. The whole composition feels like the desktop of a future-medieval scholar. Inspirational anchors: the iridescent holographic foil printing on premium credit cards, Renaissance-era studiolo (small private study) interior paintings, the early-2020s "holographic chrome" design trend, vintage scholarly publication design (Cambridge University Press), and the visual language of Disney's "Atlantis: The Lost Empire" mission control room. ## Layout Motifs and Structure A **dashboard** composition with multiple discrete panels visible simultaneously -- a central study desk surrounded by floating informational panels, like a desktop research environment. Panels can be different sizes (3-col, 2-col, 1-col) and arranged in a 6-column grid. **Structural anatomy:** - **Top "frontispiece" bar (full-width, 88px):** A warm terracotta banner with iridescent foil shimmer running across its top edge. Contains the "maid.quest" wordmark in a serif revival face, an iridescent compass-rose icon, and a small clock-glyph (showing the current hour with a holographic dial). - **Central study desk panel (4 columns wide, ~60vh tall):** The hero panel. A warm terracotta surface with a 3D-rendered hologram of an open codex floating above it. The hologram has subtle prismatic refraction at its edges -- chromatic aberration in pinks and cyans. Counter-animate numbers tick the codex's "page count" in the corner. - **Sidebar panels (2 columns wide, stacked):** 3-4 smaller dashboard panels showing: a sentiment timeline (counter-animate), a glossary index (alphabetical with counters), a research note (italic serif text), and a holographic specimen (3D rendered geometric object). - **Footer dashboard row (full-width, 200px):** A horizontal row of 6 small holographic specimen cards -- each containing a 3D-rendered geometric shape (cube, dodecahedron, sphere, torus, cylinder, helix) labeled with serif scholarly titles. - **Iridescent edge-glow:** Every panel has an iridescent edge-glow border -- a rainbow gradient (pink -> cyan -> green -> gold) animating its hue-rotation slowly. Spatial rhythm: dashboard-organized. Multiple panels visible at once, but each panel respects generous internal padding for readability. ## Typography and Palette **Fonts (all Google Fonts):** - **Display (serif-revival):** "Fraunces" 400/500/700 -- a revival serif with optical sizing and beautifully detailed strokes. Used for the wordmark at clamp(40px, 6vw, 88px), and for panel titles at 24-30px. The italic variant is used heavily. - **Body / research text:** "Fraunces" 400/400i at 16-17px, line-height 1.62. The serif is the entire voice of the site -- no sans except for tiny labels. - **Tiny dashboard labels:** "Fraunces" 500 small-caps at 11-12px, letter-spacing 0.18em -- "RESEARCH NOTES", "SPECIMEN ALPHA", etc. - **Counter numerals:** "Fraunces" 600 with lining figures, tabular numbers, for the counter-animate tickers. **Palette (terracotta-warm):** - `#E8C5A0` -- Warm Terracotta (primary background, the "desk surface") - `#C58F65` -- Burnt Sienna (panel borders, secondary surfaces) - `#7A3A1F` -- Deep Brick (typography, deep accent) - `#FAEEDB` -- Cream Vellum (panel inner fills, lighter surfaces) - `#3D2519` -- Walnut Ink (deepest type, hover states) - `#FFD9C2` -- Soft Coral (highlights, holographic-bloom) - *Iridescent overlay gradient:* `#FF9DD9` -> `#9DCBFF` -> `#9DFFCE` -> `#FFCE9D` -- a 4-stop holographic gradient applied as overlay on edges and surfaces. Holographic strategy: panels have a `background-image: linear-gradient(...)` with the iridescent gradient at 12-18% opacity on top of the terracotta base, plus a `mix-blend-mode: overlay` SVG noise layer for the holographic foil grain. ## Imagery and Motifs **Core visual motifs:** - **3D-rendered specimens (the centerpiece imagery):** Each specimen is a 3D-rendered geometric form -- codices, scrolls, polyhedra, geometric architectures -- rendered with iridescent holographic surfaces. Subtle CSS 3D transforms rotate them on hover. Each casts a soft Cream Vellum drop-shadow. - **Geometric shapes motif:** Cubes, dodecahedra, spheres, tetrahedra, toruses -- the "research specimens" -- rendered in iridescent surfaces. Each shape is a 3D SVG with chromatic-aberration edges. - **Holographic foil texture:** A subtle iridescent foil overlay on every panel edge (a 6-color hue-rotation animation, 24s cycle), giving the site its signature "credit-card-hologram" shimmer. - **Compass-rose iconography:** Small SVG compass roses serve as scholarly markers on panels, in Deep Brick with iridescent inner gradient. - **Chromatic aberration:** Panel borders have subtle 1px chromatic aberration -- red shifted +1px, cyan shifted -1px -- giving them a "holographic edge" feel. **Decorative patterns:** - A faint paper-texture (SVG turbulence at 6% opacity) over the terracotta -- simulating real warm paper. - Holographic-foil grain noise (1px noise scale, 8% opacity) over panel edges. ## Prompts for Implementation **Open with a hologram booting.** First 2200ms: viewport begins all Warm Terracotta. A "study desk" panel materializes from the bottom (translateY 80px -> 0, ease-out, 800ms). When it lands, a 3D codex hologram appears above it via a "scan up" effect -- a horizontal iridescent line travels from the desk surface upward (scaleY 0 -> 1 over 1200ms), revealing the codex hologram line-by-line. As the scan completes, the codex begins its idle hover animation (gentle up-down translateY ±4px on a 4s loop). **Counter-animate pattern (featured):** This is the primary motion vocabulary. - Numeric counters on every panel tick up to their final values on viewport enter (page count, sentiment index, specimen count, etc.), using requestAnimationFrame with an ease-out curve over 1200ms. - Each counter has a small "tick" indicator (a tiny vertical bar that flicks left-right) when the value changes during the animation. - After reaching the final value, counters occasionally re-tick (every 30-60s, randomly) by ±1 to simulate "live data" -- a subtle ambient feel. - Specimen rotation indicators tick degrees: "12.4°", "37.1°", etc., as the 3D specimens slowly rotate. **Holographic foil shimmer:** Every panel's edge has a hue-rotation animation: ```css @keyframes foil-shimmer { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(60deg); } } animation: foil-shimmer 24s ease-in-out infinite; ``` Combined with a slowly-translating linear-gradient `background-position`, this produces the iridescent foil shimmer effect. **3D specimen interaction:** Each 3D specimen has CSS 3D transforms tied to cursor position when hovered. The specimen rotates ±15deg on X and Y axes based on cursor offset from specimen center. The chromatic aberration intensifies (red shifts +3px, cyan shifts -3px) during the hover. **Panel scroll-triggered illumination:** As each panel enters the viewport, its iridescent edge-glow brightens (alpha 0.5 -> 0.9) over 600ms, then settles to 0.7 once active. This creates a "lighting up" effect as panels come into reader focus. **Storytelling beats (scholarly-intellectual, no CTAs, no pricing):** 1. Hologram booting intro. 2. Study desk panel: codex hologram + research note (italic Fraunces). 3. Sidebar panels: sentiment timeline, glossary index, research notes. 4. Footer specimen row: 6 holographic geometric specimens, each labeled with scholarly serif text. 5. Closing rubric: a small italic Fraunces signature ("Sealed in Crimson, MMXXVI") with a hand-drawn compass-rose ornament. **Anti-patterns to avoid:** No CTAs, no pricing, no testimonials, no signup. The site is a scholarly dashboard, not a SaaS landing. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Holographic aesthetic (5%) with terracotta-warm palette (2%):** Most holographic designs lean cool/chrome; pairing iridescent foil with warm terracotta produces a "warm hologram" aesthetic unique to this site. 2. **Dashboard layout (9%) with scholarly serif typography (5% serif-revival):** Most dashboards use sans-serif for legibility; using Fraunces serif throughout transforms the dashboard into a scholarly publication. 3. **Counter-animate pattern (3%) as the primary motion vocabulary:** Most counter-animate uses are limited to one or two stats; here every panel has live tickers, creating a dashboard sense of constant scholarly observation. 4. **3D-render imagery (3%) as iridescent specimens:** The 3D-rendered geometric forms with chromatic-aberration edges are uncommon -- most 3D-render designs lean photorealistic; these are deliberately abstract scholarly specimens. 5. **Geometric-shapes motif (2%) as iridescent research specimens:** Most geometric-shape motifs in the collection are flat; presenting them as 3D iridescent specimens is unique. **Chosen seed/style:** aesthetic=holographic, layout=dashboard, typography=serif-revival, palette=terracotta-warm, patterns=counter-animate, imagery=3d-render, motifs=geometric-shapes, tone=scholarly-intellectual. **Avoided overused patterns:** Refused parallax-as-primary (95%), avoided the default centered/card-grid (95%/91%), declined mono typography (81%), and rejected mysterious-moody tone (71%) in favor of scholarly-intellectual brightness.