# Design Language for opensource.bar ## Aesthetics and Tone opensource.bar channels the visual energy of a late-1970s New York subway car covered in wildstyle graffiti -- but transported into a gilded palazzo where the tags drip onto marble floors and the throw-ups climb gold-leafed columns. The aesthetic is **graffiti opulence**: the raw, anarchic energy of street lettering colliding with the excessive grandeur of Baroque interior design. Think Lee Quinones painting a burner on the ceiling of Versailles. Think DONDI throwing up a whole-car masterpiece across the facade of an opera house. The tone is opulent and grand without being precious -- this is wealth that got its hands dirty, luxury that smells like Krylon and turpentine. The domain "opensource.bar" suggests a gathering place, a speakeasy for code and culture, and the design treats it as a kind of underground salon where the walls are covered in elaborate letter-forms and the furniture is upholstered in velvet. There is no irony here. The graffiti is not "street art" sanitized for a gallery wall; it is genuine wildstyle rendered with the care and complexity of illuminated manuscripts. And the opulence is not minimalist luxury -- it is maximalist, dripping, heavy with ornamentation and layered detail. The mood oscillates between the kinetic tension of a writer racking cans at 3AM and the stately composure of a grand hotel lobby at midnight. Surfaces are never clean -- they are tagged, layered, weathered, then gilded over. Every element carries the history of its making. ## Layout Motifs and Structure The layout follows a **modular-blocks** architecture -- discrete rectangular panels arranged in an irregular but intentional grid, like the panels of a comic book or the individual cars of a subway train viewed from above. Each block is a self-contained composition with its own internal logic, its own color temperature, its own typographic voice, but all blocks share a common border language: a 3px solid border in #2A1B0E (near-black brown) with a subtle 1px inner stroke of #C8A96E (tarnished gold). **Block Architecture:** - **Hero Block:** Full-viewport width, 100vh height. This is the "whole car" -- a single massive panel that dominates the opening experience. It contains the domain name rendered as a wildstyle graffiti piece (CSS-drawn, not an image) with 3D block-letter shadows and drip effects achieved through repeating linear gradients. - **Content Blocks:** Arranged in a 3-column grid on desktop (columns: 2fr 3fr 2fr) that collapses to a single column on mobile. Blocks are not uniform height -- they breathe and expand based on content, creating a deliberately uneven skyline when viewed at the grid level. The middle column is always the tallest, creating a cathedral-nave effect. - **Interstitial Blocks:** Between major content sections, narrow horizontal blocks (height: 120px) serve as "tags" -- single-line typographic statements that stretch edge to edge, functioning like the quick throw-ups between elaborate pieces on a wall. - **Gutter Treatment:** The 16px gutters between blocks are not empty -- they are filled with a repeating SVG pattern of thin drip lines in #8B7355 at 15% opacity, creating the impression that paint is seeping between the panels. Navigation is embedded within the block structure itself. There is no fixed header or hamburger menu. Instead, navigation options appear as labeled blocks in the grid, distinguished by a rotated orientation (text runs vertically) and a deeper background tone. The overall reading flow is non-linear but guided: the eye enters at the hero block, drops to the central column, then explores outward to the flanking blocks. The modular structure invites exploration rather than dictating a single scroll path. ## Typography and Palette **Typography:** - **Display / Graffiti Headlines:** "Commissioner" (Google Fonts) -- the versatile variable font used at its heaviest weight (900) and widest width setting. Commissioner's optical sizing and width axis allow it to stretch into display territory that mimics the proportional exaggeration of wildstyle letterforms. Used at 4rem-9rem for primary headlines, always in uppercase with letter-spacing: -0.03em (tight, compressed, aggressive). The negative tracking creates the cramped, overlapping quality of graffiti tags where letters jostle for space. - **Sub-Headlines / Block Titles:** "Commissioner" at weight 600, width 100 (normal), 1.5rem-2.5rem. These function as the "hand style" -- the writer's quick signature tag distinct from their elaborate pieces. Sentence case, letter-spacing: 0.02em. - **Body Text:** "Commissioner" at weight 300, 1rem-1.125rem, line-height 1.7. The light weight reveals the typeface's humanist warmth and subtle calligraphic heritage -- the letters breathe differently at this weight, showing the hand behind the geometry. This continuity of a single family across all roles creates a unified authorial voice, as if one writer tagged the entire building. - **Accent / Monospace:** "Overpass Mono" (Google Fonts) at weight 400, used sparingly for code blocks, metadata, and technical annotations. Set at 0.85rem with letter-spacing: 0.04em. This is the stencil -- the utilitarian counterpoint to Commissioner's expressiveness. **Palette:** The palette is sepia-nostalgic -- the amber, brown, and cream tones of aged photographs and oxidized bronze -- but punctuated by the specific hues of vintage spray paint that has faded in the sun. | Role | Color | Hex | Reference | |------|-------|-----|-----------| | Deep Ground | Burnt Espresso | #2A1B0E | The darkened concrete of a subway tunnel wall | | Primary Surface | Aged Parchment | #E8D5B5 | Sun-bleached newsprint taped over a window | | Secondary Surface | Warm Slate | #6B5744 | The rusted steel of a train car panel | | Gold Accent | Tarnished Gilt | #C8A96E | Peeling gold leaf on a palazzo ceiling | | Highlight | Faded Vermillion | #B85C3A | Krylon red cap, six months in the sun | | Text Primary | Sepia Ink | #3D2A1A | India ink mixed with coffee | | Text Secondary | Dusty Umber | #8B7355 | Charcoal rubbed into rough paper | | Background Wash | Ivory Smoke | #F2E8D8 | Cigarette-stained plaster | The palette operates on a strict warm-temperature hierarchy: darkest tones anchor the bottom and borders, lightest tones fill content surfaces, and the two accent colors (Tarnished Gilt and Faded Vermillion) are deployed only at moments of emphasis -- a highlighted word, a border on hover, a block's active state. The Faded Vermillion appears no more than 3 times per viewport to maintain its impact. ## Imagery and Motifs **Custom Illustration as Graffiti Murals:** The primary imagery mode is **custom illustration** executed in a style that fuses wildstyle graffiti lettering with the ornamental vocabulary of Baroque decoration. These are not photographs or stock images -- they are CSS-and-SVG compositions that function as digital murals. Specific illustration elements: 1. **Wildstyle Letter-Forms:** The domain name "opensource.bar" is decomposed into individual characters, each rendered as an SVG path with the interlocking arrows, connections, and extensions characteristic of wildstyle graffiti. The letters are not simply displayed; they are constructed through CSS clip-path and SVG path animations that draw the letter-forms stroke by stroke, as if watching a writer's hand in motion. Colors follow the sepia palette: primary fill in #C8A96E, 3D shadow in #2A1B0E, highlights in #F2E8D8. 2. **Drip Motifs:** Throughout the design, vertical drip elements descend from text baselines, block borders, and illustration edges. These are achieved through repeating-linear-gradient with irregular stop positions: `repeating-linear-gradient(to bottom, #C8A96E 0px, #C8A96E 40px, transparent 40px, transparent 55px, #C8A96E 55px, #C8A96E 70px, transparent 70px)`. Each drip has a slightly different gradient rhythm, preventing mechanical repetition. 3. **Flowing Curves as Connective Tissue:** The motif vocabulary centers on **flowing curves** -- specifically the long, sweeping S-curves and spiral extensions that connect letters in wildstyle graffiti. These curves are extracted from the letterforms and deployed independently as decorative elements: they wind between blocks as SVG path elements, they frame content sections like the scrollwork of a wrought-iron gate, and they animate slowly (20-30 second CSS animation loops) with a gentle oscillation that suggests spray paint still wet and flowing. 4. **Gilt Frame Overlays:** Each major content block is enclosed in a decorative border that references Baroque picture frames -- corner ornaments rendered as SVG flourishes in #C8A96E with inner shadow effects. These frames create the visual paradox of street art displayed in a museum: the graffiti content struggles against its ornate containment. 5. **Layered Patina Texture:** A full-page overlay of CSS noise (using a tiny base64-encoded noise PNG at 4% opacity, blended via mix-blend-mode: multiply) gives every surface the gritty texture of a concrete wall. This texture is not uniform -- it is heavier on darker surfaces and lighter on pale ones, achieved through multiple overlapping noise layers at different opacities. 6. **Crown Motifs:** Small three-pointed crowns (a signature element of Basquiat and a common graffiti tag element) appear as SVG icons next to section headings, rendered in #B85C3A. These crowns are not decorative afterthoughts; they function as hierarchical markers, with larger crowns for primary sections and smaller ones for subsections. ## Prompts for Implementation **Full-Screen Narrative Opening:** The site opens to a full-viewport hero block with a background of #2A1B0E (Burnt Espresso). For the first 800ms, the screen is dark and silent. Then, the wildstyle letter-forms of "OPENSOURCE" begin to draw themselves in from the center outward, using SVG stroke-dasharray and stroke-dashoffset animation. The letters are outlined in #C8A96E at first -- just the wireframe skeleton of the piece. Over the next 2 seconds, the fill floods in from bottom to top (CSS clip-path animation on each letter), and the 3D block shadows drop into place with a slight elastic overshoot (cubic-bezier(0.34, 1.56, 0.64, 1)). Below the main piece, ".bar" appears in Commissioner at weight 300, 2rem, #8B7355, fading in with opacity and a 20px upward translate. Once the hero animation completes, the flowing curve extensions begin their slow, continuous oscillation -- SVG paths with CSS animation that shifts control points by 2-5px over 25-second cycles, creating the illusion of liquid paint. **Zoom-Focus Interaction Pattern:** The primary interaction pattern is **zoom-focus** -- when a user engages with any content block (hover on desktop, tap on mobile), that block scales to 1.03x its original size over 400ms (ease-out), its border shifts from #2A1B0E to #C8A96E, and the surrounding blocks dim to 70% opacity with a 200ms transition. This creates a spotlight effect: the active block "pulls forward" in z-space while everything else recedes. On mobile, a second tap on the focused block returns it to normal state. For text content within focused blocks, a secondary zoom-focus occurs: the first paragraph increases its font-size from 1rem to 1.05rem and its line-height from 1.7 to 1.8 over 300ms, making the text physically easier to read when the user has signaled interest. This is not a layout-breaking zoom -- it is a subtle typographic breath that rewards attention. **Scroll-Driven Block Reveal:** As the user scrolls past the hero, content blocks enter the viewport using a stagger pattern unique to each column. The left column blocks slide in from the left (translateX(-40px) to 0) with 100ms stagger delay between blocks. The right column mirrors from the right. The center column blocks scale up from 0.92 to 1.0. All entrance animations use opacity 0 to 1 and last 600ms with an ease-out curve. The stagger creates a curtain-parting effect where content opens from the center outward. **Drip Animation on Scroll:** The drip elements attached to block borders are not static. As the user scrolls, the drip lengths increase proportionally to scroll velocity -- faster scrolling produces longer drips (max 80px extension), and when scrolling stops, the drips retract over 1.5 seconds with a spring-physics easing. This connects the user's physical gesture (scrolling) to the visual language of the design (paint dripping under gravity). **Block Navigation System:** Navigation blocks are modular-block elements with rotated text (writing-mode: vertical-rl). On hover, the text rotates back to horizontal (writing-mode: horizontal-tb) over 500ms while the block expands its width from 60px to 200px, revealing the full navigation label and a small crown icon. The block's background shifts from #6B5744 to #C8A96E. This transformation turns navigation from a subtle environmental element into an active interface component, only when needed. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, generic card patterns with icon/title/description stacks, testimonial carousels, team photo grids, newsletter signup modals. This is a narrative environment, not a conversion funnel. **Bias toward:** Full-screen immersive experiences, environmental storytelling where the interface IS the content, animation that reinforces the graffiti metaphor (drawing, dripping, layering), and interactions that reward curiosity rather than demanding action. ## Uniqueness Notes **Differentiators from other designs:** 1. **Graffiti-Baroque Collision:** No other design in the portfolio fuses the raw visual language of wildstyle graffiti with the ornamental excess of Baroque decoration. Graffiti appears at only 3% frequency and is never paired with opulent-grand tone (2%). This collision creates a visual tension -- illegality meeting aristocracy, spray paint on gold leaf -- that has no precedent in the existing designs. The result is a space that feels simultaneously dangerous and sumptuous. 2. **Single-Family Variable Typography:** While most designs use 2-3 different font families to create contrast, this design relies entirely on Commissioner's variable axes (weight 300-900, width adjustable) to produce all typographic variation. This creates a unified authorial voice -- every piece of text on the page comes from the same "hand" -- which reinforces the graffiti conceit where a single writer's style is recognizable across all their work. Commissioner-versatile appears at only 1% frequency in the portfolio. 3. **Zoom-Focus as Primary Interaction:** The zoom-focus pattern (1% frequency) replaces the ubiquitous scroll-triggered animation (97%) as the primary interaction model. Instead of content animating AT the user as they scroll, content waits quietly until the user actively engages, then rewards that engagement with a physical pull-forward effect. This shifts the power dynamic from the page performing for the user to the user choosing what to examine -- more akin to walking along a graffiti wall and stopping to study a particular piece. 4. **Modular-Block Non-Linear Layout:** At 7% frequency, modular-blocks avoids the near-universal centered layout (99%). The irregular block grid with its cathedral-nave proportions (wider center column flanked by narrower wings) creates a spatial experience closer to architecture than web design. Users explore the layout rather than scrolling through it. 5. **Responsive Drip Physics:** The scroll-velocity-linked drip animations create a direct physical connection between user input and visual output that goes beyond decorative animation. The drips are not ornamental -- they are responsive, dynamic, and tied to the graffiti metaphor in a way that makes the entire interface feel like a living surface. **Chosen seed/style:** aesthetic: graffiti, layout: modular-blocks, typography: commissioner-versatile, palette: sepia-nostalgic, patterns: zoom-focus, imagery: custom-illustration, motifs: flowing-curves, tone: opulent-grand **Avoided overused patterns:** Avoided centered layout (99%), mono typography (99%), warm-only palette (100%), scroll-triggered as sole animation pattern (97%), friendly tone (98%), minimal imagery (94%), playful aesthetic (95%), vintage motifs (85%). Every seed component sits below 10% frequency, with five components at 3% or below.