# Design Language for mores.quest ## Aesthetics and Tone mores.quest inhabits the paradox of dopamine maximalism filtered through zen stillness -- a visual world where bold, stimulating design elements are arranged with the deliberate restraint of a Japanese rock garden. The inspiration is the interior of a velvet-lined meditation chamber inside a 1920s Art Deco cinema: ornamental gilded geometric frames surrounding pools of absolute silence, deep burgundy walls absorbing sound while gold leaf catches the faintest light. The dopamine hit is not delivered through chaos or sensory overload, but through the precision of contrast -- the sudden appearance of a gleaming gold icon against an expanse of oxblood darkness, or the slow rotation of a card revealing its hidden face. The zen-contemplative tone means the site breathes. There are long pauses between elements, generous margins that function as meditative intervals, and animations that move at the tempo of a deep exhalation. The domain "mores" (Latin: customs, moral traditions, the deeply held values of a society) is treated as a philosophical quest -- a slow, deliberate journey inward through layers of symbolic imagery. The aesthetic draws from three specific reference points: (1) the gilded geometric ceiling panels of the Tuschinski Theatre in Amsterdam, with their layered chevrons and radiating sunburst motifs; (2) the contemplative emptiness of Tadao Ando's Church of the Light, where a single cross-shaped aperture fills a concrete void with meaning; (3) the dopamine-rewarding tactile feedback of luxury playing cards -- the satisfying weight, the crisp snap of a card flip, the reveal of hidden artwork beneath a patterned back. ## Layout Motifs and Structure The layout is hero-dominant: each viewport-height section functions as a self-contained tableau, a single dramatic composition that commands full attention before the visitor moves to the next. There is no visible navigation bar, no sidebar, no grid of cards competing for attention. Instead, the site unfolds as a vertical sequence of full-screen chambers, each one a sealed environment with its own focal point. **Primary Structure: The Chamber Sequence** The viewport is divided into a sequence of "chambers" -- full-height sections that fill the screen completely. Each chamber has a single dominant element positioned according to Art Deco compositional rules: strict bilateral symmetry along the vertical axis, with content radiating outward from a central focal point like the spokes of a sunburst. - **Chamber 1 (The Portal):** A full-bleed burgundy field containing only a single large icon at dead center -- a stylized compass rose rendered in gold hairlines. Below it, the word "MORES" in Art Deco display type. No other content. The icon floats with a subtle, slow vertical oscillation (2px amplitude, 6-second cycle) that suggests breathing. - **Chamber 2 (The Question):** A centered philosophical proposition rendered in large display type, flanked by two floating card elements positioned equidistant from center. The cards are face-down, showing an Art Deco geometric back-pattern. On hover or tap, they flip to reveal icon-driven concepts (e.g., a scales-of-justice icon on one, a lantern icon on the other). The flip animation is smooth, dimensional, and satisfying -- a 0.8s ease-in-out transform with perspective depth. - **Chamber 3 (The Garden):** A field of floating icon elements -- 12 to 16 custom-styled icons representing moral and cultural concepts (a flame, an eye, a key, a bridge, a mirror, a compass, a quill, a gate, a lantern, a spiral, a hand, a crown). These icons float in a loose, organic arrangement with individual drift animations (each on a slightly different sine-wave path, 8-14 second cycles), creating a constellation-like field that moves slowly, hypnotically. Tapping any icon triggers a card-flip reveal showing a short philosophical fragment. - **Chamber 4 (The Reflection):** A single large card centered in the viewport, already face-up, displaying a culminating statement. The card has a thick gold Art Deco border with stepped geometric corners. Around it, the deep burgundy background is interrupted by faint, symmetrical gold line-work -- radiating chevrons that extend to the viewport edges like the beams of a quiet explosion. **Transitions Between Chambers:** Scroll-snapping locks each chamber into full-viewport position. Transitions between chambers use a slow cross-fade (0.6s) rather than a scroll. The visitor does not scroll through content -- they advance through sealed rooms, each one a complete experience. ## Typography and Palette **Typography:** - **Display / Headlines:** "Poiret One" (Google Fonts) -- a geometric Art Deco display typeface with perfectly circular bowls, uniform thin strokes, and an aristocratic elegance that channels the 1920s without pastiche. Used at sizes from `clamp(2.5rem, 7vw, 6rem)` for primary statements. Set in uppercase with `letter-spacing: 0.12em`, `line-height: 1.1`. The thin strokes at large sizes create a delicate tension against the heavy burgundy backgrounds -- the type feels etched into the darkness rather than painted on it. - **Secondary Display / Card Headers:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with vintage Scandinavian roots and Art Deco proportions. Used at 1.2rem-2rem for card titles and secondary headings. Its x-height is low, its ascenders are tall, giving it a vertical elegance that complements Poiret One's circular geometry. Set with `letter-spacing: 0.06em`, `font-weight: 300`. - **Body / Philosophical Fragments:** "Cormorant Garamond" (Google Fonts) -- a high-contrast display serif with hairline-thin serifs and dramatic thick-thin stroke variation. Used at 1rem-1.25rem for the short textual passages that appear on card faces and as chamber subtexts. Its calligraphic quality and sharp contrast give even small text a sense of gravitas and historical depth. Set in regular weight (400), with `line-height: 1.7`, `letter-spacing: 0.01em`. Color: #d4a574 (aged gold) for maximum readability against dark grounds. **Palette:** The palette is a deep burgundy ground with gold and rose accents -- the color world of a velvet jewelry box illuminated by candlelight. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Primary Background | Deep Oxblood | `#2a0a14` | Near-black burgundy, the color of aged wine in shadow. Fills all chamber backgrounds. | | Secondary Background | Dark Burgundy | `#4a1228` | A slightly lifted burgundy for card backs and elevated surfaces. | | Tertiary Background | Burgundy Mist | `#6b1d3a` | Used sparingly for hover states and subtle gradients at chamber edges. | | Primary Accent | Aged Gold | `#d4a574` | The dominant accent -- all display type, icon strokes, and decorative line-work. Warm, oxidized, not shiny. | | Secondary Accent | Bright Gold | `#e8c878` | Reserved for active states, hover glows, and the card-flip reveal moment. Brighter and more saturated than the primary gold. | | Tertiary Accent | Rose Dust | `#c97b8a` | A muted pink-rose used for body text highlights, subtle gradients, and the faintest blush on card borders. | | Text Primary | Cream | `#f0e6d8` | Warm off-white for body text on dark backgrounds. Never pure white. | | Shadow/Depth | Void Black | `#120208` | The deepest shadow tone, used for card drop-shadows and the outermost edges of radial gradients. | **Gradient Usage:** - Chamber backgrounds use a subtle radial gradient from `#2a0a14` (center) to `#120208` (edges), creating a vignette effect that draws the eye to the center focal point. - Card borders use a linear gradient from `#d4a574` to `#e8c878` to `#d4a574`, creating a shimmer effect on the stepped Art Deco border lines. ## Imagery and Motifs **Icon-Heavy Visual Language:** mores.quest uses no photographs, no illustrations, no gradient blobs. The entire visual vocabulary is constructed from icons -- sharp, geometric, single-weight line icons rendered in the aged gold (`#d4a574`) against the burgundy ground. Each icon is designed in an Art Deco style: geometric construction, bilateral symmetry, radiating lines, stepped forms, and chevron accents. The icon set includes: - **Compass Rose:** Eight-pointed star with radiating hairlines -- the primary logo mark and Chamber 1 focal point. - **Scales of Justice:** Symmetrical balance icon with Art Deco stepped base. - **Lantern:** Geometric hexagonal lantern with radiating light lines -- represents illumination and inquiry. - **Key:** An ornate skeleton key with chevron-patterned bow -- represents unlocking knowledge. - **Mirror:** Oval frame with Art Deco geometric border and internal reflection lines. - **Bridge:** Arched bridge with repeating geometric struts -- represents connection between ideas. - **Spiral:** Golden ratio spiral constructed from quarter-circle arcs -- represents growth and evolution. - **Eye:** Geometric eye with concentric circle iris and radiating lash lines -- represents perception. - **Gate:** Double gate with sunburst pattern above the lintel -- represents threshold and transition. - **Flame:** Symmetrical flame with chevron-stacked layers -- represents passion and transformation. - **Quill:** A stylized feather pen with geometric barbs -- represents expression and record. - **Crown:** Stepped Art Deco crown with five points and a jewel center -- represents authority and tradition. - **Hand:** An open palm with geometric palm lines and radiating finger extensions -- represents agency and choice. All icons are rendered as inline SVGs with `stroke: #d4a574`, `stroke-width: 1.5`, `fill: none`. On hover, the stroke transitions to `#e8c878` over 0.4s. Icons range from 48px to 120px depending on their role. **Floating Elements Motif:** Icons and decorative geometric fragments (small chevrons, dots, thin line segments) float across the viewport on slow, individual drift paths. Each floating element has: - A unique sine-wave vertical oscillation (amplitude: 3-8px, period: 8-16 seconds) - A slow horizontal drift (0.5-2px per second) - A gentle rotation (0.5-2 degrees per second) - Opacity modulation (fading between 0.3 and 0.8 on a 10-20 second cycle) These floating elements create a field of quiet, hypnotic motion -- like watching dust motes in a beam of light. They never overlap the primary content; they exist in the margins and empty spaces of each chamber, filling the negative space with life without competing for attention. **Art Deco Decorative Patterns:** - **Card backs** feature a repeating geometric pattern: interlocking chevrons forming a diamond lattice, rendered in `#6b1d3a` on `#4a1228` with a 1px `#d4a574` border. - **Chamber dividers** (visible only during scroll transitions) are horizontal lines that expand from center outward, flanked by small chevron ornaments -- a stylized Art Deco horizontal rule. - **Corner ornaments** on cards use stepped geometric brackets: three nested right-angle brackets decreasing in size, positioned at each corner of the card face. ## Prompts for Implementation **Full-Screen Narrative Opening:** The site opens to a viewport filled entirely with `#120208` (void black). Over 1.5 seconds, the background warms to `#2a0a14` through a radial gradient that blooms from the center, as if a dim burgundy light is being slowly raised in a dark theater. At the 1.5-second mark, a single gold hairline begins drawing itself from the center of the viewport outward -- the first arm of the compass rose icon. Over 3 seconds, the full compass rose draws itself into existence, arm by arm, using SVG path animation (`stroke-dashoffset` technique). The icon completes at the 4.5-second mark. Then, letter by letter, the word "MORES" materializes below the compass in Poiret One, each letter fading in with a 0.15-second stagger delay. Below that, ".quest" appears in Josefin Sans at a smaller size, letter-spacing animating from 1em to 0.06em over 0.8 seconds, as if the letters are settling into their final positions. Total opening sequence: approximately 6 seconds. This is not skippable. The visitor is meant to sit with the experience. **Card-Flip Interaction Pattern:** Cards are the primary interactive element. Each card is a CSS 3D-transformed element with two faces: - **Front (back of card):** The Art Deco diamond-lattice pattern in `#6b1d3a`/`#4a1228` with gold border and corner ornaments. A subtle shimmer animation plays across the surface -- a diagonal gradient highlight that sweeps slowly from bottom-left to top-right every 8 seconds, using a semi-transparent white gradient overlay (`rgba(212,165,116,0.08)`). - **Back (face of card):** The revealed content -- a large icon at top, a title in Josefin Sans, and a philosophical fragment in Cormorant Garamond. Background is `#2a0a14` with a faint radial glow of `#4a1228` behind the icon. - **Flip trigger:** Hover on desktop, tap on mobile. The flip uses `transform: rotateY(180deg)` with `transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1)` and `perspective: 1200px` on the parent container. During the flip, a faint gold particle burst emanates from the card center -- 6-8 tiny gold dots that expand outward and fade over 0.6 seconds. **Floating Element Animation System:** Implement floating elements using CSS `@keyframes` with individual animation definitions for each element. Avoid JavaScript-driven animation for the base float behavior. Each floating element receives: ``` animation: float-N Xs ease-in-out infinite, drift-N Ys linear infinite, fade-N Zs ease-in-out infinite; ``` Where N is a unique index, X is 8-16, Y is 20-40, Z is 10-20. The `float` keyframe handles vertical oscillation, `drift` handles horizontal movement, and `fade` handles opacity modulation. Use `will-change: transform, opacity` for GPU acceleration. Position floating elements with `position: absolute` within each chamber's container, using percentage-based coordinates to maintain responsive placement. **Scroll-Snap Chamber System:** The outer container uses `scroll-snap-type: y mandatory` with each chamber section using `scroll-snap-align: start` and `min-height: 100vh`. Between chambers, implement a crossfade effect using `position: sticky` elements that stack and fade based on scroll position. Each chamber's content has an entry animation that triggers when the chamber snaps into view: the focal element scales from 0.9 to 1.0 and fades from 0 to 1 over 0.8 seconds. **Storytelling Bias -- Full-Screen Narrative:** Every section tells a story. Chamber 1 is the arrival (silence, then the symbol appears). Chamber 2 is the question (the cards present a binary choice, a philosophical fork). Chamber 3 is the exploration (the floating icon garden invites wandering, touching, discovering). Chamber 4 is the resolution (a single statement, held in gold, surrounded by radiating structure). This is not a website with sections -- it is a narrative with acts. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, hamburger menus, cookie banners, newsletter signup forms. This site has no commercial intent. It is a contemplative experience. ## Uniqueness Notes **Differentiators from other designs:** 1. **Dopamine-Through-Restraint Paradox:** While dopamine aesthetics typically manifest as neon explosions and sensory overload (the 6% of designs that use dopamine lean toward bright, chaotic energy), mores.quest inverts this by delivering dopamine hits through precision and rarity -- the satisfying snap of a single card flip, the slow materialization of a gold icon from void. The reward center is activated by anticipation and reveal, not by bombardment. No other design in the portfolio combines dopamine aesthetics with zen-contemplative tone. 2. **Deep Burgundy as Sole Ground Color:** The deep-burgundy palette (0% usage in the portfolio) creates a visual environment that exists nowhere else in the collection. While other designs use navy, charcoal, cream, or white as their ground, mores.quest lives entirely in oxblood and wine tones. This creates an immediate visual distinction -- the site is recognizable from a single-pixel color sample. The burgundy-gold combination specifically references the Art Deco cinema palette of the 1920s Tuschinski Theatre, not the generic "luxury" burgundy-gold of corporate branding. 3. **Icon-Only Visual System with Card-Flip Reveals:** No photographs, no illustrations, no gradient blobs, no generative art -- only geometric Art Deco line icons. At 1% frequency in the portfolio, icon-heavy imagery is nearly unique. Combined with the card-flip interaction pattern (5%), the site creates a tactile, game-like discovery mechanic where every icon is a sealed mystery until activated. The floating-elements motif (1%) adds a living, breathing quality to these icons that transforms static SVGs into a contemplative constellation. 4. **Zero-Navigation Chamber Architecture:** The hero-dominant layout (4%) is pushed to its extreme -- there is no navigation at all. No menu, no links, no breadcrumbs. The visitor advances through sealed chambers using only scroll. This radical elimination of chrome creates an immersive quality closer to a museum installation than a website. Each chamber is a self-contained world, and the scroll-snap system ensures the visitor can never be "between" chambers -- they are always fully inside one experience. 5. **SVG Path-Drawing Opening Ceremony:** The 6-second opening sequence where the compass rose draws itself into existence using stroke-dashoffset animation is a deliberate inversion of web convention (where content should appear instantly). This is not a loading screen -- it is a ritual, a threshold crossing. The visitor watches the symbol construct itself and understands that this is a space that operates on a different temporal register than the commercial web. **Chosen Seed/Style:** aesthetic: dopamine, layout: hero-dominant, typography: art-deco-display, palette: deep-burgundy, patterns: card-flip, imagery: icon-heavy, motifs: floating-elements, tone: zen-contemplative **Avoided Patterns from Frequency Analysis:** - playful aesthetic (95%) -- replaced with dopamine (6%) - centered layout (99%) -- replaced with hero-dominant (4%) - mono typography (99%) -- replaced with art-deco-display (3%) - warm palette (100%) -- replaced with deep-burgundy (0%) - scroll-triggered patterns (97%) -- replaced with card-flip (5%) - minimal imagery (94%) -- replaced with icon-heavy (1%) - vintage motifs (83%) -- replaced with floating-elements (1%) - friendly tone (98%) -- replaced with zen-contemplative (3%)