# Design Language for gabs.cafe ## Aesthetics and Tone gabs.cafe is a deconstructed diner menu -- an anti-design experiment where the conventions of cafe websites are systematically violated to reveal the hidden structures of value (gabs = price in Korean). Elements are deliberately misaligned, text hierarchies are inverted (body text larger than headlines), and the monochrome palette strips away the warm-coffee-brown cliches that plague every cafe site on the internet. The anti-design aesthetic here is intellectual rather than chaotic: every "mistake" is a deliberate choice that challenges how we visually encode price and worth. The tone is professional -- but the professionalism of an academic paper, not a corporate landing page. The site discusses value concepts with clinical precision while the visual design argues that our visual language for commerce is itself a kind of propaganda. The restraint of the monochrome palette paired with the discipline of humanist typography creates an experience that feels like reading a critique of cafe culture published in a design theory journal. Visual inspiration: Wolfgang Weingart's deconstructed typographic experiments; the monochrome photography of Daido Moriyama applied to commercial signage; the deliberately ugly interfaces of early Craigslist reconsidered as radical design statements; a Japanese kissaten menu printed on a single sheet of white paper with only black ink. ## Layout Motifs and Structure The layout uses a **hero-dominant** structure -- the hero section occupies 80% of the visual weight, with subsequent content treated as footnotes or appendices to the hero statement. **Hero-Dominant Architecture:** - Hero: 100vh, containing a single massive statement about value - Below the hero: three short content sections, each progressively smaller in vertical height (60vh, 40vh, 20vh), creating a diminishing-returns visual rhythm - All content is left-aligned with a 120px left margin (desktop), creating a persistent text column that leaves the right 40% of the viewport as intentional void **Section Flow:** 1. **The Statement (Hero):** 100vh. A single sentence about value, set in humanist type at body-text size (18px) positioned top-left with enormous padding-top (40vh). This inversion -- a hero with small text -- is the core anti-design move. The domain name "gabs.cafe" sits in the bottom-right corner, even smaller (12px). 2. **The Counter:** 60vh. Mixed-media imagery (overlapping text blocks, line fragments, a photographic texture crop) with a single paragraph of analysis. 3. **The Receipt:** 40vh. A list of concepts formatted exactly like a receipt: item names left-aligned, "prices" (actually philosophical positions) right-aligned, connected by dots. 4. **The Change:** 20vh. Just the domain name, centered, and an underline-draw animation that traces a line below it on scroll. ## Typography and Palette **Typography:** - **Display / Hero:** "Source Sans 3" (Google Fonts) -- a humanist sans-serif designed by Paul Hunt for Adobe, with open forms and excellent readability. Used, counterintuitively, at 18px for the hero statement -- the anti-design move is that the most important text is the smallest. Weight: 400. Line-height: 1.8. The humanist warmth of Source Sans 3 provides readability even as the design subverts size expectations. - **Body / Content:** "Source Sans 3" at 15px/1.65, weight 400 for body, 600 for emphasis. Section headings are set at 13px in uppercase with letter-spacing: 0.2em -- smaller than body text, inverting conventional hierarchy. - **Accent / The Receipt:** "Source Code Pro" (Google Fonts) -- a monospaced companion to Source Sans, used at 14px for the receipt section's line items. The monospace creates the tabular alignment needed for the receipt format. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | White Ground | Pure white | #ffffff | Page background | | Black Ink | True black | #000000 | Primary text, lines, borders | | Grey Mid | Medium grey | #808080 | Secondary text, receipt dots, metadata | | Grey Light | Pale grey | #e0e0e0 | Subtle borders, section dividers | | Grey Dark | Charcoal | #333333 | Mixed-media overlay text blocks | The palette is monochrome -- five shades from white to black with zero chromatic color. This austerity is the anti-design palette at its most rigorous: refusing the warm browns, the Instagram-filter sepia, the latte-foam gradients that define cafe web design. The absence of color IS the design statement. ## Imagery and Motifs **Mixed-Media Visual Collage:** The Counter section uses mixed-media imagery: - A CSS-generated halftone texture (radial-gradient dots at varying sizes) occupying a 300px x 300px area - Overlapping text blocks (fragments of text rotated 5-15 degrees, at varying opacities) creating a deconstructed page spread effect - A single line illustration (thin black stroke, 1px) of a coffee cup -- the only recognizable object on the entire site, deliberately small and partially cropped, challenging the viewer to find it **Tech Motifs as Information Architecture:** The tech motif manifests not as circuitry but as the visible structures of web design itself: - CSS grid lines made visible (dotted 1px grey lines showing the underlying column structure) - Element bounding boxes partially visible (dashed borders around some content blocks, as if the browser inspector is open) - These meta-visual elements make the design's own structure part of the content, a self-referential anti-design move **Underline-Draw Animation:** The closing section features an underline-draw: a horizontal line below the domain name animates from width: 0 to width: 100% over 800ms with cubic-bezier(0.25, 0.8, 0.25, 1) easing, triggered on scroll entry. This single, precise animation is the only motion on the entire site -- its isolation makes it significant. ## Prompts for Implementation **Full-Screen Narrative Experience:** The diminishing section heights create a reading experience that decelerates: the hero is vast and meditative, subsequent sections compress, and the final section is barely a whisper. The user's scroll speed naturally increases as sections shrink, creating a sensation of falling through the site. **Anti-Design Hero Implementation:** The hero is a 100vh div with a single p element. The text is 18px Source Sans 3, positioned with padding-top: 40vh and padding-left: 120px. The domain name in the bottom-right uses position: absolute, bottom: 40px, right: 40px, font-size: 12px, color: #808080. This radical understatement forces the user to lean in. **The Receipt Section:** A series of flex rows: each row has a left-aligned concept name, a flex-grow middle area filled with CSS-generated dots (border-bottom: 1px dotted #808080), and a right-aligned position/value. Set in Source Code Pro for tabular alignment. The familiar receipt format is subverted by replacing prices with philosophical positions. **Visible Grid Lines:** The page container has a background of repeating CSS grid lines (repeating-linear-gradient) in #e0e0e0 at 1px width, every 120px. These grid lines are visible through the white background, like graph paper. They can be toggled off via a small "grid" toggle in the corner. **Responsive Behavior:** On mobile (below 640px), the left margin reduces to 20px. The hero padding-top reduces to 20vh. The receipt section maintains its tabular layout but scales text to 12px. Visible grid lines are hidden on mobile. The monochrome palette remains unchanged. **AVOID:** Coffee photography, latte art, warm brown tones, cozy serif fonts, "menu" sections with food items, anything that looks like a conventional cafe website. The anti-design approach means actively refusing cafe-site conventions. ## Uniqueness Notes **Differentiators from other designs:** 1. **Anti-design aesthetic applied to a cafe domain (5% frequency):** The deliberate subversion of cafe-website conventions (no warm colors, no food photography, inverted text hierarchy) creates a meta-commentary on commercial web design that is unique in the collection. 2. **Hero-dominant layout with intentionally small text (5% frequency):** The anti-design inversion of putting 18px text in a 100vh hero -- making the most important content the smallest -- challenges the foundational assumption that hero sections must shout. 3. **Pure monochrome palette (9% frequency):** While monochrome exists in the collection, this is the only design that uses it as a polemical choice -- the absence of color is the anti-statement against cafe-design cliches. 4. **Visible CSS grid lines as design element:** Making the underlying structure of the layout visible (grid lines, bounding boxes) is a self-referential anti-design technique found nowhere else in the collection. 5. **Underline-draw as the sole animation:** With underline-draw at 9% frequency, using it as the ONLY motion on the entire site -- a single line drawn below the domain name -- gives it the weight of a signature on a document. **Documented Seed/Style:** aesthetic: anti-design, layout: hero-dominant, typography: humanist, palette: monochrome, patterns: underline-draw, imagery: mixed-media, motifs: tech, tone: professional **Avoided Overused Patterns:** - corporate aesthetic (62%) -- anti-design (5%) instead - asymmetric layout (94%) -- hero-dominant (5%) instead - warm palette (100%) -- monochrome (9%) instead - parallax patterns (98%) -- underline-draw (9%) instead - mono typography (98%) -- humanist (31%) instead - tech motifs (96%) -- tech but meta-structural (self-referential) - friendly tone (64%) -- professional (3%) instead - minimal imagery (94%) -- mixed-media (3%) instead