# Design Language for mark.quest ## Aesthetics and Tone mark.quest is a kinetic-typographic exploration of what it means to make a mark -- to leave evidence of your presence, to sign, to brand, to scratch, to paint, to stamp. The site treats "mark" in its full spectrum of meanings: the calligrapher's brush stroke, the graffiti tag, the cattle brand, the printer's mark, the watermark, the trademark, the exclamation mark. The aesthetic is experimental-type-layout with a raw, hand-drawn energy: every section uses a different mark-making technique as its visual foundation, from precise engraving to wild spray paint. The tone is bold-confident and conversational -- the voice of someone who believes that the act of marking is fundamentally human, from cave paintings to digital signatures. The site addresses the visitor directly: "Everyone leaves a mark. What is yours?" Think "a type specimen book designed by Banksy and printed by Gutenberg." ## Layout Motifs and Structure **Primary layout: stacked-sections with split-screen interleaves and hero-dominant openings** Each section of the site is a full-viewport showcase of a different type of mark, creating a visual anthology. The sections alternate between full-bleed type compositions (where the mark fills the entire screen) and split-screen explanatory panels (where the left half shows the mark and the right half describes its history and significance). **Section architecture:** 1. **The First Mark (viewport 1):** A black screen. The user's cursor leaves a trail -- a thick white paint stroke (Canvas API) that follows mouse movement with slight smoothing and pressure simulation (thicker when moving slowly, thinner when fast). As the user draws, the text "mark" appears in the center, gradually revealed as the paint strokes cross over it (mix-blend-mode: difference). The mark they make IS the design. 2. **The Signature (viewport 2):** A split-screen section. Left side: an enormous calligraphic stroke (a single SVG Bezier path drawn with path-draw animation, thick brush-like stroke-width: 30, stroke-linecap: round). Right side: a narrative about the history of signatures, from wax seals to digital certificates. The calligraphic stroke continues to draw slowly throughout the time the section is in viewport. 3. **The Brand (viewport 3):** A full-bleed dark section where a branding iron mark (geometric, angular letterforms in burnt orange) appears to sizzle onto the screen -- CSS animation with glow effect (box-shadow: 0 0 20px #c45a20, 0 0 40px #c45a2080) that intensifies then fades, leaving the mark scorched into the surface. 4. **The Tag (viewport 4):** A concrete-gray background with overlapping spray-painted text in multiple colors and styles -- CSS text-stroke, text-shadow, and rotation create the appearance of layered graffiti tags. The section scrolls to reveal more tags, each one a different name or phrase, building up like a real graffiti wall. 5. **The Watermark (viewport 5):** A white section where text is barely visible -- set in very light gray (#f0f0f0 on #ffffff), requiring the user to look carefully. The content discusses hidden marks, embedded authentication, and the things that identify without being seen. On hover, the watermark text reveals itself (opacity transition to 0.4). 6. **The Question Mark (viewport 6):** A single massive question mark (?) rendered in outline only (CSS -webkit-text-stroke: 2px #1a1a1a, color: transparent) that rotates slowly (360deg over 60s). Inside the curve of the question mark, small text reads: "What mark will you leave?" The footer sits beneath this. 7. **Your Mark (footer):** A small canvas area where the visitor can draw a final mark using touch or mouse. The drawing persists in localStorage, so returning visitors see their previous mark. Below: "You were here." ## Typography and Palette **Typography:** - **Display / Section Heroes:** "Rubik Mono One" (Google Fonts) -- a heavy, monospaced display font with extreme weight and tight fitting. Used at clamp(4rem, 12vw, 12rem) for single-word hero text ("MARK", "SIGN", "BRAND", "TAG"). Its density and weight make each word feel like a physical stamp pressed into the page. Uppercase always. - **Body / Narrative:** "Karla" (Google Fonts) -- a grotesque sans-serif with a friendly, conversational character. Weight 400, line-height 1.75, 16px base. Its slightly quirky letterforms (especially the lowercase 'a' and 'g') add personality without being distracting. - **Handwritten / Tags:** "Rock Salt" (Google Fonts) -- a rough, textured handwriting font that looks like chalk or spray paint on a wall. Used exclusively in the graffiti tag section at various sizes (18-48px) and rotations. Its raw edges are essential to the street-art authenticity. **Palette:** | Role | Color | Hex | |------|-------|-----| | Surface (primary bg) | Off-black | #0a0a0c | | Mark white (primary text) | Chalk white | #f2f0ea | | Brand burn | Burnt orange | #c45a20 | | Tag blue | Spray blue | #3a6ad4 | | Tag magenta | Spray pink | #d43a8a | | Tag green | Spray green | #3ad47a | | Watermark pale | Ghost gray | #e8e8e8 | | Concrete | Wall gray | #888078 | This is a dark-neon palette at its core -- a near-black background with bright, saturated marks on top, like paint on asphalt. The spray colors (blue, magenta, green) are deliberately candy-bright against the dark surface. The burnt orange stands apart as the warmest accent, reserved for the branding iron section. The contrast between the dark base and vivid marks is the visual thesis: marks stand out against darkness. ## Imagery and Motifs **Core Visual Motifs:** 1. **Cursor Paint Trail:** A Canvas API paint system that captures mouse movement and renders it as a thick, smooth stroke with variable width. The trail uses composite operations (globalCompositeOperation: "screen" or "difference") to interact with underlying text. This is the primary interactive element and the first thing the visitor encounters. 2. **Calligraphic SVG Strokes:** Large, expressive SVG paths with thick, brush-like appearances achieved through stroke-width: 20-40, stroke-linecap: round, stroke-linejoin: round. These paths are animated with stroke-dashoffset for drawing effects. Each stroke has a unique Bezier curve profile. 3. **Branding Iron Glow:** A CSS glow effect using multiple box-shadow layers and CSS @keyframes that simulates a heated brand being applied: the glow intensifies (0 to 100% opacity), holds (500ms), then fades to leave a darkened mark. The mark itself is text rendered with a noise texture overlay. 4. **Spray Paint Layers:** Multiple overlapping text elements with CSS text-shadow, slight rotations (random -5deg to +5deg), and varying opacities (0.6 to 1.0). The layering creates the visual complexity of a real graffiti wall where tags overlap and compete for space. 5. **Watermark Reveal:** Text set at extremely low contrast (#f0f0f0 on #ffffff) that reveals itself on hover or touch. This is achieved purely with CSS: the text starts at near-invisible opacity and transitions to partially visible on parent :hover. The reveal mechanic is itself a mark-making metaphor. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport black canvas (#0a0a0c). There is no text, no logo, no instruction initially. After 2 seconds of no interaction, a faint hint appears: "draw" in 12px Karla at 0.15 opacity, bottom-center. The Canvas API paint system is active from page load -- the user's cursor (or touch) creates white paint strokes on the black surface. The word "mark" sits at center in Rubik Mono One at 10rem, color: #0a0a0c (invisible against the black background). As the user's white paint strokes cross over the word, mix-blend-mode: difference reveals it in white-on-white-stroke contrast. The mark the user makes IS the hero -- there is no predetermined design. **Section transitions:** Each section uses a hard cut -- no smooth scrolling, no parallax, no fade. When a new section enters the viewport, it appears immediately, like turning a page or pressing a stamp. This abruptness reinforces the mark-making theme: marks are sudden, decisive acts. **Brand burn animation:** The text "BRAND" in Rubik Mono One at 8rem, initially at color: #0a0a0c (invisible on black). A CSS @keyframes "brand-burn" fires on scroll entry: 0% { text-shadow: none; color: #0a0a0c; } 30% { text-shadow: 0 0 40px #c45a20, 0 0 80px #c45a2080; color: #c45a20; } 70% { text-shadow: 0 0 20px #c45a20; color: #c45a20; } 100% { text-shadow: none; color: #3a2a1a; }. Duration: 2s, ease-in-out. The word appears to burn into existence then cool to a scorched brown. **Graffiti wall:** Built as a CSS-positioned div (position: relative, min-height: 200vh, background: #888078). Child text elements are absolutely positioned at various coordinates with Rock Salt font, random sizes, random rotations, and random colors from the spray palette. New tags stagger-animate in as the section scrolls (each tag transitions from opacity 0 + scale(0.8) to opacity 1 + scale(1), with stagger delays). AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No branding agency portfolio patterns. The site is about the universal human act of marking, not a design studio's work showcase. Bias toward full-screen sections where each mark-making technique gets its own dedicated viewport and visual treatment. ## Uniqueness Notes **Differentiators from other designs:** 1. **User-generated hero via cursor painting:** mark.quest is the only site in the portfolio where the hero section has no predetermined design. The user literally creates the visual by drawing on it. The mix-blend-mode reveal of hidden text through paint strokes is a technically novel interaction. 2. **Seven distinct mark-making techniques in one site:** Each section uses a completely different visual technique (cursor painting, calligraphic SVG, branding glow, spray-paint layering, watermark reveal, outline rotation, localStorage drawing). No other design in the portfolio cycles through this many distinct visual treatments. 3. **Hard-cut section transitions:** In a portfolio where smooth scroll transitions are near-universal, mark.quest uses abrupt, decisive cuts between sections. This is a deliberate aesthetic choice -- marks are instantaneous -- and it stands out as a rejection of the smooth-scroll convention. 4. **Dark-neon palette with spray-paint brightness:** The combination of a near-black base (#0a0a0c) with candy-bright spray colors (#3a6ad4, #d43a8a, #3ad47a) creates a street-art color world unlike any other design. The dark-neon palette (12% frequency) is used here for a completely different purpose than the typical tech/crypto context. 5. **localStorage persistence for visitor marks:** The footer drawing area that remembers each visitor's mark across sessions creates a sense of permanence and return. No other site in the portfolio uses localStorage as a narrative device. **Chosen seed/style:** kinetic typography hero **Avoided overused patterns:** corporate aesthetic, gradient palette, counter-animate as primary animation, centered-only layout, serif typography dominance **Preferred underused elements:** dark-neon palette, display-bold typography (0%), experimental-type-layout, cursor-follow interaction, graffiti/street-style aesthetic (0%)