# Design Language for gabs.feedback ## Aesthetics and Tone gabs.feedback is a **feedback portal that looks like it was designed inside a water droplet** — Frutiger Aero at its most earnest, filtered through Japanese *ma* (間), the philosophy that emptiness is not absence but presence. The year is 2006 and someone has opened Windows Vista's sidebar gadgets inside a Zen garden raked in terracotta sand. Every piece of feedback is a **glossy bubble**: a translucent, glass-highlighted orb that drifts in enormous white space, each one casting a soft drop-shadow and carrying a lens-flare catch-light at its 10 o'clock position. The bubbles are not round — they are **angular bubbles**, sheared at 30° diagonals as if pressed through a cookie cutter with chamfered corners, a Frutiger-Aero form that acknowledges sharp-angles without losing the gloss. They float in ma-space, separated by margins that feel like held breath. The data-visualization aesthetic is not decorative — it is **the interface itself**. Each feedback item is rendered as a small bar-chart fragment, a sparkline, a sentiment arc. These micro-data objects glow in terracotta and warm amber against the white void, the way Windows Vista gadgets glowed on a frosted desktop. The overall mood is: **a mood-board created by a 2007 UI designer who has just discovered wabi-sabi and is trying to reconcile the two worldviews using terracotta bar charts**. Tone is **whimsical-creative**: the page does not take itself seriously, but it does take *feedback* seriously. A received piece of feedback is a tiny event worth marking with light. The page is a place where someone's words become a little glowing thing. ## Layout Motifs and Structure The layout is built on **ma-negative-space** as its load-bearing principle. The viewport is 92% void. Everything that is not void is a precisely placed artifact. **The Macro Structure (top to bottom):** 1. **Sky Field (100svh)** — An enormous blank canvas in warm #FAF6F0 (creamy white, not pure white). Dead center: the wordmark `gabs.feedback` in condensed grotesque, set at clamp(5rem, 11vw, 11rem). Below the wordmark, a single terracotta spark-line — a 280px SVG arc that charts imaginary sentiment over 7 days. That is the entire hero. Nothing else. The ma is the design. 2. **The Bubble Scatter** — After the fold, 8–12 feedback bubbles are scattered across the viewport using a **non-grid** placement: each bubble is positioned with intentional asymmetry — some left-leaning, some centered, some pushed to the 70% mark horizontally, with vertical gaps of 8rem–16rem between them. Bubbles never appear in rows. The scatter follows a diagonal drift from upper-left toward lower-right, as if the bubbles are slowly falling at a 20° angle. Each bubble is: - A sharp-angled rounded rectangle (border-radius: 4px on the outer form, but with a 30° chamfer on the top-right corner via clip-path) - 320px–480px wide depending on content length - Frosted glass background: rgba(255,255,255,0.72) with backdrop-filter: blur(12px) and a 1px border in rgba(196,98,45,0.18) - A glass highlight band across the top 28% of the bubble: a linear-gradient from rgba(255,255,255,0.6) to rgba(255,255,255,0) at 90° - A lens-flare dot at top-left: a 6px circle in rgba(255,255,255,0.9) with a 16px soft white glow behind it 3. **Data-Viz Interlude** — At the 60% scroll mark: a full-width section of pure negative space with three terracotta bar-chart columns in the center, rendered in SVG. The columns are labeled in condensed type: VOLUME / SENTIMENT / RECENCY. Each bar is #C4622D with a gloss-gradient overlay. The bars are separated by 48px gaps. The section is 60vh tall with 20vh of blank above and below the chart. This is the "dashboard moment" — one burst of data-viz in a sea of air. 4. **The Colophon Field** — Final section: another 80svh of void. Bottom-center: the domain `gabs.feedback` repeated in a small, tracking-widened condensed label in #C4622D at 0.75rem, spaced at letter-spacing: 0.4em. Below it: a 40px terracotta spark-line that slowly animates on loop. **No navigation bar.** No sticky header. No sidebar. No grid. The bubbles are the navigation — zooming into one expands it to fill the viewport. **The zoom-focus interaction is the central mechanic:** - At rest: a bubble is 320–480px, partially transparent, floating in space - On hover (desktop): the bubble scales up from its center using `transform: scale(1.08)` with a 400ms cubic-bezier(0.34, 1.56, 0.64, 1) spring — it *jumps* slightly past scale then settles - On click/tap: the bubble **zoom-focuses** to fill the viewport — a 600ms transition using `transform: scale()` calculated to make the bubble edge-to-edge, combined with a backdrop fade to rgba(250,246,240,0.94). The feedback text inside unfolds. The rest of the page disappears. Pressing Escape or clicking outside contracts the bubble back. ## Typography and Palette **Typography — condensed grotesque, all Google Fonts:** - **Primary Display**: [Barlow Condensed](https://fonts.google.com/specimen/Barlow+Condensed) — weight 700 for the wordmark and section labels, weight 400 for body. Barlow Condensed is an industrial grotesque with a slight optical narrowness that pairs well with wide negative space — the tall letters read as columns in the white void. - **Secondary / Data Labels**: [Saira Condensed](https://fonts.google.com/specimen/Saira+Condensed) — weight 400 for micro-data labels on the chart, axis annotations, and bubble metadata (timestamp, author initial). Saira's slightly wider condensed rhythm contrasts with Barlow's tighter set. - **Bubble Content**: [DM Sans](https://fonts.google.com/specimen/DM+Sans) — weight 400 at 0.95rem, line-height 1.65. The feedback text itself is not condensed — it breathes. This contrast between the condensed structural typography and the humanist bubble content reinforces the ma principle: the structure is tight, the content is given space. **Palette:** | Name | Hex | Use | |------|-----|-----| | Void | `#FAF6F0` | Page background, all negative space | | Clay | `#C4622D` | Primary accent — chart bars, lens-flare tints, active states | | Ember | `#D4703A` | Secondary — bubble borders at hover state, gradient warmth | | Adobe | `#8B3E1E` | Dark accent — wordmark, heavy labels, chart baseline | | Gloss | `#FFFFFF` | Bubble highlight band, lens-flare center | | Fog | `rgba(196,98,45,0.12)` | Bubble border at rest | | Smoke | `#E8DDD4` | Subtle dividers, chart grid lines | The palette is deliberately narrow. Five opaque hues only. All warmth, no blue. Frutiger Aero typically uses blues and aquas — this design inverts the palette to terracotta, making every glass-bubble element read as a warm object in warm air rather than cool tech. ## Imagery and Motifs **All imagery is custom SVG — no photography, no icons fonts, no stock.** **Recurring visual elements:** 1. **The Chamfered Glass Bubble** — The central motif. A sharp-angled rounded rectangle with a 30° chamfer on the top-right corner (`clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%)`). This angular cut is the "sharp-angles" motif made literal — it acknowledges that feedback sometimes cuts. The bubble is filled with frosted glass CSS only, no raster images. 2. **The Terracotta Spark-Line** — A recurring SVG path element appearing in the hero, the colophon, and optionally beside individual bubbles. It is always a simple 5–7 point SVG polyline with round caps, stroke `#C4622D` at 2px, no fill. It represents a sentiment trend. It is never labeled. The reader supplies the meaning. 3. **The Lens Flare Dot** — A 6px white circle at top-left of every bubble, backed by a 20px radial-gradient in rgba(255,255,255,0.5). This is the Frutiger Aero signature: the catch-light that makes any surface read as three-dimensional and glossy. It costs two HTML elements and two CSS rules and changes everything. 4. **Angular Data Bars** — The bar-chart columns in the Data-Viz Interlude are SVG `` elements. Each has a `linearGradient` overlay going from `#D4703A` at 0% to `#C4622D` at 60% to `#8B3E1E` at 100%, simulating the gloss-shading of a Frutiger Aero progress bar. The bars have sharp 90° corners — no radius. The sharpness against the curved bubbles elsewhere creates visual tension. 5. **The Diagonal Drift Guide** — An invisible structural line at 20° from horizontal governs the bubble scatter. It is never rendered, but every bubble's center lies within ±40px of a point on this line. The overall composition has a slow diagonal lean that suggests motion without animating. 6. **Ma Dividers** — Between sections: no horizontal rules, no color blocks, no gradients. Just 12rem–20rem of empty `#FAF6F0`. The divider is the absence. **Motion vocabulary:** - All bubble motion uses `transform` only (no layout thrash) - The zoom-focus expansion: `transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms ease` - The hover spring: `transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1)` - The spark-line draws on scroll-entry using SVG `stroke-dashoffset` animation, 1200ms ease-out - The chart bars grow from the baseline up: `transform: scaleY(0) → scaleY(1)`, `transform-origin: bottom`, 800ms stagger of 120ms between columns ## Prompts for Implementation Build gabs.feedback as a **single scrollable void** with floating artifacts. There is no navigation, no header, no footer nav. The page is entered, traversed, and exited in one linear motion like walking through a sparse gallery. **Technical architecture:** ``` body { background: #FAF6F0; font-family: 'Barlow Condensed', sans-serif; overflow-x: hidden; } ``` The HTML structure is flat: ```html
``` **Bubble implementation detail:** Each bubble is a `