# Design Language for gabs.day ## Aesthetics and Tone `gabs.day` is a **graffiti-scholar's commonplace book** — imagine a Columbia PhD candidate who keeps her lecture notes on legal pads she has subsequently tagged with aerosol markers on the subway platform. The site lives at the productive tension between two kinds of seriousness: the seriousness of the trained intellect (footnotes, long-form argument, primary sources) and the seriousness of the street-trained eye (letterform as material, color as argument, negative space as rhetoric). Neither register apologizes for the other. The mood is **dusk on the High Line** — the sun is at five degrees above the horizon, turning industrial steel amber and copper, and someone has wheat-pasted a 36-inch print of Basquiat's crown motif on the concrete retaining wall to the left. The page reads like that wall: text and mark coexist without hierarchy. The reader's eye enters through spectacle (the giant tag), settles into substance (the prose), and exits with both. Tone is **scholarly-intellectual** throughout — sentences are complete, ideas are developed, citations exist — but the visual container refuses the neutrality of academic publishing. This is a thinker who annotates her own margins with spray paint. ## Layout Motifs and Structure The layout is a **hard split-screen at every scroll position** — not a two-column article, but a genuine 50/50 vertical division that persists from header to footer. The viewport is permanently bisected by a single 2px rule set at `left: 50vw`, colored in the warmest stroke of the palette (#E8622A, full opacity). **Left panel — The Wall:** Fixed-position graffiti canvas. Contains the macro typography: the wordmark, section labels as oversized aerosol stencil letters (clamp(80px, 12vw, 160px)), and decorative geometric tag elements that evolve as the right panel scrolls. The left panel does not scroll — it is the permanent mural. As the right panel advances through sections, JS updates a CSS custom property `--section-index` on the left panel, which drives a staggered paint-reveal animation: each new section label strokes in from zero dash-offset over 600ms using SVG `stroke-dasharray` / `stroke-dashoffset`. **Right panel — The Notebook:** Scrollable content area, `overflow-y: auto`, `width: 50vw`. Content is set in a `max-width: 560px` column with `margin-inline: auto`. Section breaks are marked with a single 1px horizontal rule in #B35F3E at 40% opacity, preceded by a right-aligned section number in monospace at 11px. The right panel background is slightly warm (#FFF8F0 — off-white paper tone) while the left is deep amber-black (#1C0F08). **Depth stacking:** The left panel uses three layers of `z-index` — background color field (z:0), geometric tag outlines as SVG at low opacity (z:1), and the live stencil labels (z:2). This produces the layered-depth motif without falling back to the generic drop-shadow approach used in 8% of the corpus. Depth is achieved through opacity and paint-order, not blur. **No sticky navigation, no hamburger menu, no footer CTA.** A small fixed pill in the upper-right corner contains only the section indicator (e.g., `§ 3 / 7`) and a single icon-only return-to-top arrow. Nothing else competes with the split. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Stencil display — `Bebas Neue`** at weights implicit (it is single-weight). Used exclusively in the left panel for section labels and the wordmark. Set at `letter-spacing: 0.12em`, `text-transform: uppercase`. Each label is drawn as an SVG `` element so `stroke-dashoffset` animation is available. The wordmark `GABS.DAY` is set at `clamp(48px, 8vw, 96px)` in vertical orientation (`writing-mode: vertical-rl`, rotated 180°), anchored to the bottom-left of the left panel. - **Body prose — `Crimson Pro`** (variable, `wght 200–900`, italic axis). All running text in the right panel. Set at `font-size: clamp(16px, 1.6vw, 19px)`, `line-height: 1.72`, `wght: 380`. Subheadings use `wght: 620`, `font-style: italic`, `font-size: 1.25em`. The combination of a sharp stencil display face and a warm Renaissance-cut serif body is the typographic argument of the site: street and scholarship are not opposites. - **Annotation layer — `Space Mono`** at `400/700`. Used for footnote markers, section numbers, the `§ 3 / 7` pill, and any inline code or citation keys. Set at `font-size: 11px`, `letter-spacing: 0.04em`, `color: #8C4A2F` (mid-warm rust). **Palette — sunset-warm (hex values):** - `#1C0F08` — near-black ember. Left panel background, deep shadow base. - `#E8622A` — hot amber-orange. The bisecting spine rule, primary accent, hover states, the `--section-index` counter digit. - `#C94B1A` — burnt sienna. Secondary accent, hover-lift shadow color, SVG tag stroke on left panel. - `#B35F3E` — terracotta. Right panel section rules, mid-ground geometric fills on left panel. - `#F5A053` — warm gold. Left panel ambient glow — used as a radial gradient overlay at 12% opacity to simulate bounce light from the orange spine rule. Also the color of tag fill at 30% opacity. - `#FFF8F0` — off-white paper. Right panel background. - `#8C4A2F` — rust annotation. Monospace annotation text, footnote numerals. - `#2B1208` — deep charcoal-brown. Right panel body text (not pure black — the warmth keeps it consistent with the palette). ## Imagery and Motifs **No photography anywhere.** The entire visual vocabulary is geometric-abstract and constructed. **Left panel geometric tag system:** Four recurring tag motifs, each an SVG ``, placed at deliberate positions on the left panel canvas. They are not random graffiti fills — each is a disciplined geometric form: 1. **The Crown tag** — a five-point crown outline (no fill, 1.5px stroke in #E8622A at 60% opacity) at 80×50px, placed in the upper-left quadrant. A reference to Basquiat that is not pastiche — it is a single clean geometric form. 2. **The Spiral bracket** — a pair of square-cornered bracket glyphs (like `[` and `]`) set 140px apart, connected by a horizontal rule at mid-height. Used as section-divider territory markers on the left panel. Stroke: #F5A053 at 40%. 3. **The Eye reticle** — a 32px circle with a 4px dot at center and four 8px tick marks at 0°/90°/180°/270°. Stroke: #C94B1A at 50%. Placed at vertical midpoint of the left panel as a structural anchor. 4. **Asterisk tags** — six-pointed asterisks (not emoji — hand-drawn SVG `` with blunt-tipped arms) at 18–24px, scattered at three fixed positions. Stroke: #B35F3E, no fill, 1px stroke. As the right panel scrolls, the `--section-index` CSS variable drives a `clip-path: inset()` reveal on each tag group, so the mural appears to accumulate paint as reading progresses. By section 7, all four tag types are fully visible. **Hover-lift (treated distinctively, not as generic cards):** The right panel has no card components. Hover-lift is applied to individual text spans — specifically, pull-quote paragraphs and inline definition blocks — using a bottom-border technique rather than box-shadow: on `hover`, a 2px solid bottom border in #E8622A slides in from left (transform: scaleX(0) → 1 via a pseudo-element), and the element shifts `translateY(-2px)` over 180ms. This is lift-as-underline, not lift-as-float. ## Prompts for Implementation Build `gabs.day` as **a thinker's long-form essay site with a permanently muralled left wall**. The structure is one HTML file with a fixed left panel and a scrolling right panel. There are exactly seven sections; the left panel reacts to each. **Section architecture (right panel scroll):** 1. **§ 1 — Field** — A 300-word introductory statement of intellectual territory. The left panel shows only the wordmark and the crown tag at this point. 2. **§ 2 — Method** — 400 words on approach or practice. Eye reticle appears on the left. 3. **§ 3 — Argument** — The central thesis, 500 words, in Crimson Pro at slightly larger size (1.08em). Spiral brackets emerge on the left. 4. **§ 4 — Evidence** — Supporting analysis, 450 words with inline citations in Space Mono. 5. **§ 5 — Complication** — The honest counter-argument, 350 words. Left panel asterisk tags appear. 6. **§ 6 — Synthesis** — Resolution, 400 words. All left panel tags now fully visible. 7. **§ 7 — Coda** — A short 180-word closing statement. The left panel's Bebas Neue wordmark pulses once in opacity (0.6 → 1.0 → 0.6, 2s ease-in-out, one iteration) as the reader arrives. **JS scroll detection:** Use a single `IntersectionObserver` watching the seven `
` elements in the right panel. On intersection, update `document.documentElement.style.setProperty('--section-index', n)`. The left panel responds to `--section-index` via CSS `@keyframes` and `animation-delay: calc(var(--section-index) * 0.1s)`. **The spine rule animation:** On page load, the 2px vertical divider line draws from top to bottom over 1200ms using SVG `stroke-dashoffset` animation (or a CSS `clip-path: inset(0 0 100% 0)` → `inset(0 0 0% 0)` transition). This is the first thing the page does — everything else waits until the spine is complete. **Typography rendering:** Load `Bebas Neue` and `Crimson Pro` via Google Fonts. Use `font-display: swap`. Apply `font-variant-ligatures: historical-ligatures` on Crimson Pro body text and `font-variant-numeric: oldstyle-nums` on the Space Mono citation annotations. **No hover-lift box-shadow on any element.** The hover-lift interaction is exclusively the bottom-border slide technique described in Imagery. This distinguishes the pattern from the 18% of the corpus that uses it as a floating card effect. **Color mode:** Single mode only. No dark/light toggle. The left panel is always dark (#1C0F08 background), right panel always light (#FFF8F0). The permanent contrast is structural, not a user preference. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = graffiti, layout = split-screen, typography = retro-display, palette = sunset-warm, patterns = hover-lift, imagery = geometric-abstract, motifs = layered-depth, tone = scholarly-intellectual. **Differentiators from the existing corpus:** 1. **Split-screen at 1% corpus frequency.** Only 1% of designs use split-screen as their primary structural motif. `gabs.day` makes the 50/50 split non-negotiable and permanent — a spine that bisects the viewport rather than divides content into left-nav/right-content. The left panel is a mural, not navigation. 2. **Sunset-warm at 0% corpus frequency.** No other design in the 121-file corpus uses sunset-warm as its palette seed. The #E8622A / #C94B1A / #F5A053 amber-sienna-gold system is unclaimed territory. Combined with the near-black #1C0F08 on the left panel and the off-white #FFF8F0 paper on the right, the contrast ratio is functionally cinematic — dusk light on a white page held up to the sun. 3. **Hover-lift as underline-slide, not card-float.** The corpus uses hover-lift generically at 18% — almost always as `translateY(-4px) box-shadow(...)` on a card component. `gabs.day` applies hover-lift only to inline text blocks via a pseudo-element bottom-border animation. The physical metaphor is different: not a card lifting off a table, but a thought rising into salience. 4. **Graffiti as SVG geometry, not texture or brush stroke.** The corpus's 4% graffiti designs default to hand-drawn-brush-stroke imagery. `gabs.day` builds its graffiti vocabulary from pure geometric SVG — crown outlines, reticle circles, asterisk paths — making the street-art reference formally rigorous rather than merely stylistic. 5. **Left panel accumulates across scroll — a living mural.** The layered-depth motif (8% corpus) is typically achieved via z-indexed card stacks or parallax backgrounds. Here, depth is temporal: the left panel accretes visual complexity as the right panel scrolls. The reader builds the mural by reading.