# Design Language for gabs.reviews ## Aesthetics and Tone gabs.reviews is a punk zine about the price of everything -- a neo-brutalist broadside that smashes together thick borders, raw grain textures, and split-screen confrontation to review the concept of value (gabs = price in Korean) with the uncompromising directness of a photocopied manifesto stapled to a telephone pole. The neo-brutalism aesthetic is louder and more colorful than classic brutalism: thick black outlines, drop shadows with visible offsets, and a burgundy-cream palette that evokes the sophistication of a well-made but deliberately rough publication. The tone is bold-confident -- every review is a declaration, every assessment is final. The site does not equivocate. It presents value judgments with the confidence of a punk rock music critic who knows that lukewarm opinions are worse than wrong ones. Text is dense, headlines are LOUD, and the split-screen layout creates visual arguments by placing opposing views side by side. Visual inspiration: the poster art of the Bauhaus movement if it were redesigned by a 2024 streetwear brand; the thick-bordered, high-contrast aesthetics of Virgil Abloh's Off-White branding; a 1970s boxing match poster printed on cream cardstock with burgundy and black ink; the rough grain of ISO 3200 film photography. ## Layout Motifs and Structure The layout uses **split-screen** -- the viewport is divided vertically into two panels of equal width, creating a perpetual visual debate. Left and right panels present complementary or opposing content about value concepts. **Split-Screen Architecture:** - Two columns: 50% / 50%, no gap (panels share a thick 4px black border at the division) - Left panel: background #6b2d3e (burgundy deep) - Right panel: background #f5efe6 (warm cream) - Content within each panel: 80% width, centered within the panel, creating internal margins - The split is not a gimmick but a structural argument: everything about value has two sides **Section Flow:** 1. **The Clash (Hero):** Full-split hero. Left panel: "GABS" in condensed type, cream on burgundy. Right panel: "REVIEWS" in condensed type, burgundy on cream. Together they form the full domain name across the division line. 2. **The Debate:** 3-4 split-screen sections where left and right panels present different perspectives on the same value concept. Each section has thick top/bottom borders (4px black). 3. **The Verdict:** The split dissolves -- a full-width burgundy section where the two voices merge into a single conclusion. 4. **The Zine:** A final split-screen section with smaller, denser content: mini-reviews on left, index on right. Grain-overlay textures are most visible here. 5. **The Staple:** Domain name centered on a cream background, with two thick black lines above and below (mimicking staple binding marks). ## Typography and Palette **Typography:** - **Display / Headlines:** "Oswald" (Google Fonts) -- a condensed sans with strong vertical stress and impactful presence. Used at 4rem-8rem for hero text and section declarations. Weight: 700. All uppercase. The condensed proportions of Oswald create the density and urgency of headline typography on protest posters. - **Body / Reviews:** "Libre Franklin" (Google Fonts) -- a versatile sans-serif with excellent weight range. Used at 16px/1.6 for body text. Weight: 400 for body on cream, 400 for body on burgundy. The clean geometry of Libre Franklin ensures readability on both the dark and light panels. - **Accent / Labels:** "Oswald" at weight 300, 12px, letter-spacing: 0.2em, uppercase. Used for section labels, bylines, and metadata. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Burgundy Deep | Wine dark | #6b2d3e | Left panel background, accent on cream | | Cream Warm | Paper light | #f5efe6 | Right panel background, text on burgundy | | Black Structural | Pure black | #000000 | Thick borders, structural lines, emphasis | | Burgundy Light | Rose wine | #8a4a5a | Secondary accent on cream panels | | Cream Dark | Aged paper | #e0d4c4 | Tinted backgrounds, grain overlay base | | Text on Burgundy | Warm cream | #f5efe6 | All text on dark burgundy surfaces | | Text on Cream | Deep burgundy | #3a1520 | All text on light cream surfaces | The palette is burgundy-cream (1% frequency) -- a two-color world with black as structural element. The burgundy-cream combination carries the weight of old-world printing (two-color letterpress) while the thick black borders give it neo-brutalist edge. ## Imagery and Motifs **Grain-Overlay Texture:** A CSS grain-overlay covers both panels: - SVG feTurbulence filter (baseFrequency: "0.8", numOctaves: 4) at 6% opacity - The grain creates the texture of rough-printed paper, adding tactile quality to the digital surface - On the burgundy panel, the grain is slightly more visible (8% opacity), suggesting a darker printing stock - The grain is persistent -- it covers everything, including text, creating a unified rough-print texture **Sharp-Angles Motifs:** Decorative elements use sharp angles rather than curves: - Section dividers: thick chevron shapes (>>) in black, pointing downward - Pull-quotes: bordered on left and right with thick angled brackets rather than quotation marks - Small arrow-like shapes (triangle SVGs in burgundy or black) used as list markers - The sharp-angle motif creates visual aggression that suits the bold-confident tone **Shake-Error Animation:** On scroll entry, each split-screen section has a brief shake-error: the entire section translates rapidly back and forth horizontally (±4px) 3 times over 300ms, then settles. This creates the visceral impact of a printing press stamping a page -- a physical thud of content arriving. Implementation: @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } applied for 300ms on IntersectionObserver entry. Fires once per section. ## Prompts for Implementation **Full-Screen Narrative Experience:** The split-screen creates a perpetual dialogue. The user reads left-right, left-right, processing two perspectives simultaneously. The thick black borders between panels and between sections create a grid of confinement -- content is imprisoned in its panel, forced to make its argument in limited space. This constraint generates energy. **Split-Screen Implementation:** CSS Grid: grid-template-columns: 1fr 1fr. The 4px division border is achieved via column-gap: 4px with a black background-color on the grid container (the gap becomes the border). Each panel is a grid cell with internal padding. **Grain-Overlay Implementation:** Apply an SVG filter as a pseudo-element on both panels: ::after { content: ''; position: absolute; inset: 0; background: url(noise SVG data URI); opacity: 0.06; pointer-events: none; mix-blend-mode: multiply; } **Responsive Behavior:** On mobile (below 768px), the split-screen stacks vertically. Left panel on top, right panel below. The 4px border becomes horizontal between them. Hero text scales to 3rem. Grain overlay remains. Shake animation intensity reduces to ±2px. **AVOID:** CTA buttons, star ratings, comparison tables, soft gradients, rounded corners, pastel accents, corporate photography, cookie banners, anything polite. ## Uniqueness Notes **Differentiators from other designs:** 1. **Neo-brutalism is a unique aesthetic choice:** While brutalist appears at 3%, neo-brutalism -- with its thicker borders, bolder colors, and more contemporary edge -- is distinct and underrepresented. 2. **Split-screen as structural argument (3% frequency):** The 50/50 split forces every content section into a dialogue format, creating the only design in the collection that is architecturally built for presenting opposing viewpoints. 3. **Burgundy-cream palette (1% frequency):** One of the rarest palettes, used here not for luxury but for the two-color letterpress printing aesthetic of punk zines and protest publications. 4. **Shake-error as section entrance animation (1% frequency):** The shake pattern is the rarest animation in the collection. Using it for section entrances creates a unique physical-impact sensation -- content stamped onto the page. 5. **Grain-overlay as unified texture layer:** While grain-overlay imagery (3%) exists, applying it uniformly across both split-screen panels at different intensities creates a textured printing-stock effect that unifies the two-tone design. **Documented Seed/Style:** aesthetic: neo-brutalism, layout: split-screen, typography: condensed, palette: burgundy-cream, patterns: shake-error, imagery: grain-overlay, motifs: sharp-angles, tone: bold-confident **Avoided Overused Patterns:** - corporate aesthetic (62%) -- neo-brutalism instead - asymmetric layout (94%) -- split-screen (3%) instead - warm palette (100%) -- burgundy-cream (1%) instead - parallax patterns (98%) -- shake-error (1%) instead - mono typography (98%) -- condensed (20%) instead - tech motifs (96%) -- sharp-angles (3%) instead - friendly tone (64%) -- bold-confident instead - minimal imagery (94%) -- grain-overlay (3%) instead