# Design Language for daitoua.quest ## Aesthetics and Tone daitoua.quest inhabits the visual world of a classified intelligence briefing room circa 2006 -- the kind of space where glossy Aero-era interfaces glow on wall-mounted LCD panels while candle stubs burn on the mahogany conference table below, wax pooling over declassified maps. The aesthetic is **frutiger-aero** recontextualized through the lens of geopolitical mystery: the glossy gradients, translucent panels, and luminous orbs of early-2000s digital optimism are deployed not to sell software but to illuminate the hidden architectures of historical power. Every surface carries the Frutiger-Aero hallmarks -- soft reflections, subtle glass refractions, rounded luminous shapes -- but the content behind those surfaces is dark, ambiguous, and layered with historical weight. The tone is **mysterious-moody**: not horror-mysterious but intelligence-mysterious, the quiet dread of information that changes the shape of everything you thought you knew. Think of the feeling when you open a dossier and the redacted sections tell you more than the visible text. The site should feel like navigating a beautiful, glowing interface that was never meant for public access -- every scroll reveals another layer of curated obscurity, another data point whose implications are left for the viewer to trace. The luminous optimism of the Aero aesthetic becomes ironic, almost eerie, when paired with this content register: the glossy panels are too clean, too perfect, as if someone polished the interface specifically to distract from what it contains. The atmosphere borrows from the liminal quality of late-night research sessions: the blue-white glow of screens in dark rooms, the warm amber of a single candle flame reflected in glass surfaces, the sensation of being alone with information that connects dots no one else has connected. This is not paranoia -- it is the aesthetic of structured curiosity, of systematic inquiry rendered as visual experience. ## Layout Motifs and Structure The layout follows a **stacked-sections** architecture -- each section occupies a full viewport height and is visually self-contained, creating the rhythm of turning pages in a classified briefing document. There are no columns splitting the viewport horizontally; instead, each section is a complete environment, a room you enter and leave. The vertical progression is strictly sequential: Section 1 gives way to Section 2 gives way to Section 3, with no visual bleed between them. This stacked approach creates the cadence of revelation: each section is a discrete disclosure, a new piece of the puzzle that recontextualizes everything above it. **Structural Rules:** 1. **Section Containment:** Each section fills 100vh minimum. Content is vertically centered within the section using flexbox, with generous padding (clamp(3rem, 8vh, 6rem) top and bottom). No section's content ever overflows into the next -- if content is long, the section expands beyond 100vh but maintains its visual isolation. 2. **Glass Panel Framing:** Within each stacked section, content is housed inside a single translucent glass panel -- a Frutiger-Aero signature element. These panels are 65-75% of the viewport width, centered horizontally, with a backdrop-filter: blur(20px) over the section's background. The panel edges have a 1px border of rgba(255,255,255,0.15) and a subtle box-shadow that creates the illusion of floating above the background. Panel corners are rounded at 16px -- the canonical Aero radius. 3. **Background Stratification:** Behind each glass panel, the section background shifts between two modes: (a) deep, dark gradient fields (#0d1117 to #161b22) with faint luminous orb shapes positioned off-center, simulating the glow of unseen light sources; and (b) slightly lighter fields (#1a2332 to #243447) with subtle noise texture at 2% opacity, suggesting the grain of photographic film or aged document surfaces. 4. **Section Transitions:** Between stacked sections, there is no gap, no margin. Instead, sections are separated by a single horizontal luminous line -- a 1px border of rgba(100, 200, 255, 0.08) that spans the full viewport width, barely visible, like the edge of a redacted page. 5. **Navigation Absence:** No persistent navigation bar, no hamburger menu, no breadcrumbs. The only navigation affordance is a small cluster of 5-7 tiny dots (8px diameter) fixed to the right edge of the viewport at vertical center, indicating section position. The active dot glows with a soft blue-white halo (#7eb8da at 40% opacity blur). Clicking a dot scrolls to that section. 6. **Content Asymmetry Within Panels:** Although the glass panels themselves are centered, the content inside them is not. Text blocks sit at 60% width within the panel, aligned to the left edge with a 10% left margin. The remaining 30% on the right is reserved for data-viz elements, candlelight motifs, or decorative negative space. This internal asymmetry prevents the centered panels from feeling static. ## Typography and Palette **Typography:** - **Display / Headlines:** "Alfa Slab One" (Google Fonts) -- a heavy slab-serif with commanding presence and industrial character. Its thick, uniform serifs and high stroke contrast project the weight of institutional authority, like headers stamped onto official documents. Used at 2.8rem-5rem for section titles. Weight: 400 (the only weight available, which is already bold). All lowercase with CSS text-transform -- the absence of capitals creates an unexpected intimacy from such a heavy typeface, as if the authority whispers rather than shouts. Letter-spacing: 0.03em. Line-height: 1.1. Color: #e8edf3 (Frost White) against dark backgrounds. - **Secondary Headlines / Subheads:** "Rokkitt" (Google Fonts) -- a geometric slab-serif with softer, more rounded character than Alfa Slab One. Weight: 300 (Light) at 1.4rem-2rem. Its lighter weight and wider spacing (letter-spacing: 0.05em) provide a counterpoint to the density of the display face. Used for section subtitles, data labels, and navigational text. Color: #7eb8da (Pale Cerulean) -- a cool luminous blue that reads as interface text, reinforcing the Aero aesthetic. - **Body Text:** "Source Serif 4" (Google Fonts) -- a transitional serif with exceptional screen legibility and a scholarly, documentary character. Weight: 350 (regular) at 1.05rem. Line-height: 1.75 for generous, readable spacing. The serif construction grounds the body text in the tradition of printed intelligence reports and academic papers, contrasting with the digital luminosity of the interface surrounding it. Color: #b8c4d0 (Silver Mist) for primary body text; #8899aa (Slate) for secondary/caption text. - **Data/Code Elements:** "IBM Plex Mono" (Google Fonts) -- used exclusively for data labels on visualizations, timestamps, coordinates, and any numeric content. Weight: 400 at 0.85rem. Letter-spacing: 0.08em. Color: #5fa8d3 (Intel Blue), deliberately cooler and more saturated than body text to create a sense of machine-generated precision. **Palette:** The palette operates on a **complementary** axis: deep blue-blacks paired against warm amber-golds, with the tension between cool digital light and warm candlelight driving the entire color story. | Role | Name | Hex | Usage | |------|------|-----|-------| | Primary Background | Void Navy | #0d1117 | Main section backgrounds, deepest layer | | Secondary Background | Charcoal Depth | #161b22 | Alternate section backgrounds, panel interiors | | Tertiary Background | Slate Dusk | #1a2332 | Glass panel fills (at 60% opacity over backdrop-blur) | | Primary Accent | Amber Flame | #d4943a | Candle glow, warm highlights, emphasis borders, interactive states | | Secondary Accent | Pale Cerulean | #7eb8da | Data labels, secondary headlines, dot navigation, chart lines | | Tertiary Accent | Intel Blue | #5fa8d3 | Monospace text, data-viz axis labels, link underlines on hover | | Body Text | Silver Mist | #b8c4d0 | Primary readable text | | Heading Text | Frost White | #e8edf3 | Display headlines, high-emphasis content | | Warm Glow | Deep Gold | #c47f17 | Candle-motif radial gradients, decorative orbs | | Danger/Redaction | Muted Crimson | #8b3a3a | Redacted-text overlays, warning states | | Luminous Orb | Soft Aero | #4a9ebe | Background glow orbs, Frutiger-Aero light blobs | The complementary relationship between Amber Flame (#d4943a) and Pale Cerulean (#7eb8da) creates the core visual tension: candlelight vs. screen-light, historical warmth vs. digital coolness. This opposition is never resolved -- both color temperatures coexist on every screen, maintaining a perpetual visual unease that aligns with the mysterious-moody tone. ## Imagery and Motifs **Data Visualization as Intelligence Cartography:** The primary imagery mode is **data-viz** -- but not the clean, corporate dashboards of SaaS analytics. These are intelligence visualizations: network graphs that map connections between unnamed entities, timeline charts where certain date ranges are conspicuously absent, geographic heat maps with no legend explaining what the colors represent. The data is always suggestive, never conclusive. Specific visualization types: 1. **Network Constellation Maps:** Force-directed graph layouts rendered in SVG, where nodes are small circles (6-10px radius) in Pale Cerulean (#7eb8da) connected by hair-thin lines (0.5px stroke, rgba(126,184,218,0.3)). Some nodes pulse with a slow glow animation (2.5s ease-in-out infinite). Node clusters imply organizational structures without labeling them. Hovering a node illuminates its direct connections while dimming the rest of the graph to 15% opacity, creating the sensation of following a thread through a web. 2. **Redacted Timeline Strips:** Horizontal timeline visualizations where events are marked by vertical amber tick marks (#d4943a, 2px wide, varying heights from 20px to 60px indicating significance). Between certain tick marks, rectangular blocks of Muted Crimson (#8b3a3a) at 40% opacity cover portions of the timeline -- redacted periods. The redacted blocks have a subtle CSS noise pattern overlay. Hovering a redacted block changes the cursor to `not-allowed` and displays a tooltip in IBM Plex Mono reading "CLASSIFIED" or "RESTRICTED ACCESS." 3. **Candlelit Radial Charts:** Polar area charts (rose diagrams) where each petal is filled with a radial gradient from Deep Gold (#c47f17) at the center to transparent at the edge, creating the illusion that each data wedge is lit from within by a candle flame. The chart background is transparent, allowing the dark section background to show through. Chart lines are drawn in Pale Cerulean at 50% opacity. No axes are labeled with conventional units -- instead, petals bear single kanji characters or abbreviated codes in IBM Plex Mono. 4. **Topographic Contour Fields:** SVG-based contour maps with concentric irregular closed curves, rendered as thin strokes (#4a9ebe at 25% opacity) layered over dark backgrounds. These are purely decorative -- they suggest terrain, electromagnetic fields, or data density distributions without specifying which. The contour lines slowly shift position over a 30-second CSS animation loop, creating the impression of a living, breathing data landscape. **Candle-Atmospheric Motifs:** Candles function as the primary decorative motif, bridging the gap between the Frutiger-Aero digital surfaces and the mysterious mood: - **Radial Glow Orbs:** At strategic positions within each section (typically one per section, offset to the right side), a radial gradient emanates from a small bright point: a circle of 4px radius filled with #f5d79e (pale candle yellow), surrounded by a radial gradient that expands to 200-400px diameter, fading from Deep Gold (#c47f17) at 20% opacity through Amber Flame (#d4943a) at 8% opacity to fully transparent. These orbs sit behind the glass panels, visible through the translucent blur, creating warm pools of light in the cold digital environment. - **Wax Drip Borders:** Certain glass panels feature irregular bottom borders created by an SVG `` that simulates the profile of melted wax dripping down a candlestick. The wax-edge silhouette is generated from a hand-drawn Bezier path with 8-12 control points creating organic dips and bulges. The clipped edge is tinted Amber Flame (#d4943a) at 15% opacity. - **Flame Flicker Animation:** The radial glow orbs incorporate a subtle CSS animation that randomly varies their opacity between 0.6 and 1.0 and their scale between 0.95 and 1.05 over a 3-second duration with irregular keyframe spacing, simulating the flicker of an actual candle flame. The animation uses `cubic-bezier(0.4, 0, 0.6, 1)` timing for organic feel. **Frutiger-Aero Signature Elements:** - **Glossy Pill Buttons:** Any interactive element (the rare link, the dot navigation) uses pill-shaped containers with a vertical gradient from rgba(255,255,255,0.12) at top to rgba(255,255,255,0.02) at bottom, creating the classic Aero glass-button effect. A 1px inner border at rgba(255,255,255,0.2) along the top edge simulates a light reflection. - **Luminous Background Orbs:** In addition to candle orbs, each section background includes 1-2 large (300-600px diameter) diffuse circular gradients in Soft Aero (#4a9ebe) at 5-8% opacity, positioned to suggest overhead ambient lighting -- the kind of soft environmental glow that defined the Frutiger-Aero era's visual language of optimistic technology. ## Prompts for Implementation **Full-Screen Narrative Scroll Experience:** The site opens to a full-viewport section of Void Navy (#0d1117). For 1.2 seconds, the screen is empty darkness. Then a single radial glow orb fades in at the center of the viewport -- a candle igniting. The orb expands from 0px to 300px diameter over 1.5 seconds while its opacity rises from 0 to 0.7. As the orb reaches full size, the domain name "daitoua.quest" fades in above it, set in Alfa Slab One at 4.5rem, all lowercase, Frost White (#e8edf3), letter-spacing 0.04em. Below the domain name, a single line in Rokkitt Light at 1.2rem reads a subtitle phrase in Pale Cerulean (#7eb8da). No navigation is visible. No other elements exist. The visitor is alone in a dark room with a candle and a name. **Slide-Reveal Section Transitions:** As the user scrolls from one stacked section to the next, the transition employs a **slide-reveal** animation: the departing section remains fixed while the arriving section slides upward over it, like pulling a sheet of paper off the top of a stack to reveal the document beneath. This is implemented with CSS `position: sticky` on each section and a `z-index` stacking order that increases with section order. Each arriving section has a thin shadow along its top edge (box-shadow: 0 -4px 30px rgba(0,0,0,0.5)) that creates a physical sense of layering. The slide animation triggers when the section enters the viewport and completes over 0.6 seconds with ease-out timing. Content within the arriving section fades from 0 to 1 opacity with a 0.3-second delay after the slide begins, ensuring the panel is partially visible before its content materializes. **Data Visualization Behavior:** All data-viz elements are initially rendered as wireframes -- strokes only, no fills, all in Pale Cerulean (#7eb8da) at 30% opacity. As the containing section scrolls into view (Intersection Observer at 0.4 threshold), the visualizations "activate": fills fade in, node pulses begin, timeline ticks grow from 0 to their target heights (staggered over 0.8 seconds with 50ms delay per tick), and contour lines begin their drift animation. This activation sequence reinforces the metaphor of intelligence data becoming accessible as the viewer progresses through the briefing. **Candlelight Atmosphere System:** Implement a global ambient system where candle-glow orbs across sections respond subtly to scroll position. As the user scrolls deeper into the site, the warm color temperature increases: early sections have fainter amber orbs and stronger cerulean data-viz elements (more digital, more Aero), while later sections shift the balance toward stronger amber glows and warmer text tones (more atmospheric, more candlelit), as if the power is slowly failing and only the candles remain. This gradient of atmosphere across the site's vertical length creates a narrative arc of descent: from clean digital briefing into candlelit archive. **Glass Panel Hover States:** When the cursor enters a glass panel, its backdrop-filter blur increases from 20px to 28px over 0.3 seconds, and its border opacity rises from 0.15 to 0.25, creating a subtle "focusing" effect as if the glass is polishing itself for closer inspection. On panels containing data-viz elements, hovering the panel also causes the visualization to shift from its default passive state to a slightly brighter, more saturated rendering (filter: brightness(1.15) saturate(1.2)), indicating that scrutiny yields clarity. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, hero images with stock photography, gradient mesh backgrounds without purpose, floating action buttons, cookie consent modals that obstruct the experience, any element that breaks the immersive briefing-room metaphor. **Typography Animation:** Section headlines (Alfa Slab One) do not simply fade in -- they reveal character by character from left to right with a 30ms stagger per character, as if being typed into a terminal or declassified one letter at a time. Each character starts at opacity 0 and translateY(8px), animating to full opacity and position over 0.2 seconds. The entire headline animation completes within 1.5-2 seconds depending on length. ## Uniqueness Notes **Differentiators from other designs:** 1. **Frutiger-Aero Intelligence Briefing Collision:** No other design in the portfolio uses the Frutiger-Aero aesthetic (3% frequency) as a container for mystery/intelligence content. The typical Frutiger-Aero deployment is optimistic tech or product showcase. Here, the glossy panels and luminous orbs are repurposed as the interface of a classified system -- the aesthetic's inherent optimism becomes unsettling when the content it presents is deliberately opaque and suggestive. This subversion of Aero conventions is unique to this design. 2. **Candlelight-Digital Dual Atmosphere:** The systematic opposition between digital cool light (Pale Cerulean, Soft Aero) and physical warm light (Amber Flame, Deep Gold) is not merely a color choice but a world-building decision. No other design in the portfolio implements a progressive atmospheric shift across the vertical length of the site, where the balance between two light sources changes with scroll position. The "failing power / rising candlelight" narrative arc is a structural uniqueness not found elsewhere. 3. **Data-Viz as Narrative Obstruction:** While data-viz imagery appears at only 2% frequency in existing designs, those instances use data visualization for informational clarity. This design inverts the convention: data-viz elements are deliberately incomplete, redacted, or unlabeled, using the visual language of analytics to create mystery rather than dispel it. Network graphs with unnamed nodes, timelines with censored intervals, and charts with kanji labels instead of units -- the data-viz serves the mysterious-moody tone rather than opposing it. 4. **Stacked-Sections as Dossier Pages (3% Frequency):** The stacked-sections layout at 3% frequency is the rarest layout choice available. Rather than treating sections as scroll-through content blocks, each section is conceptualized as a separate page of a physical dossier -- visually complete, self-contained, and connected to others only by the thin luminous divider lines. The slide-reveal transition reinforces this physicality. 5. **Slab-Serif Authority in a Dark Interface:** Slab-serif typography (6% frequency) is almost never paired with dark, atmospheric interfaces -- it typically appears in editorial or print-inspired contexts. Alfa Slab One's heavy industrial serifs against Void Navy backgrounds create a visual identity closer to military stencil markings or classified document headers than to magazine typography. **Documented Seed/Style:** `aesthetic: frutiger-aero, layout: stacked-sections, typography: slab-serif, palette: complementary, patterns: slide-reveal, imagery: data-viz, motifs: candle-atmospheric, tone: mysterious-moody` **Avoided Overused Patterns:** - playful aesthetic (97%) -- replaced with frutiger-aero (3%) - centered layout (98%) -- replaced with stacked-sections (3%) - mono typography as primary (98%) -- replaced with slab-serif (6%) - warm palette (100%) -- replaced with complementary (7%) - scroll-triggered as primary pattern (97%) -- replaced with slide-reveal (5%) - minimal imagery (96%) -- replaced with data-viz (2%) - vintage motifs (66%) -- replaced with candle-atmospheric (2%) - friendly tone (96%) -- replaced with mysterious-moody (6%)