# Design Language for a6c.quest ## Aesthetics and Tone a6c.quest is a hexadecimal incantation -- the domain itself reads like a memory address, a color fragment (#a6c), a truncated hash. The site treats this ambiguity as its central visual thesis: it is simultaneously a place, a code, and a question. The aesthetic is **generative-holographic** -- not the cheap foil-shimmer of novelty stickers, but the deep prismatic interference patterns of diffraction gratings, soap film optics, and thin-film physics. Every surface shifts color depending on viewing angle (simulated through cursor position and scroll offset). The mood is **optimistic-bright** crossed with **calm-serene** -- a rare pairing that evokes the feeling of watching a sunrise through a prism. There is wonder here, but it is quiet wonder: the kind found in staring at an oil slick on wet asphalt, or tilting a hologram card slowly under a desk lamp. The site feels like a laboratory of light -- clinical in its precision, magical in its output. Inspiration sources: Olafur Eliasson's light installations, the iridescent wings of Morpho butterflies, spectrographic analysis charts, the rainbow edges of total internal reflection, and the hauntingly beautiful "color organ" instruments of the early 20th century. ## Layout Motifs and Structure The layout uses a **bento-box** architecture -- a strict rectangular grid where each cell contains an autonomous generative composition. Unlike the standard bento trend (which packs UI cards into neat rows), this bento grid treats each cell as a petri dish: a self-contained experiment in color and motion. The grid is 12-column on desktop, collapsing to a 2-column stagger on mobile, with cells of varying heights (1x1, 1x2, 2x2, 3x1) arranged in a Mondrian-like asymmetric balance. **Primary structure:** - **Prismatic Header (0-15vh)**: A thin, full-width band at the top containing the domain "a6c.quest" rendered as a hex color swatch that continuously cycles through all colors whose hex code contains "a6c" -- #a6c000 through #a6cfff -- creating a slow, meditative color drift. No navigation menu. The domain IS the navigation: clicking the "a" reveals section alpha, "6" reveals section six, "c" reveals section code. The dot is a reset button. "quest" triggers a search overlay. - **Bento Laboratory (15vh-85vh)**: The main content area. A CSS Grid of 8-12 cells, each containing a unique generative sketch or content piece. Cells have 2px gaps filled with prismatic gradient borders that shift with cursor proximity. Each cell has a thin label in the bottom-left corner (like a museum placard) describing what's inside. - **Spectral Footer (85vh-100vh)**: A single horizontal band displaying the full visible light spectrum (380nm to 700nm) as a smooth CSS gradient. The footer doubles as a color picker -- hovering any point reveals the wavelength, frequency, hex value, and a poetic name for that color. **Navigation paradigm:** The site is non-scrolling by default. It is a single viewport composition that rearranges itself. Clicking a bento cell expands it to fill the viewport (morphing the grid with CSS `grid-template` transitions), pushing other cells to the periphery as small thumbnails. Clicking any thumbnail swaps it into the expanded position. This creates a **zoom-focus** interaction model where content is always present but attention is directed. ## Typography and Palette **Typography:** - **Display / Titles**: "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a monospaced skeleton. Its geometric precision suits the hexadecimal theme, while its subtle quirks (the asymmetric 'a', the splayed 'M') prevent it from feeling robotic. Used at clamp(1.8rem, 5vw, 4.5rem) in weight 700. Letter-spacing: -0.02em for tight, confident headlines that read like code identifiers. - **Body / Labels**: "IBM Plex Sans" (Google Fonts) -- designed by Mike Abbink for IBM, this typeface bridges the gap between humanist warmth and technical precision. Its x-height is generous, making small text (0.75rem labels) legible even against shifting holographic backgrounds. Weight 400 for body, 500 for emphasis. Line-height: 1.6. - **Monospace Accents**: "IBM Plex Mono" (Google Fonts) -- used exclusively for hex codes, coordinates, and data readouts displayed inside bento cells. Weight 400, letter-spacing 0.05em. Rendered with `font-variant-numeric: tabular-nums` so digits align vertically in columns. **Palette:** The palette is built from the domain itself. #A6C expanded to a full hex becomes the seed for a generative color system: | Role | Color | Name | |------|-------|------| | Base Dark | #0d0d12 | Void Glass | | Base Mid | #1a1a2e | Deep Prism | | Surface | #2a2a3d | Spectral Slate | | Primary | #aa66cc | Hex Orchid (#a6c) | | Secondary | #66ccaa | Inverse Jade (#6ca) | | Tertiary | #ccaa66 | Rotated Amber (#ca6) | | Accent Bright | #e0b0ff | Mauve Phosphor | | Highlight | #f0f0ff | Spectral White | The primary, secondary, and tertiary colors are derived by rotating the three characters of "a6c" -- the domain literally generates its own palette. This triadic relationship (purple, teal, gold) provides maximum chromatic coverage while maintaining mathematical harmony. All three are at the same perceptual lightness (~55 CIELAB L*), creating a vibration effect when placed adjacent. **Gradient system:** Rather than linear gradients, the site uses **conic gradients** centered on the cursor position, cycling through the three triadic colors. This creates the holographic interference effect -- colors appear to rotate around the pointer like a lens flare. ## Imagery and Motifs **Core visual motif: The Hex Prism.** A triangular prism (rendered as an SVG with animated gradient fills) appears throughout the site as an icon, a section divider, and a loading indicator. White light enters one face; the triadic palette (#aa66cc, #66ccaa, #ccaa66) exits the other face as three diverging beams. This references Newton's famous prism experiment and visually explains the site's color derivation. **Specific motifs:** - **Diffraction Patterns**: CSS-generated interference patterns using overlapping `repeating-conic-gradient` layers with slightly offset centers. These create moiré-like rainbow bands that shift as the viewport resizes or the cursor moves. Used as backgrounds for bento cells and the expanded content view. - **Spectral Dispersion Lines**: Thin horizontal lines (1px) in each of the triadic colors, offset vertically by 2px, running across section boundaries. They evoke the separated wavelengths exiting a diffraction grating -- red, green, and blue lines that were once unified white light. - **Hex Code Rain**: In the background of expanded content views, a slow downward drift of random hex color codes (e.g., #A6C3F0, #3FA6C1) rendered in 10% opacity IBM Plex Mono. Each code is rendered in the color it represents, creating a self-referential data-rain effect that is decorative rather than distracting. - **Color Swatch Chips**: Small, rounded rectangles (24x16px) appear inline with text wherever a color is mentioned. The chip displays the actual color, and on hover, it expands to show the hex value, RGB components, and wavelength equivalent. These are pure CSS elements using `data-color` attributes. - **Morpho Wing Texture**: A subtle iridescent noise texture (CSS `filter: url()` with SVG turbulence) applied to large surfaces at 3-5% opacity. It shifts between blue and green depending on the `mix-blend-mode` stacking context, mimicking the structural coloration of butterfly wings -- where color comes from nanostructure, not pigment. ## Prompts for Implementation **Narrative structure:** The site tells the story of a single hex code becoming an entire world. It begins with three characters -- a, 6, c -- and through permutation, rotation, and expansion, derives an entire visual language. The experience is one of **unfolding** -- watching simplicity generate complexity, like a fractal zoom or a cellular automaton evolving from a single seed. 1. **Opening moment**: The viewport loads as #0d0d12 (Void Glass). After 300ms, a single character "a" appears at center in #aa66cc, then "6" fades in beside it in #66ccaa, then "c" in #ccaa66. The three characters sit together for 800ms, then the triangular prism SVG materializes around them (400ms path-draw animation). White light (a horizontal line from the left) enters the prism, and three beams exit right, each beam drawing a line to a corner of the viewport. Where the beams terminate, the bento grid cells begin to materialize (staggered by 100ms each, using `opacity` and `scale` transitions from 0.95 to 1.0). Total intro: ~3 seconds. 2. **Bento cell interactions**: Each cell has a distinct generative content. One displays the conic gradient hologram responding to cursor position. Another runs a tiny cellular automaton in the triadic palette. A third shows the spectral dispersion lines animating. A fourth contains body text about the domain's concept. Hovering a cell causes its 2px border to bloom into a 4px prismatic gradient (transition: 200ms). Clicking a cell triggers the **morph** transition: the cell expands via `grid-template` animation while others compress, maintaining the overall grid dimensions. The expanded cell reveals deeper content -- long-form text, interactive demos, or generative art at full resolution. 3. **The Spectral Footer**: Implemented as a single `div` with a CSS `linear-gradient` matching the visible spectrum. JavaScript maps cursor X-position to wavelength (380-700nm) and displays a tooltip with: wavelength, frequency (THz), hex approximation, and a synesthetic name (e.g., "the hum of a viola" for 440nm equivalent). This footer is both decorative and educational -- it grounds the site's prismatic theme in real physics. 4. **Color theme persistence**: The site tracks which bento cell the user last expanded and uses its dominant color as the accent for the next visit (stored in `localStorage`). The holographic cursor effect tints toward the user's "preferred" color over repeated visits, creating a personalization that feels discovered rather than configured. 5. **No scroll, no pages**: The entire experience lives in one viewport. The bento grid IS the site map. There are no routes, no page transitions, no scroll events. This is a radical constraint -- a website as a single composition, like a painting. Content density is managed through the expand/compress cell mechanic, not through vertical space. **Technical notes:** - CSS `@property` for animating conic-gradient angles and color stops - `mix-blend-mode: screen` on overlapping gradient layers for additive color mixing (like real light) - `backdrop-filter: blur()` on expanded cells to soften the compressed thumbnails behind - No JavaScript frameworks -- vanilla JS with `requestAnimationFrame` for generative animations - Grid transitions via `transition: grid-template 600ms cubic-bezier(0.4, 0, 0.2, 1)` **AVOID:** CTA buttons, pricing tables, stat counters, testimonial carousels, hamburger menus, hero images, parallax scrolling, scroll-triggered animations (the site does not scroll). ## Uniqueness Notes **Differentiators from other designs:** 1. **Domain-derived generative palette**: No other design in this collection derives its entire color system from the domain name itself. The triadic rotation of "a6c" into #aa66cc / #66ccaa / #ccaa66 is a mathematical operation on the domain string, making the palette inseparable from the identity. This is not theming -- it is the domain expressing itself chromatically. 2. **Zero-scroll single-viewport architecture**: While other designs in this collection rely heavily on scroll-triggered animations (90% frequency) and immersive scroll narratives (45%), a6c.quest presents everything in a single, non-scrolling viewport. The bento-box grid with morph-expand mechanics replaces scrolling entirely. This is the only design that rejects the scroll paradigm. 3. **Conic gradient holographic system**: Where other designs use linear or radial gradients (95% frequency for gradient palette), a6c.quest uses conic gradients anchored to cursor position to simulate holographic iridescence. The colors rotate spatially around the pointer, creating a light-interference effect that no linear gradient can achieve. Combined with `mix-blend-mode: screen` for additive color mixing, this produces physically-inspired light behavior rather than decorative color bands. 4. **Physics-grounded spectral footer**: The footer that maps cursor position to actual electromagnetic wavelengths, frequencies, and synesthetic descriptions is unique in the collection. It bridges decoration and education, turning a footer into an interactive physics demonstration. 5. **Character-as-navigation**: Using the individual characters of the domain ("a", "6", "c", ".", "quest") as navigation targets is structurally unique. The domain is not just a label -- it is the interface itself, each glyph a portal to different content. **Chosen seed/style:** generative art background (from seeds.json) -- selected because it is underused (5% frequency for generative aesthetic) and aligns with the domain's alphanumeric, code-like character. The generative approach turns the domain's abstract nature into a strength: the site generates its own visual identity from its own name. **Avoided patterns from frequency analysis:** - Avoided corporate aesthetic (75% overused) -- chose generative-holographic instead - Avoided photography imagery (85% overused) -- all visuals are CSS-generated or SVG - Avoided card-grid layout (85% overused) -- chose bento-box (5% frequency) with morph transitions - Avoided centered layout (80% overused) -- bento grid is asymmetric by nature - Avoided gradient palette in the linear sense (95% overused) -- uses conic gradients for holographic effect - Avoided warm palette (90% overused) -- triadic palette spans cool purple, teal, and warm gold equally - Avoided scroll-triggered patterns (90% overused) -- the site does not scroll at all - Avoided mono typography (75% overused) -- primary fonts are Space Grotesk and IBM Plex Sans (geometric-sans territory, 5% frequency) - Avoided mysterious-moody tone (40% overused) -- chose optimistic-bright + calm-serene (~5% each)