# Design Language for gabs.feedback ## Aesthetics and Tone gabs.feedback is a **flat-design feedback atelier** rendered as a sun-warmed paper-cutout dashboard — picture a 1970s elementary-school bulletin board where every comment, suggestion, and overheard bit of chatter has been hand-trimmed from construction paper, layered with rubber cement, and pinned in place by a kid who really, really cares about doing it right. The site is whimsical-creative without being childish; it is a workshop, not a playroom. Feedback here is treated as **sediment** — soft layers of opinion that pile up over time and form the shape of a project the way warm earth forms the shape of a hill. The mood is daytime: late-afternoon, the kind of sunlight that turns burnt orange when it hits a clay tile. There is no glow, no glassmorphism, no chrome, no neon. Surfaces are matte and dry. Shadows are not soft drop-shadows; they are **hard-cut paper offsets** — flat, opaque, set 6–10px down-and-right, never blurred. Every "card" is a literal cutout that visibly *sits on top of* the layer behind it, with a 1.5px ink hairline at its trailing edge to suggest the shadow side of the cut. The voice copy is warm, slightly mischievous, never corporate. Microcopy uses scribbled marginalia tone: "ok but also —", "tiny gripe:", "loved this part →", "third time hearing this one." The site behaves as if a friendly editor is standing next to you, smiling, leaning in to point at the things that matter. There is no anxiety, no urgency, no FOMO. Feedback, in this aesthetic, is a slow gift, not an alarm. The dominant emotional register is **gentle attentiveness** — the site is *listening* before it is *displaying*. This is dramatized through a single recurring motif: every interactive element has a 220ms spring-loaded **lean-in** animation, where the element tilts toward the cursor as if it has just heard something interesting. ## Layout Motifs and Structure The site is a **dashboard** at its skeleton, but a dashboard rendered as a **collage of stacked paper trays** — not the corporate bento-box dashboard of fintech analytics. The layered-depth motif is not implied through perspective tricks; it is *literal*. The viewport is divided into six clearly-stratified planes, from back to front: - **Plane 0 (background):** A flat #F4E9D2 cream wash, with a 1.5% multiply-blended noise sourced from a single SVG `feTurbulence` filter at baseFrequency 0.9. - **Plane 1:** Long horizontal "shelf" bands in #E0B070 (terracotta), 96px tall, set every 320px down the page, each with a hard 4px #2A1F18 ink edge at its top. These are the *trays* that the feedback cards sit on. - **Plane 2:** **Feedback cards** — 280×360px paper rectangles in five rotating fill colors, slightly rotated (-3deg to +3deg, randomized per card), each with a hard 8px offset shadow. - **Plane 3:** **Tag chips and pin marks** — 14px circles, 22px ribbons, hard-shadowed at 4px offset. - **Plane 4:** **Cursor sticker** — a custom 28px paper-cutout pencil that follows the mouse with a 180ms spring damping, casting a 3px hard shadow. - **Plane 5 (front):** **Dashboard chrome** — top tray rail and side filter strip, both rendered as taller paper bands at 120% saturation of the base palette, hard-edged. The dashboard grid is asymmetric-but-structured: a 5-column primary grid on the left (62% of viewport width) holding the **Feedback Stream**, and a 2-column right rail (38% of viewport width) holding the **Sentiment Collage**. Between them runs a deliberate 28px **paste-up gutter** with a hand-drawn ink wobble (2px amplitude, drawn as a single SVG path with 18 control points). The gutter is the load-bearing seam of the layout — it is the fold where the dashboard's two halves meet, and it is *visible*, not implicit. Vertically, the page scrolls but does not parallax. Layers stay locked. What moves is the **stack itself** — feedback cards slide up from below as you scroll, fanning into the tray bands like cards being dealt onto a table. The animation pacing is **stagger** (40ms between cards) layered on **spring** (stiffness 180, damping 22). When a card lands in its tray, the tray *briefly compresses 2px* and rebounds, as if absorbing the weight. This is the spring-pattern, but used in a literal-physical way that maps to the paper-cutout aesthetic. There is no hero section. The page opens already mid-collage, with three stacks of cards already visible above the fold, and a soft handwritten "↓ keep going" pencil mark at viewport-bottom drawing itself in. ## Typography and Palette **Typefaces (Google Fonts only):** - **Display face: `Bungee Shade`** — used at viewport-large sizes (clamp 64px / 11vw / 192px) for the main "gabs.feedback" wordmark and for section labels ("STREAM," "COLLAGE," "QUEUE"). Bungee Shade is a retro-display Google font with a built-in flat 3D shadow baked into the glyph. We do not add any extra effect to it; the glyph *is* the layered-depth motif. Set in #2A1F18 with no fill on the shadow side, exposing the cream background through it. Tracking -0.02em, line-height 0.92. - **Subheads: `Alfa Slab One`** — 36–56px, weight 400, used for section subtitles and feedback-author names. Hard, slab-serif retro-display. Color #5C2E1F (deep terracotta). - **Body: `Fraunces`** — variable serif, 17px / 1.55 leading, weight 380, optical-size set to 144 for editorial. Used for feedback content and editorial copy. Color #2A1F18. - **Microcopy / margin scribbles: `Caveat`** — 16–22px, weight 500. Used for inline annotations, "ok but also —" style remarks, and the playful side commentary that is core to the tone. - **Numerals / counters: `Bungee Shade` again, but at 28px** — for scoring marks, card counts, and the feedback-tally chips. Numerals get the layered-depth treatment by design. **Palette (warm-earthy, eight stops):** - `#F4E9D2` — Cream Paper (background wash) - `#E0B070` — Honey Terracotta (tray bands) - `#C97B4A` — Burnt Orange (primary feedback card) - `#A4502D` — Sienna (secondary feedback card, hover state on burnt orange) - `#7A3B1F` — Cocoa Brick (high-priority feedback) - `#D9C77A` — Marigold Wheat (positive-sentiment card) - `#5C2E1F` — Deep Terracotta (subhead text, annotation ribbons) - `#2A1F18` — Ink (all hairlines, primary text, hard-cut shadows) These eight colors are the *entire* palette. There is no white, no black, no gray. Hairlines and shadows use #2A1F18 instead of black to keep the page warm. Highlights use the cream paper color rather than white. This is doctrinal — the absence of true neutrals is what holds the warm-earthy register. Accent gradients are forbidden. Every fill is a flat solid. The only exception: the noise wash on Plane 0, which is monochromatic. ## Imagery and Motifs The site uses **zero photography** (deviating from the 98% photography-heavy corpus) and instead leans entirely on **abstract-shapes** rendered as paper cutouts. The shape language has six primitives, all hand-drawn as SVG paths with deliberate 1–2px ink wobble on the strokes: 1. **The Pebble.** A fat lozenge with three uneven sides, ~64×40px, used as the shape of feedback cards' status pills. Filled with one of the eight palette colors, hard-edged. 2. **The Tab.** A trapezoidal index-card tab (~48×24px) protruding from the top edge of every feedback card, like a manila-folder index. Carries the topic label. 3. **The Ribbon.** A tiny banner shape (~120×22px) with a forked tail, used to mark featured feedback. Always Deep Terracotta. 4. **The Pin.** A 14px circle with a 4px hard-offset shadow and a 1.5px ink hairline. Pins anchor cards visually; some are intentionally placed off-center to suggest the card was pinned in a hurry. 5. **The Sprout.** A two-leaf abstract sprig (~28×40px) used as a positivity marker. The sprout is the only motif allowed to wiggle continuously (a 0.3deg sway on a 4-second sine). 6. **The Stack-Cluster.** A composition of 3–6 overlapping abstract pebbles in graduated palette colors, used as section dividers and as the visual treatment of aggregated sentiment. The stack-cluster is the **layered-depth motif** in pure form — each pebble offset 6px down-and-right from the one beneath, creating a literal terraced slope. There are **no icons** in the conventional sense. UI affordances (filter, sort, search, archive, share) are rendered as miniature paper-cutout objects: a tiny scissor-shape, a tiny bag, a tiny magnifying glass cut from cardstock, etc. Each has visible "scissor marks" (1px serrations) along one edge to suggest it was hand-cut. The cursor itself is replaced with a **paper-cutout pencil sticker** (a yellow-ochre #D9C77A pencil with a sienna eraser, 28×28px, hard-shadowed). The pencil tilts 12deg toward the direction of cursor travel, springing back to vertical when the cursor stops. When a user hovers a feedback card, a tiny **margin-scribble** in Caveat font fades in beside the card, written as if by an unseen editor: "this one rings true," "third upvote today," "save for friday review." These scribbles are stored in a small JSON catalog and randomized. ## Prompts for Implementation Build gabs.feedback as a **continuous-canvas dashboard** — not a multi-route SPA, not a stacked landing page. The whole experience lives on one scrollable surface, paced by the rhythm of cards landing in trays and the scribbled pencil-margin commentary. Storytelling rules: - **The site narrates feedback, not features.** Do not write "Get insights faster." Write things like "Last Tuesday, 41 quiet observations." Treat each section as an *anecdote* about feedback, not a *capability claim*. - **Lead with the artifact, not the offer.** The first thing visible above the fold is three stacks of paper feedback cards already piled on trays. Copy comes second. - **No CTAs in the conventional sense.** There is no "Sign Up" or "Get Started" button anywhere. The primary affordance is the **Feedback Box** at the bottom of the page — a single oversized paper envelope into which the user can drop a thought. The envelope opens (with a spring animation, lid lifting on a hinge) when hovered, revealing a textarea cut from cream paper. Submission animation: the typed note **folds itself** in three steps (top-down origami), slides into the envelope, the lid closes, and the envelope shifts up onto the stack. The whole thing takes 1.6 seconds. There is no confirmation modal — the animation *is* the confirmation. - **No pricing block, no stats grid, no testimonial carousel.** Banned. If aggregate metrics need to appear, they appear as **stack-clusters** of pebbles whose count corresponds to the number, with a single Caveat-font scribble nearby ("about forty this month"). CSS and animation specifics: 1. **Layering.** Use `position: relative` and explicit `z-index` for each plane (0 through 5). Do not use `transform-style: preserve-3d` — the layered-depth motif is *fake* depth, achieved through hard-offset shadows and collage stacking, not perspective. This is doctrinal: flat-design means flat. 2. **Shadows.** Every elevated element gets a single hard shadow: `box-shadow: 8px 8px 0 0 #2A1F18;` for cards, `4px 4px 0 0 #2A1F18;` for chips, `2px 2px 0 0 #2A1F18;` for hairline elements. Never use `blur` on shadows. Never use rgba shadows. Always opaque ink. 3. **Card rotations.** On render, each feedback card receives a `transform: rotate(var(--tilt))` where `--tilt` is randomized in JS within `[-3deg, +3deg]` and stored in localStorage so it persists across visits. The card *remembers* its tilt. 4. **Spring animation.** Use a custom JS spring (stiffness 180, damping 22, mass 1) implemented in raw RAF, not a library. Apply it to: - Card landings on tray bands (Y-translation + scale-bounce 0.98→1.02→1.00) - Cursor pencil tilt - Envelope lid open/close - Lean-in tilt on cards (cursor proximity-based, 30px radius of effect) 5. **Stagger.** Card streams enter with 40ms stagger. Section labels enter with 80ms stagger per character (Bungee Shade glyphs spring in from below). 6. **No parallax.** The site does not parallax. Layers stay locked to scroll. The only motion is intra-element (cards entering, hover lean-ins, sprouts swaying). This is a deliberate departure from the 95% parallax-prevalence in the corpus. 7. **Cursor.** Hide the system cursor (`cursor: none` on `body`) and render the paper-cutout pencil as a fixed-position SVG that tracks `mousemove`. Spring damping 180/22 on tilt. The pencil casts a 3px hard shadow. On click, the pencil briefly stamps a 14px ink dot at the click location that fades out over 600ms. 8. **Soundless.** No audio. The aesthetic is paper, paper is silent. Resist the temptation to add hover-clicks or whoosh effects. 9. **Scribble system.** Build a `marginalia.json` catalog of 60+ Caveat-font snippets. On card hover, fade one in next to the card with a 220ms ease-out. Pick by hashing the card content so the scribble is consistent per card. 10. **Envelope.** The submission envelope at page bottom is a single SVG with a lid `` that animates `transform: rotate3d(1,0,0,...)` on its hinge. Despite using rotate3d, the visual remains flat — there is no perspective. The lid simply gets shorter as it "opens." This is intentional flat-design treatment of a 3D action. Storytelling pacing: The page reads top-to-bottom in five movements: 1. **Stacks.** The viewer arrives mid-collage. Three stacks of cards greet them. A handwritten arrow points down. 2. **The Stream.** Scroll begins. Cards land in trays in staggered runs of 4–6. Tray bands compress and rebound. 3. **The Collage.** Right rail dominates: aggregate sentiment as stack-clusters of pebbles. Caveat scribbles annotate the clusters. 4. **The Queue.** Featured feedback marked with ribbons. Slow scroll, fewer cards, higher density per card. 5. **The Envelope.** Page-bottom invitation. The user drops a note. The envelope eats the note. Page ends. There is no footer in the conventional sense — the envelope is the footer. ## Uniqueness Notes This design is intentionally distinct from the 190-design corpus along the following concrete axes: 1. **Pure flat-design as a discipline, not a style.** Flat-design appears in only 1% of the corpus, and the few sites that use it pair it with corporate or saas tones. gabs.feedback uses flat-design as a *paper-cutout doctrine* — every shadow opaque, every fill solid, no gradients except a noise wash, no glow, no glassmorphism. This is the rarest aesthetic register in the corpus, and we commit to it without compromise. 2. **Warm-earthy palette + flat-design pairing.** Warm-earthy palettes appear in 3% of the corpus; flat-design appears in 1%. Their combination, paired with whimsical-creative tone (7%) and abstract-shapes imagery (3%), occupies an intersection that — to the best of available evidence — is unique in this corpus. Most warm-earthy designs go cottagecore or pastoral-romantic; we go playful-collage instead. 3. **Retro-display typography (Bungee Shade) used for layered-depth motif.** Retro-display fonts appear in 5% of the corpus. Bungee Shade specifically encodes the layered-depth motif into the glyphs themselves, eliminating the need for parallax, 3D transforms, or perspective tricks. The typography *is* the depth — a load-bearing design choice not seen elsewhere. 4. **No parallax in a dashboard layout.** Parallax is in 95% of the corpus and dashboard layouts almost universally use scroll-triggered depth. gabs.feedback uses dashboard structure with **zero parallax** — the layered-depth motif is purely static collage, with motion confined to intra-element spring animations. This is doctrinally rare. 5. **No photography, no icons.** Photography appears in 98% of the corpus; we use 0%. Conventional iconography is replaced with hand-cut paper-tool shapes (scissor, bag, magnifier as paper objects with serrated edges). Visual vocabulary is entirely shape-based. 6. **The Envelope as primary CTA replacement.** The corpus is heavy with CTA buttons, signup forms, and pricing blocks. gabs.feedback replaces all of that with a single oversized paper envelope at page-bottom that performs an origami-fold animation on submission. The submission flow is ceremonial, slow, and tactile — antithetical to the conversion-funnel orthodoxy of most landing pages. 7. **The Pencil cursor and marginalia scribble system.** A custom cursor that tilts toward travel direction and stamps ink dots on click, paired with a 60+ entry catalog of Caveat-font margin scribbles that fade in on card hover. This editorial-companion behavior dramatizes the "feedback as conversation with an attentive editor" tone in a way that no other site in the corpus attempts. 8. **Spring animations used literally-physically.** Tray bands compress 2px when cards land. Envelope lids hinge. The pencil tilts. Spring (82% in corpus) is normally used as a generic easing curve; here it is the literal physics of paper, weight, and hinges. Mechanical specificity over decorative flourish. **Chosen seed:** `aesthetic: flat-design, layout: dashboard, typography: retro-display, palette: warm-earthy, patterns: spring, imagery: abstract-shapes, motifs: layered-depth, tone: whimsical-creative` — this seed combines four of the rarest dimensions in the corpus (flat-design 1%, warm-earthy 3%, abstract-shapes 3%, retro-display 5%) with one common dimension (spring 82%) repurposed for literal physics rather than generic easing. **Avoided overused patterns from frequency analysis:** parallax (95%), cursor-follow as generic effect (84% — we use it but as a paper-pencil sticker, not a glow trail), hand-drawn aesthetic (96% — we use cut-paper, not hand-drawn), photography (98%), gradient palettes (97%), full-bleed layout (93%), card-grid (83% — we use stacked-trays instead), centered layout (82%), pastoral-romantic tone (34%).