# Design Language for adhoc.quest ## Aesthetics and Tone adhoc.quest is a site that looks like it was assembled in real-time from mismatched parts that somehow cohere into something beautiful -- like a jazz ensemble finding the groove, or a whiteboard sketch that turns out to be the final product. The aesthetic is anti-design crossed with generative art: a deliberate celebration of the improvised, the patched-together, the brilliantly makeshift. Think of the visual language of construction-site signage overlaid with mathematical beauty, Sol LeWitt's wall drawings meeting duct-tape engineering, the elegance that emerges from constraint and urgency. The tone is energetic and whimsical-creative -- not chaotic but exuberantly purposeful. Every element communicates "this was built because it was needed, right now, with whatever was at hand." The site rejects polish in favor of vitality. Where most sites aspire to look permanent, adhoc.quest celebrates the temporary, the provisional, the just-in-time. It wears its seams proudly. The mood is optimistic-bright: the confidence of a maker who trusts the process more than the plan. Inspiration sources: Muriel Cooper's Information Landscapes at MIT Media Lab, the Whole Earth Catalog's pragmatic-eclectic layout, Bruno Munari's "Design as Art" exercises, the typographic experiments of David Carson's Ray Gun magazine, construction barricade graphics, airport wayfinding in mid-renovation, the visual culture of hackathons and game jams. ## Layout Motifs and Structure The layout uses a **broken-grid** structure combined with a **bento-box** system -- a deliberately fractured grid where modules of different sizes snap into loose alignment without perfect registration. No two sections use the same column count. The viewport is divided into irregular rectangular zones that shift proportions at each scroll waypoint, as though the layout itself is being reconfigured on the fly. **Primary structure:** - **The Assembly Line (0-100vh):** The opening viewport presents a white canvas with nothing on it. After 400ms, rectangular content modules begin sliding in from all four edges simultaneously -- some carrying text, some carrying colored blocks, some carrying line drawings. They jostle and overlap briefly, then settle into a bento-box arrangement with visible 3px gaps between cells. Each module has a slightly different background: one might be kraft-paper tan, another blueprint blue, another lined-notebook white. The settling animation uses spring physics with overshoot, creating the impression of physical objects finding their resting positions. - **The Workbench (100-250vh):** A horizontal band that uses a timeline-vertical layout along its left edge, with content modules branching rightward at each timeline node. The timeline itself is a rough hand-drawn SVG line (not perfectly straight -- it wobbles slightly, as if sketched with a marker). At each node, a content module expands on hover/scroll-proximity with a morph animation, the rectangular container transforming from a small square into the full content block. This section describes the concept/service in fragments, as if reading sticky notes arranged on a project board. - **The Workshop (250-400vh):** An asymmetric split -- 38% left column, 62% right column -- where the left column contains a fixed-position vertical navigation strip (visible only in this section) with hand-drawn arrow indicators. The right column scrolls independently with content blocks that appear to be taped, pinned, or clipped to the surface. Each block enters with a slight rotation (random between -2deg and +2deg) and casts a subtle box-shadow as if physically resting on a surface. CSS `transform: rotate()` with randomized values assigned via CSS custom properties per element. - **The Dispatch (400-500vh):** The closing section where the bento-box modules from the opening reassemble but in a new configuration -- different arrangement, different proportions, same content modules. The visual message: the same parts can always be recombined. A single call-to-action-free closing statement occupies the center, surrounded by the rearranged modules at reduced opacity. **Grid details:** CSS Grid with `grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))` as the base, but individual sections override with explicit, irregular column definitions. Gap values alternate between `3px` and `12px` to create rhythm variation. No section uses `justify-items: center` -- everything is left-aligned or start-aligned, reinforcing the "assembled, not designed" quality. ## Typography and Palette **Typography:** - **Display / Headlines:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a technical, engineered quality that still retains warmth through its slightly squared curves. Used at sizes ranging from clamp(2rem, 5vw, 5rem) with weight 700. Letter-spacing set tight at `-0.02em` for headlines, creating density that contrasts with the open layout. Space Grotesk's monospaced sibling DNA gives it the pragmatic, builder-tool feeling essential to the ad hoc concept without actually being monospaced (avoiding the overused mono category at 75%). - **Body / Working text:** "Commissioner" (Google Fonts) -- a variable font with a low-contrast, humanist design that reads clearly at small sizes and carries a warm, approachable personality. Weight range 300-500. Line-height 1.65 for generous readability. Commissioner's variable axis allows subtle weight shifts on hover states, creating micro-interactions without layout shift. The humanist proportions (underused at 30%) bring organic warmth that counters the geometric display type. - **Accent / Labels and Tags:** "Caveat" (Google Fonts) -- a handwritten font that looks like quick annotations scrawled in the margin. Used sparingly for labels, captions, date stamps, and the timeline markers. Size capped at 1.2rem to prevent it from overwhelming -- it should feel like marginalia, not a headline. Color always set to the rust-orange accent (#c45d3e) to distinguish it as metadata/annotation rather than content. **Color Palette:** - **#f5f0e8** -- Kraft paper off-white. The primary background. Not clinical white but the warm tone of unbleached paper, cardboard, workshop surfaces. Used for all major background areas. - **#1a1a2e** -- Deep midnight ink. Primary text color. Dense enough for readability without the harshness of pure black. Used for all body text and primary headlines. - **#c45d3e** -- Burnt rust orange. The primary accent. The color of construction cones, terracotta, aged brick, iron oxide. Used for handwritten annotations, timeline nodes, interactive highlights, and hover states. - **#2d5f8a** -- Blueprint blue. Secondary accent. The color of architect's drawings, engineering paper, faded denim. Used for links, the timeline SVG line, and secondary interactive elements. - **#e8dcc8** -- Warm sand. A slightly darker variant of the background for alternating module backgrounds, creating subtle depth differentiation in the bento-box grid. - **#3a3a3a** -- Graphite. Used for secondary text, metadata, and de-emphasized content. The color of pencil marks on paper. **Palette strategy:** Warm but muted (not the overused gradient approach at 95%). The palette is analogous -- kraft/sand/rust exist on the same warm spectrum, with blueprint blue as the single cool counterpoint. No gradients are used anywhere. All colors are flat and opaque, reinforcing the physical, material quality of the design. ## Imagery and Motifs **Core visual motifs:** - **Tape Strips:** Translucent rectangular overlays positioned at the top edges of content modules, rendered as CSS pseudo-elements with `background: linear-gradient(90deg, transparent 2%, rgba(196, 93, 62, 0.15) 5%, rgba(196, 93, 62, 0.12) 95%, transparent 98%)` and a slight rotation. These give the impression that content blocks are physically taped to the surface. Each tape strip has a subtle grain texture applied via SVG filter. On hover, the tape strip lifts slightly (translateY(-2px)) as if the content could be peeled away. - **Hand-drawn Connectors:** SVG path elements connecting related content modules -- not straight lines but slightly wobbly paths that look like they were drawn with a felt-tip marker. These use the path-draw-svg animation pattern (25% frequency, acceptable) to animate on scroll, the lines appearing to be drawn in real-time as the user progresses. Stroke color is blueprint blue (#2d5f8a), stroke-width 2px, with `stroke-dasharray` and `stroke-dashoffset` animation. - **Grid Paper Underlay:** Certain content sections have a subtle grid-paper pattern as background -- thin lines at 20px intervals in rgba(26, 26, 46, 0.05), creating the impression of graph paper or an engineer's notebook. This is achieved with repeating CSS linear-gradients (no image files). The grid is slightly misaligned with the content grid, reinforcing the improvised quality. - **Sticky Note Callouts:** Small rectangular elements (max 200px wide) with a slight rotation, solid background color (alternating between kraft #f5f0e8 and sand #e8dcc8), and a bottom-edge shadow suggesting they're stuck to the page. Text inside uses the Caveat handwritten font. These contain supporting details, asides, or tangential observations -- the visual equivalent of marginalia. - **Blueprint Circles:** Thin-stroke circles (1px, blueprint blue) positioned at intersection points in the layout -- where grid lines cross, where modules meet, where the timeline branches. These are purely decorative geometric markers that reference technical drawing conventions. Some circles have a small crosshair through their center. They morph subtly on scroll (scale from 0.8 to 1.2 over a 200vh scroll distance). - **Module Number Stamps:** Each bento-box module carries a large, semi-transparent number (opacity 0.06) in its top-left corner, rendered in Space Grotesk at 8rem. These reference sheet numbers in technical documents and give each module a sense of serial identity. The numbers are sequential but not continuous (e.g., 01, 03, 07, 12) -- as if some modules were discarded during assembly. ## Prompts for Implementation **Narrative structure:** The site tells the story of assembly -- of things coming together from disparate origins to form something that works. The scroll is the assembly process itself. Implementation should serve this metaphor: 1. **The Assembly Line (opening):** Modules enter from all four viewport edges using CSS `@keyframes` with `transform: translateX/translateY` from off-screen positions. Stagger the entries by 80ms each using `animation-delay`. The settling uses `cubic-bezier(0.34, 1.56, 0.64, 1)` easing -- the overshoot simulates physical collision and bounce. Each module's final position is defined by CSS Grid, but the animation origin is random (top, left, right, bottom). Total assembly animation: 2.4 seconds from first module appearance to settled state. 2. **The Workbench (timeline section):** The hand-drawn timeline SVG uses `stroke-dasharray` equal to total path length, with `stroke-dashoffset` animated from full-length to 0 via IntersectionObserver as the section enters view. Content modules at each timeline node use a morph animation: the module starts as a 48x48px square (resembling a sticky note from afar) and expands to full size when scrolled to proximity. Use CSS `transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1)` for the expansion, with `clip-path: inset()` transitioning from heavily clipped to fully revealed. 3. **The Workshop (split-column section):** Implement the pinned/taped effect with CSS `transform: rotate(var(--tilt))` where `--tilt` is assigned per-element via a data attribute or nth-child selector cycling through values: -1.5deg, 0.8deg, -0.5deg, 2deg, -1deg, 1.2deg. Box-shadows use `4px 4px 12px rgba(0,0,0,0.08)` to create lift. The fixed left-column navigation uses `position: sticky; top: 20vh` and contains navigation markers drawn in the Caveat handwritten font with small arrow SVGs. 4. **The Dispatch (closing):** Reuse the opening's module elements but re-trigger their animation with different grid placement. Use CSS Grid `order` property changes combined with `transition` on grid-area properties (or FLIP technique) to animate modules sliding to new positions. The rearrangement should take 1.8 seconds. Final state: all modules at `opacity: 0.4` except the central closing text at full opacity. **Animation philosophy:** - All animations are physics-inspired: spring easing, overshoot, settle. No linear or ease-in-out. - Morph animations (5% frequency -- underused) are the signature interaction: elements changing shape, size, and content simultaneously. - No parallax scrolling (40% frequency -- avoid as primary pattern). Scroll-triggered reveals are acceptable but should feel like assembly, not cinematic fade-in. - Cursor interactions: modules lift slightly (`translateY(-4px)`, increased box-shadow) when hovered, as if the user's hand is passing over physical objects on a table. **Full-screen narrative experience:** The entire site is one continuous scroll with no traditional navigation. The Assembly Line opening IS the navigation -- the modules that fly in contain all the content, and the subsequent sections simply rearrange and expand them. The user never leaves the assembly metaphor. No hamburger menus, no header bar, no footer links. The site begins with assembly and ends with re-assembly. **AVOID:** CTA-heavy layouts (no "Sign Up" buttons, no "Get Started" banners), pricing blocks, stat-grids (counters that tick up), testimonial carousels, hero images with overlay text, corporate gradient backgrounds, card-grid layouts that look like a dashboard. ## Uniqueness Notes **Differentiators from other designs:** 1. **Assembly-as-narrative:** No other design in the collection uses the concept of physical assembly as its organizing principle. Where other sites reveal content through scrolling, adhoc.quest's content literally flies in from the edges and constructs itself before the viewer's eyes. The bento-box modules are not static containers -- they are actors in a choreographed assembly sequence that repeats in different configurations at the close. 2. **Broken-grid + bento-box hybrid layout:** Broken-grid is at 20% frequency and bento-box at 5% -- the combination of both is unique in the collection. The deliberately imperfect grid alignment, with modules at slight rotations and irregular gap spacing, distinguishes this from both the dominant card-grid (85%) and centered (80%) layouts. The layout itself embodies the ad hoc concept. 3. **Physical-material visual language without photography:** While 85% of existing designs use photography and 70% use minimal imagery, adhoc.quest uses neither. Instead, it builds its visual identity entirely from CSS-generated textures (grid paper, tape strips), SVG hand-drawn lines, and typographic treatments. The visual world is entirely constructed from code -- no external image assets -- which is itself an ad hoc approach to imagery. 4. **Flat, opaque, analogous palette in a gradient-dominated field:** At 95% gradient frequency across existing designs, adhoc.quest's completely gradient-free, flat-color, analogous warm palette (kraft/sand/rust/blue) is a stark departure. The palette references physical materials (paper, clay, ink, blueprint) rather than digital abstractions. 5. **Morph as primary animation pattern:** With morph at only 5% frequency in existing designs, using it as the signature interaction (modules morphing from compressed squares to full content blocks, blueprint circles scaling on scroll, tape strips lifting) gives adhoc.quest a distinct kinetic identity separate from the dominant scroll-triggered (90%) and parallax (40%) patterns. **Chosen seed/style:** experimental type layout -- selected because the ad hoc concept is inherently experimental, and the "type layout" aspect translates directly into the broken-grid bento-box system where typography and spatial arrangement are the primary design materials rather than imagery or decoration. The experimental quality manifests in the deliberately imperfect alignments, hand-drawn connector lines, mixed typography (geometric display + humanist body + handwritten accent), and the assembly/disassembly animation that treats layout as performance rather than structure. **Avoided patterns from frequency analysis:** - corporate aesthetic (75%) -- replaced with whimsical-creative maker culture - card-grid layout (85%) -- replaced with broken-grid + bento-box hybrid - centered layout (80%) -- replaced with asymmetric, left-aligned composition - gradient palette (95%) -- replaced with flat, opaque, analogous colors - photography imagery (85%) -- replaced with CSS-generated textures and SVG drawings - mono typography (75%) -- replaced with geometric-sans display + humanist body + handwritten accent - mysterious-moody tone (40%) -- replaced with energetic, optimistic-bright tone - parallax pattern (40%) -- replaced with morph and spring-physics assembly animations