# Design Language for a6c.quest ## Aesthetics and Tone a6c.quest is a corporate identity that refuses to take itself seriously — a company portal that has been gently overtaken by a mischievous in-house illustrator who hand-draws aurora borealis over every quarterly report. The visual concept is "the world's friendliest annual report": clean modular blocks of information presented with the structured authority of a Fortune 500 company, but every surface is softened by hand-drawn illustrations, wobbly SVG path animations, and an undulating aurora that shimmers behind the corporate grid like the Northern Lights visible through an office window at 2 AM during crunch season. The tone is playful-professional — imagine a company whose brand guidelines were written by someone who genuinely loves their job and sneaks doodles into the margins of every deck. Nothing is ironic or satirical. The playfulness is earnest: hand-drawn connector lines between content blocks, aurora gradients that ripple when you hover over them, and typography that feels warm and approachable rather than cold and geometric. The overall mood is optimistic dawn — the moment when the sky shifts from indigo to rose-gold and the aurora is still faintly visible, and you feel like good things are about to happen. ## Layout Motifs and Structure The layout follows a **modular-blocks** paradigm: the page is divided into discrete rectangular content modules of varying sizes arranged on an implicit 6-column grid. Unlike a rigid dashboard, these blocks have generous 24px gaps between them, rounded 12px corners, and subtle hand-drawn border effects (achieved via SVG path filters that make straight edges appear slightly wobbly, as if drawn with a fine-tip marker). **Structure:** - **Hero module:** A single full-width block spanning all 6 columns, occupying 100vh. Contains the domain identity and a full-bleed aurora animation that fills the background. The aurora is built from layered SVG paths with gradient fills that undulate via CSS keyframe animation — ribbons of soft teal, muted rose, and pale violet drifting horizontally across the viewport. Over this, the site title is rendered in a warm humanist typeface with hand-drawn underline decoration that animates via SVG path-draw on load. - **Story blocks (3 rows):** Below the hero, content is arranged in modular blocks of 2-column, 3-column, and 4-column widths, mixed asymmetrically across rows. Each block is a self-contained narrative vignette — a short passage of text paired with a hand-drawn illustration. Blocks do not scroll independently; they enter the viewport as cohesive units via gentle fade-and-rise (no parallax, no stagger — each block appears when its top edge crosses 80% viewport height, with a simple 400ms ease-out translateY from 30px). - **Connector paths:** Between blocks, thin hand-drawn SVG lines (stroke-width: 1.5px, stroke: #9b8ec4) trace winding paths that visually connect related content modules. These connector paths animate via path-draw-svg: as the user scrolls, the stroke-dashoffset decreases, and the line appears to be drawn in real-time, linking one block to the next like a quest map. - **Footer module:** A single full-width block at the bottom, styled as a "quest complete" terminal card with a hand-drawn checkmark that path-draws on scroll entry. No content bleeds across block boundaries. Each module has a semi-transparent background (#f4f1ec at 92% opacity) that lets the faint aurora texture bleed through from the page-level background, creating depth without layering complexity. ## Typography and Palette **Typography:** - **Display / Headings:** "Nunito Sans" (Google Fonts) — a humanist sans-serif with rounded terminals and warm, friendly proportions. Used at 40px-64px for section headings, weight 700, letter-spacing: -0.01em. The rounded strokes echo the hand-drawn illustration style without being childish — Nunito Sans reads as approachable and competent, like a team lead who brings homemade cookies to standup. - **Body / Running Text:** "Source Sans 3" (Google Fonts) — a humanist sans-serif designed for readability at small sizes. Used at 17px/1.75 for body text, weight 400, color #3d3a4a. The generous line-height and warm letter-forms make extended reading comfortable. Links within body text use color #6b5fa0 with a hand-drawn underline SVG that path-draws on hover. - **Accent / Labels:** "Caveat" (Google Fonts) — a handwriting typeface used sparingly for annotations, margin notes, and decorative labels on the connector paths. Used at 14px-18px, weight 400, color #9b8ec4. Caveat provides the "illustrator's notes" quality — it looks like someone scribbled a friendly annotation in the margin of a polished document. **Palette:** The palette is muted and dawn-inspired, avoiding high saturation in favor of soft, chalky tones that evoke early-morning light: | Role | Color | Hex | |------|-------|-----| | Page background | Warm parchment | #f4f1ec | | Block background | Frosted cream | #faf8f4 | | Primary text | Deep dusk violet | #3d3a4a | | Heading accent | Muted lavender | #9b8ec4 | | Aurora teal | Soft northern teal | #7ec4b8 | | Aurora rose | Dusty dawn rose | #d4a0a0 | | Aurora violet | Pale borealis | #b8a0d4 | | Connector/border | Pencil graphite | #c0bcc8 | | Hover/active | Warm amber | #d4b07a | | Footer background | Deep twilight | #2e2b3a | The aurora gradient is a three-stop linear gradient cycling between #7ec4b8, #b8a0d4, and #d4a0a0, animated at a slow 12-second loop. All surface colors are deliberately low-contrast and chalky — this is a site that feels like it was printed on heavy matte paper, not backlit on a screen. ## Imagery and Motifs **Hand-Drawn Illustrations:** Every content block features a hand-drawn SVG illustration rendered in a single-weight stroke style (stroke-width: 2px, stroke: #3d3a4a, fill: none). The illustration subjects are whimsical quest/journey metaphors: a winding mountain path, a compass with a wobbly needle, a hand-drawn map with "X marks the spot," a telescope pointed at an aurora sky, a campfire with curling smoke lines, a messenger bird carrying a scroll. Each illustration is built from SVG `` elements so they can be animated with path-draw-svg on scroll — the strokes appear to be sketched in real-time as the user reaches each block. **Aurora Lights Motifs:** The aurora is the site's signature atmospheric element. It manifests in three ways: 1. **Background aurora:** Full-viewport layered SVG paths with gradient fills (#7ec4b8 to #b8a0d4 to #d4a0a0 at 15% opacity) that undulate via CSS animation (transform: translateX oscillating by 5% over 12 seconds with different phases for each ribbon). This creates a slow, mesmerizing shimmer visible through the semi-transparent block backgrounds. 2. **Block-edge aurora:** On hover, each content block gains a faint aurora glow along its bottom edge — a 4px gradient border-image transitioning through the three aurora colors over 3 seconds. 3. **Path connector aurora:** The connector SVG paths between blocks use a gradient stroke that shifts through the aurora palette, making the hand-drawn quest-map lines shimmer with borealis color. **Quest-Map Metaphor:** The overall visual metaphor is a quest map or treasure map that has been rendered in the corporate-friendly language of a modern design system. Connector paths between blocks are the "quest route." Hand-drawn illustrations are the "landmarks." The aurora is the "magical sky" under which the quest takes place. This metaphor is never stated explicitly in copy — it is communicated entirely through visual language. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be experienced as a single vertical scroll through a hand-illustrated quest map. The hero is an immersive 100vh aurora landscape — SVG ribbon paths fill the background, slowly undulating, while the site title fades in over 1.5 seconds and a hand-drawn underline path-draws beneath it over 800ms. There is no navigation bar, no hamburger menu. The only way forward is to scroll. **Path-Draw SVG Animations (Primary Pattern):** Every hand-drawn illustration and connector path uses the SVG path-draw technique: elements begin with `stroke-dasharray` equal to the path length and `stroke-dashoffset` equal to the path length (invisible). As the element enters the viewport (detected via IntersectionObserver at threshold 0.3), the `stroke-dashoffset` transitions to 0 over 1200ms with an `ease-in-out` timing function. This creates the illusion of a pen drawing each illustration in real-time. Connector paths between blocks use scroll-linked dashoffset reduction (calculated from scroll position) so the line appears to extend continuously as the user scrolls downward. **Scroll-Linked Aurora Intensity:** As the user scrolls from top to bottom, the background aurora's opacity subtly increases from 10% to 25%, and the undulation speed increases by 20%. This creates a sense of "the quest intensifying" — the deeper you go, the more vivid the aurora becomes. At the footer ("quest complete"), the aurora reaches peak visibility before fading to the deep twilight background color. **Block Entry Animation:** Each content block enters with a simple, non-staggered animation: opacity 0 to 1, translateY 30px to 0, over 400ms with ease-out. Blocks animate individually as they cross the viewport threshold — there is no coordinated stagger or cascade. This avoids the overused stagger pattern while still providing scroll-triggered life. **Hand-Drawn Border Effect:** Content block borders use an SVG filter (feTurbulence + feDisplacementMap) applied to a `` element that traces the block boundary. The turbulence creates a subtle wobble that makes perfectly rectangular blocks appear slightly hand-drawn — as if someone traced their edges with a ruler that slipped slightly. The filter values: feTurbulence baseFrequency="0.02" numOctaves="3", feDisplacementMap scale="2". **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, parallax scrolling, staggered grid entrances, neon accents, monospaced typography, dark-mode color schemes, glassmorphism blur effects. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Modular-blocks layout (0% frequency):** No other design in this collection uses the modular-blocks layout paradigm. While 93% use asymmetric layouts and 81% use centered layouts, a6c.quest uses a structured modular grid of self-contained rectangular blocks with consistent gaps and rounded corners — closer to a Bento box than a freeform canvas, but with hand-drawn softening that prevents it from feeling rigid or dashboard-like. 2. **Hand-drawn imagery as primary visual language (6% frequency):** Only one other design uses hand-drawn imagery. a6c.quest makes single-stroke SVG illustrations the dominant visual element — every block features a quest-themed illustration that path-draws on scroll. This is fundamentally different from the 81% of designs using minimal imagery or the 50% using photography. 3. **Aurora-lights motifs as atmospheric layer (6% frequency):** The aurora borealis is used not as a decorative accent but as a page-level atmospheric system — layered SVG ribbons that shimmer behind semi-transparent content blocks, increase in intensity with scroll depth, and bleed into connector paths and block hover states. This three-tier aurora system (background, block-edge, connector) is architecturally unique. 4. **Corporate-playful tonal fusion:** The design deliberately pairs corporate structural authority (clean modular grid, professional humanist typography, formal content hierarchy) with handmade warmth (Caveat handwriting annotations, wobbly SVG borders, doodled illustrations). This tonal duality — the annual report infiltrated by an illustrator — is not attempted by any other design in the collection. 5. **Quest-map narrative without explicit theming:** The journey/quest metaphor is communicated entirely through visual structure (connector paths as routes, illustrations as landmarks, aurora as enchanted sky) without any copy, labels, or UI elements that name it. The user feels the quest without being told about it. **Planned Seed:** aesthetic: corporate, layout: modular-blocks, typography: humanist, palette: muted, patterns: path-draw-svg, imagery: hand-drawn, motifs: aurora-lights, tone: playful **Avoided overused patterns:** parallax (93%), stagger (93%), asymmetric layout (93%), mono typography (93%), tech motifs (93%), minimal imagery (81%). Deliberately chose underused alternatives: modular-blocks (0%), path-draw-svg (12%), hand-drawn imagery (6%), aurora-lights motifs (6%), humanist typography (25%).