# Design Language for annual.quest ## Aesthetics and Tone annual.quest transforms the concept of yearly cycles into a neon-lit Swiss typographic playground. Imagine the obsessive precision of Josef Muller-Brockmann's grid systems colliding with the electric energy of a Tokyo arcade at midnight -- every measurement exact, every accent screaming in fluorescent color. The domain suggests annual goals, yearly quests, cyclical challenges. The visual language treats the year as a 12-chapter epic, with Swiss typography providing the structural backbone and neon-electric accents marking critical milestones like checkpoint beacons. The tone is friendly and encouraging -- a personal training partner with impeccable taste in typefaces. Negative space is sacred here: generous ma (間) between elements creates breathing room that makes the neon accents hit harder. Organic blob shapes float through the whitespace like calendar pages caught in a gentle wind, softening the strict Swiss grid with playful biological forms. ## Layout Motifs and Structure The layout employs a **ma-negative-space** philosophy where emptiness is the primary design material. Content clusters are islands floating in vast white oceans, with deliberate asymmetric spacing that follows Swiss grid principles but allows organic breathing room. **Primary structure:** - **Opening viewport (100vh):** An enormous typographic statement -- the word "ANNUAL" in sans-grotesk at viewport-spanning scale (clamp(80px, 18vw, 200px)), with each letter on its own vertical rhythm line. Below it, ".quest" in a contrasting weight (light, 200) at 30% of the headline size. Between the two words, a single thin horizontal rule (1px, Neon Chartreuse) stretches across 80% of the viewport. Organic blob shapes (CSS border-radius with percentage values creating amorphous forms) drift slowly in the background in Electric Violet at 8% opacity. - **The 12 Chapters:** Content is organized into 12 sections (one per month/chapter), each introduced by an oversized numeral (01-12) in Neon Chartreuse, positioned at the left margin. Content for each chapter sits in a narrow column (max-width: 560px) offset to the right, creating dramatic negative space on the left where the numerals live. Each chapter section is separated by at least 200px of empty vertical space. - **The Quest Board (interactive section):** A card-flip gallery where 6 quest cards are arranged in a 3x2 grid. Each card is a perfect square with a white front showing a geometric icon and a neon-backed reverse showing quest details. Cards flip on hover/tap with a 3D rotate transform. - **The Cycle Visualization:** A single large SVG circle (diameter: min(80vw, 80vh)) centered on screen, divided into 12 arc segments representing months. Each arc segment has a different opacity of Neon Chartreuse based on "completion" state. The circle rotates slowly (120s per full rotation). Month labels in sans-grotesk sit at each arc's midpoint. - **Zero Point (footer):** A minimal footer with just the "annual.quest" wordmark and a "Year Zero" counter in Neon Chartreuse, centered in a vast white void (padding: 200px 0). ## Typography and Palette **Fonts:** - **Headlines:** "Space Grotesk" (Google Fonts) -- a proportional sans-grotesk with distinctive geometric character shapes and a tech-forward personality. Weight 700 for primary headings, 500 for subheadings. Size: clamp(36px, 6vw, 200px) for the hero, scaling down for sections. Letter-spacing: -0.03em at large sizes, 0em at body sizes. The slightly quirky letterforms (look at the 'a' and 'g') add personality within the Swiss framework. - **Body text:** "Work Sans" (Google Fonts) -- a humanist sans-serif optimized for screen readability with a warm, friendly character. Weight 400, line-height: 1.8, size: clamp(15px, 1.1vw, 17px). Its rounded terminals echo the organic blob motifs. - **Numerals/Data:** "Azeret Mono" (Google Fonts) -- a geometric monospace with excellent numeral design for the month numbers and data displays. Weight 500, size varies by context (from 14px annotations to 120px chapter numerals). Rendered in Neon Chartreuse. **Palette:** - **Swiss White:** #FAFAFA -- primary background, the sacred empty space - **Carbon Black:** #0A0A0A -- primary text, sharp contrast - **Neon Chartreuse:** #CCFF00 -- primary accent, electric highlights, numerals - **Electric Violet:** #7C4DFF -- secondary accent, interactive states, blob tints - **Cool Grey:** #9E9E9E -- secondary text, subtle annotations - **Fog White:** #F0F0F0 -- card backgrounds, subtle surface differentiation - **Signal Red:** #FF1744 -- minimal use, deadline/urgency indicators only ## Imagery and Motifs **Core visual motifs:** - **Organic blobs:** CSS shapes with complex border-radius values (e.g., `border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%`) floating as background decorations. 3-5 blobs per viewport section, colored in Electric Violet or Neon Chartreuse at very low opacity (5-10%). They drift slowly with CSS keyframe animations (translateX/Y oscillation over 20-30s cycles). Each blob is unique -- generated with different border-radius combinations. - **Swiss grid lines:** Thin (#E0E0E0, 1px) vertical and horizontal construction lines that appear behind content sections, making the underlying grid visible. These fade in as the section enters the viewport and fade out as it exits. The grid is not decorative -- it shows the actual alignment system. - **Card-flip interaction:** The quest cards use CSS `transform-style: preserve-3d` with front/back faces. The flip animation uses a spring-eased rotateY(180deg) with a slight scale pulse (0.95 to 1.0) mid-flip. The back face has a Neon Chartreuse background with Carbon Black text. - **Circle progress arcs:** SVG arc segments for the cycle visualization, using stroke-dasharray to control visible arc length. Each arc animates its stroke-dasharray from 0 to its target value on scroll-enter, creating a drawing effect. - **Oversized numeral chapter markers:** Each monthly section features its two-digit number (01-12) in Azeret Mono at enormous scale (clamp(80px, 15vw, 160px)), positioned at the left margin with a Neon Chartreuse fill at 15% opacity. These numerals are the structural anchor for each section. ## Prompts for Implementation **Full-screen narrative opening:** On load, the Swiss White background is immediate (no fade). The "ANNUAL" headline characters enter one at a time from below (translateY: 40px to 0) with stagger timing (80ms delay between letters), using a card-flip-like rotation on each character (rotateX: -90deg to 0). The horizontal rule draws from center outward (width: 0% to 80%, 600ms). The ".quest" fades in last (opacity 0 to 1, 400ms). Background blobs begin drifting after all type is settled. **Negative space as rhythm:** Implement generous spacing with CSS custom properties: `--section-gap: clamp(120px, 15vh, 240px)`. Between the 12 chapters, use margin-bottom with this value. The numerals are positioned with `position: sticky; top: 20vh` so they remain visible while their section's content scrolls past, creating a parallax-like effect without actual parallax transforms. **Card-flip quest board:** Each card needs a container with `perspective: 1000px`, an inner element with `transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)`, and two children (front/back) with `backface-visibility: hidden`. The back face gets `transform: rotateY(180deg)`. On hover, the inner element gets `transform: rotateY(180deg)`. **Cycle SVG visualization:** Create 12 arc paths using SVG `` elements with calculated d attributes for each 30-degree segment. Use `stroke-dasharray: [arc-length] [total-circumference]` and `stroke-dashoffset` animated from full offset to 0 via CSS transition triggered by Intersection Observer. **Neon glow effect for accents:** Apply `text-shadow: 0 0 10px rgba(204, 255, 0, 0.5), 0 0 20px rgba(204, 255, 0, 0.3), 0 0 40px rgba(204, 255, 0, 0.1)` to Neon Chartreuse elements for the electric glow. Use `filter: drop-shadow()` for SVG elements with the same glow treatment. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids. No dark backgrounds (keep it white-dominant). No photography. No card-grid rectangles as primary layout. ## Uniqueness Notes **Differentiators from other designs:** 1. **Ma-negative-space as primary design material:** While other designs use whitespace, this design makes emptiness the dominant visual element -- content is deliberately sparse with 200px+ gaps between sections. The Swiss grid lines visible behind content explicitly reveal this spatial system. 2. **Card-flip interaction as core content mechanic:** The quest board uses literal CSS 3D card flips as the primary interaction pattern -- not a subtle hover effect but a full 180-degree rotation revealing hidden content. This underused pattern (3% frequency) becomes a signature element. 3. **Cyclic SVG visualization as navigation landmark:** The large animated circle divided into 12 month-arcs serves as both data visualization and spatial anchor. No other design uses a circular time-based visualization as a structural element. 4. **Neon-on-white Swiss typography:** The combination of strict Swiss typographic grids with electric neon accents on a white background creates a unique contrast -- most neon designs in the collection pair with dark backgrounds. The bright-on-bright tension is visually distinctive. **Planned seed:** swiss, ma-negative-space, sans-grotesk, neon-electric, card-flip, marble-texture, organic-blobs, friendly **Avoided overused patterns:** centered layout dominance, card-grid, parallax scrolling, cursor-follow, mono typography, photography, dark gradient backgrounds, mysterious-moody tone