# Design Language for yami.party ## Aesthetics and Tone yami.party (v2) is a **Brutalist Honey Festival** -- a heavy-set masonry wall of party photographs and Garamond lullabies, plastered to a raw concrete page like the morning-after bulletin board outside a beekeeper's town hall. The aesthetic is **brutalist** but inverted: not gunmetal and shouting, instead warm honeyed cream walls, blunt slab borders, hand-stamped Garamond classical headlines printed too large, and a feeling of communal optimism in the bones. The .party suffix is read in its older sense -- a "political party," a "party of pilgrims," a gathering -- so the page is a town-square noticeboard rather than a club flyer. The tone is **optimistic-bright**: brutalism with sunshine. Every block of concrete is washed in honeyed neutrals -- raw oat, beekeeper amber, beeswax, parchment. The masonry grid is unapologetically heavy, with 6px solid black borders dividing every cell, but each cell is bright, generous, and hopeful. Photography sits inside the cells like portraits taped to a community bulletin. Garamond classical italics declare the day, the time, the names of the gathered. Border-animate motion crawls slowly around every cell's edge, drawing the eye from one photograph to the next as if a brass ribbon is tying the wall together. The narrative spine: yami here is the deep golden-brown of buckwheat honey, and the party is a slow open house. Visitors arrive cell by cell. A flowing-curve motif loops behind the masonry like a piece of ribbon caught on a nail. The photography is not glossy editorial; it is communal, candid, slightly grainy -- the kind of photographs that get printed at the corner shop and pinned with thumbtacks. This is a brutalist that loves people. ## Layout Motifs and Structure The composition is a **masonry** layout -- a 4-column desktop masonry grid (3-col tablet, 1-col mobile) of variable-height cells, each cell bordered with a 6px solid concrete-black slab on all four sides. Cells range from 1:1 to 4:5 to 3:7 portrait, and a few wide 16:9 cells span two columns. Every cell carries the same heavy border treatment; no cell is "more important" than another. It is a wall, not a hierarchy. **Macro structure:** - **Hoarding (Section 0, 70vh):** A full-width brutalist header reading "YAMI / PARTY" in massive Garamond italic stacked over two lines, set against a beeswax wall. Below the words, a single concrete-black 8px rule and a single Garamond italic line: "the noticeboard, may 12th, all welcome." A flowing-curve ribbon (golden-amber, 4px stroke) loops once behind the wordmark. - **The Wall (Section 1, scrolls 400-600vh):** The masonry grid of 24-32 cells. Each cell contains either: a photograph of the gathering (candid, slightly grainy, honeyed-neutral toned), a Garamond italic dispatch (3-6 lines), a single oversized initial cap (drop-cap style), or a small flowing-curve motif. Cells are interleaved without clear grouping -- like notices on a real bulletin board. Every cell border animates a slow border-animate sweep on hover (a brass-amber light tracing the 4 sides at 1.6s per loop, never repeating direction). - **The Bridge (Section 2, 40vh):** A single full-width cell breaking out of the masonry, with one large Garamond italic pull-quote: "we counted twelve hundred, and still the door was open." Two flowing-curve ribbons loop behind the quote, both in golden-amber. - **The Wall, Resumed (Section 3, scrolls 300-500vh):** A second masonry block of 18-24 more cells, mostly photographs and signed dispatches. - **Footer (Section 4, 30vh):** A heavy 12px concrete-black rule edge-to-edge, then a single Garamond italic colophon line, then a final 4px rule. **Spatial grammar:** 18px gutters between every cell -- never variable. 6px black borders on every cell -- never broken. The masonry packs tightly with no diagonal gaps; cells stack into the gaps like a Tetris of brutalist concrete. The hierarchy is established by the slab-thickness of borders (Hoarding has 12px borders, Wall has 6px, footnotes have 2px). The flowing-curve ribbons never enter cells -- they only loop in the wall's negative space between cells. ## Typography and Palette **Fonts (all Google Fonts):** - **Display Garamond:** "Cormorant Garamond" italic weight 500 at clamp(72px, 11vw, 220px), letter-spacing -0.02em. Used for the Hoarding wordmark and the section pull-quotes. The Garamond italic at brutalist scale is the visual signature of the entire page. - **Dispatch body:** "Cormorant Garamond" italic weight 400 at clamp(18px, 1.6vw, 28px), line-height 1.5. Used for all in-cell dispatches and the bridge pull-quote. - **Drop-caps:** "Cormorant Garamond" weight 700 (upright, not italic) at 200px, set within a cell with the body wrapping around it. - **Sub-labels and metadata:** "Cormorant Garamond" small caps at 13px, tracking 0.18em. Used for cell dates, names, and the footer colophon. **Palette (honeyed-neutral wheel, eight stops oat-to-amber, plus brutalist concrete):** - **Wall and ground:** #F4ECD8 (oat-cream), #EBDEC0 (beeswax), #DCC79A (parchment-honey). - **Honey accents:** #C99A4B (buckwheat-amber), #A87422 (deep-honey), #7C5012 (burnt-honey). - **Concrete (borders only):** #15110A (concrete-black) used for all 6px borders and the 8/12px section rules. - **Ribbon flourish:** #E0AC4B (brass-ribbon) used only for flowing-curve ribbons and border-animate sweeps. - **Photo-treatment:** All photographs duotoned to #15110A shadow and #F4ECD8 highlight, with a subtle warm #C99A4B midtone, slightly grainy. **Type-color rules:** Garamond italics always render in concrete-black #15110A on oat/beeswax cells, and in oat-cream #F4ECD8 on buckwheat-amber cells. Drop-caps render in deep-honey #A87422 with concrete-black outline. Small-caps metadata renders in burnt-honey #7C5012. ## Imagery and Motifs **Core visual motifs:** - **Photography imagery (imagery mandate):** Communal candid photographs from a fictional honey-themed gathering -- portraits of people in soft midday light, hands holding glass jars of comb, a long table set with cloth, an open door framed by climbing roses. Every photograph is duotoned honeyed-neutral (concrete-black shadow, oat-cream highlight) with a faint grain. The photographs are 60-65% of the cells in the masonry; the rest are typographic or ribbon cells. Photographs sit edge-to-edge inside their 6px slab borders -- no inner padding, no rounded corners. - **Flowing-curve motifs (motif mandate):** A single flowing brass-ribbon curve appears in three locations: behind the Hoarding wordmark (one loop), behind the Bridge pull-quote (two loops crossing), and weaving between the rightmost three cells of the second masonry block (one long ribbon). The ribbon is always 4px stroke, brass-amber, with a 1px concrete-black stroke beneath it for a brutalist outline. The ribbon never enters a cell. - **Border-animate sweeps:** Every cell, when hovered, animates a brass-ribbon light tracing all four sides over 1.6 seconds. The animation runs once and stops; it does not loop unless hovered again. The sweep direction is consistent (always clockwise starting from top-left). The thickness of the sweep is 2px, layered atop the 6px concrete-black border. - **Drop-cap initials:** Three cells in each masonry block contain only a single drop-cap initial (e.g., "Y", "P", "&") set in 200px Garamond bold, deep-honey. These cells are the ornaments of the wall -- like illuminated capitals in a community chronicle. - **Slab rules:** The hierarchy is given by horizontal concrete-black slab rules: 12px at section breaks, 8px at the hoarding, 6px on cell borders, 2px on the colophon. Never any other thickness. ## Prompts for Implementation **Opening narrative:** Page loads on oat-cream #F4ECD8 ground. Over 1.2s, the brutalist Hoarding header "YAMI / PARTY" drops in from the top in a heavy slab-fall motion (each line falls 32px and lands with a 80ms hard stop, no bounce). The flowing brass-ribbon curve behind the wordmark draws itself via SVG path stroke in 1.4s, brass-amber. The "may 12th, all welcome." line types in via a fast typewriter (45cps). The 8px concrete-black rule slides in from the left edge over 600ms. **Scroll narrative:** As the visitor scrolls into the masonry wall, cells enter in a border-animate cascade: the 6px concrete border draws itself around each cell in a 700ms sweep (top-left to clockwise), then the cell content fades in over 400ms inside the now-bordered frame. Cells in the same horizontal "row" of the masonry enter at the same scroll trigger but with a 120ms left-to-right stagger. The flowing-ribbon between cells draws itself as a continuous SVG path over 2 seconds. **Hover and idle:** On hover, a cell's brass-ribbon border-animate sweeps once around the slab in 1.6s. Photographs slightly desaturate (5%, no scale, no lift). Drop-caps tilt 1.5 degrees on hover -- the only tilt anywhere in the design. On idle (no scroll for 9s), one random cell in the visible region animates a single border-animate sweep, as if the bulletin board is being checked by an unseen hand. **Bridge pull-quote:** As the bridge section enters viewport, the Garamond italic line is revealed word by word in a 1.8s sequence -- each word fades in at 110ms intervals. The two flowing-curve ribbons behind the quote draw themselves in opposite directions simultaneously over 2.2s. Hold for 1.4s, then the cell exits naturally with scroll. **Avoid:** No buttons, no nav, no menu, no pricing, no RSVP forms, no stat blocks, no testimonials, no CTAs. No video. No icons. No round corners anywhere -- everything is a hard right angle slab. No drop shadows on cells (the 6px concrete border is the only shadow); only the ribbon has a faint 1px outline. **Tone in motion:** Heavy slab drops, smooth border sweeps, gentle ribbon draws. Curves are cubic-bezier(.4,.0,.2,1). Garamond pull-quotes word-cascade. Nothing pops, nothing parallaxes, nothing slides sideways. The wall stays still; only the brass-amber light moves across it. ## Uniqueness Notes **Differentiators from other designs:** 1. **Sunshine brutalism:** Brutalism (4% category) is almost always pessimistic, gunmetal, or shouting. Here it is honeyed, optimistic-bright, communal. 6px concrete-black slab borders enclose warm beeswax cells. No other site in the corpus pairs brutalist with optimistic-bright. 2. **Garamond italic at brutalist scale:** Cormorant Garamond italic set at 220px is the page's defining contrast -- classical Garamond classical italic (3% typography) at architectural scale, anchoring brutalist slab borders. 3. **Masonry as a town-square bulletin:** Layout 3% (masonry) used as a literal community noticeboard with photographic dispatches and brass-ribbon flourishes. The bulletin-board metaphor reframes masonry from "Pinterest grid" to "communal chronicle." 4. **Border-animate as the entry mechanic:** Patterns 4% (border-animate) is the page's primary animation; every cell enters by having its border drawn, then its content fades in. No parallax (94% AVOIDED), no scroll-triggered card scale-ins (33% AVOIDED). The border is the reveal. 5. **Flowing-curve ribbon as architectural punctuation:** The single brass-ribbon curve (3% motifs flowing-curves) appears only three times, always between cells, never within them. It is the page's only curve -- everything else is a slab. 6. **Honeyed-neutral palette (2% category):** Eight honey stops with brutalist concrete-black borders is rare in the corpus. Warm palette (92% overused) is here a specific honeyed-neutral, not a generic warm wash. **Chosen seed:** aesthetic: brutalist, layout: masonry, typography: garamond-classic, palette: honeyed-neutral, patterns: border-animate, imagery: photography, motifs: flowing-curves, tone: optimistic-bright. **Avoided patterns from frequency analysis:** parallax (94%), scroll-triggered (33%), card-grid (90%), centered (94%), mysterious-moody (71%), gradient palette (75%, the design uses no gradients at all), mono typography (82%).