# Design Language for yamichika.net ## Aesthetics and Tone yamichika.net (v2) is an **Anti-Design Coastal Quarry** -- a masonry wall of marble-textured rocks that has been mis-tiled, with display-bold text plastered across every face at slightly wrong angles, painted in coastal salt-bleached blues and greens. The aesthetic is **anti-design**: refused alignments, deliberately mismatched cell sizes, oversized display-bold lettering pushed off-canvas, marble-textured rectangles cropped without ceremony, and a feeling that the entire wall was assembled by hand on a windy beach. The .net suffix is read as "fishing net" -- the holes and irregular weaves of a net cast on the shore. The tone is **playful**: this is anti-design with a beach smile. Where other anti-design pages are angry, this one is laughing -- the misalignments are clearly intentional, the colors are coastal and friendly, the display-bold type runs off the screen edge as if the wave just came in and took the letters away. Slide-reveal patterns enter each cell of the masonry, often diagonally, as if the wind blew them in. The narrative spine: a long masonry wall of 32-44 cells, each one a marble-textured chunk of "yamichika" rock, washed in coastal blues and greens. The cells are interleaved with display-bold typographic statements ("THIS IS YAMICHIKA," "CAUGHT IN THE NET," "BLUE / GREEN / FOAM") set in oversized italic display-bold faces. Nature motifs hide in each cell -- a small shell, a feather, a piece of driftwood drawn in line-art. The visitor's job is to walk the irregular wall, scrolling slowly through 800-1200vh. ## Layout Motifs and Structure The composition is a **masonry** layout -- a 5-column desktop masonry grid (3-col tablet, 1-col mobile), but with intentional column misalignments: columns 2 and 4 are shifted vertically by 60-120px relative to columns 1, 3, 5. The grid breaks its own rules. Cells range in size from tiny (1x1, ~180px square) to enormous (2x4 vertical bars). Some cells overflow the masonry frame entirely -- a few oversized display-bold strings extend 200-300px beyond the right edge of the layout, cropped by the viewport's right boundary. **Macro structure:** - **Threshold (Section 0, 90vh):** A wide field of coastal-blue, with the wordmark "YAMICHIKA.NET" set in display-bold italic at the top-left, sized 240px and deliberately overflowing the right edge (only "YAMICHIKA.N" is visible, the "ET" continues off-screen). Below, a misaligned subtitle "the irregular wall, the wet net" in 28px upright bold. - **Masonry Wall (Section 1, scrolls 800-1200vh):** The masonry of 32-44 cells. Cell types are interleaved: - **Marble-rock cells (50% of cells):** Rectangular cells of marble-texture imagery, each photographed (rendered) as a chunk of seafoam-green and coastal-blue marble with white veining. Cells are not all the same shape -- some are tall, some wide, some square. - **Display-bold typographic cells (25%):** Oversized italic display-bold strings ("CAUGHT," "NETS," "BLUE FOAM," "YAMICHIKA"), each filling its cell at 120-200px sizes, sometimes intentionally clipped by the cell's edges. - **Nature-motif cells (15%):** A line-art shell, feather, driftwood, sea-pebble, or seaweed sprig in each, drawn in thin 1.5px line on a soft cream ground. - **Empty negative cells (10%):** Pure cream or pure coastal-blue cells with nothing in them -- the wall's accidental gaps. - **Wave Break (Section 2, 70vh):** A single full-width display-bold quote: "AND THE NET CAME UP FULL OF FOAM" set at 180px, italic, intentionally rotated 1.8 degrees counter-clockwise. The text overflows the screen left and right. - **Second Wall (Section 3, scrolls 600-800vh):** A continuation of the masonry, with more marble-rocks and more nature-motifs and one new variety: photo-treated marble cells with a slight grain overlay (texture mixed with photograph -- a coastal beach scene faintly visible beneath the marble veining). - **Closing (Section 4, 70vh):** A simple sign-off in upright bold, "yamichika.net -- see you on the wet shore," centered for once. A tiny seashell line-art in the bottom-right corner. **Spatial grammar:** The masonry refuses regular gutter spacing. Gutters vary: 8px between some cells, 24px between others, 0px (touching) for some cells, 40px (oversized) between others. The visual pattern reads as found-object assembly, not as a strict grid. Some cells overflow their column by 20-60px; some are recessed inward. The wall is uneven on purpose. ## Typography and Palette **Fonts (all Google Fonts):** - **Display bold italic:** "Bricolage Grotesque" weight 800 italic at clamp(120px, 16vw, 240px), letter-spacing -0.04em. A modern display-bold face used for the wordmark, the masonry's typographic cells, and the wave-break quote. - **Upright bold:** "Bricolage Grotesque" weight 700 (upright) at 28-44px, used for subtitles and the closing line. - **Body and small captions:** "Bricolage Grotesque" weight 400 at 14-16px, line-height 1.5. Used very sparingly -- the design has almost no body text. - **Tags and small caps:** "Bricolage Grotesque" weight 600 at 11px, letter-spacing 0.18em uppercase. **Palette (coastal-blend wheel, salt-bleached blues, greens, and warm sand):** - **Coastal blues:** #B8D8DE (sky-pale), #7FB5C0 (coastal mid), #4F8A99 (deep coastal), #2C5C6C (slate-sea). - **Sea greens:** #C8DCC5 (foam green), #92BFA0 (seafoam), #5A9579 (deep sea-green). - **Cream and sand:** #F2EDD7 (warm cream), #E5D8B0 (sand), #C9B589 (driftwood). - **Marble veining:** #FFFFFF (white veins), #2C2C2C (dark veins), with a faint #8D8779 (mineral) midtone. - **Ink (text):** #1B2D33 (deep coastal-shadow, used for all type on cream/sand backgrounds) and #F2EDD7 (warm cream, for text on deep coastal blues). **Type-color rules:** Display-bold italics in coastal-shadow #1B2D33 on cream/sand cells, in cream #F2EDD7 on coastal-blue cells. Upright bold in coastal-shadow on all grounds. The marble-texture imagery uses the full white-and-dark-veined palette over a seafoam-green or coastal-blue base. Nature-motif line-art is always in coastal-shadow #1B2D33. ## Imagery and Motifs **Core visual motifs:** - **Marble-texture imagery (imagery mandate):** The 50% marble-rock cells are rendered as marble-texture rectangles in seafoam-green or coastal-blue, with photo-realistic white and dark veining (a fine pattern of irregular cracks and mineral lines). Each marble cell is unique; veining patterns are not repeated. A few of the second-wall marble cells include a faint photographic ghost beneath the marble -- a coastal beach scene at 12% opacity, so the marble appears to "remember" the sea. - **Nature motifs (motif mandate):** Line-art illustrations of natural beach objects: shells (whorl shell, scallop, cockle), feathers, driftwood pieces, sea-pebbles, seaweed sprigs, a small crab, a sand-dollar. Each is drawn at 1.5px stroke in coastal-shadow on a cream ground. 4-7 nature-motif cells per masonry wall. The motifs are drawn slightly imperfectly -- a hand-drawn quality, not vector-clean. - **Slide-reveal entry choreography:** Each masonry cell enters with a slide-reveal -- it slides into its position from a random direction (top, right, bottom, or left, randomized per cell). The slide is 700ms with a slight overshoot (cubic-bezier(.34, 1.56, .64, 1)) -- the only "elastic" motion in the design, and it reads as wind blowing the cells in. Cells with display-bold type slide in from the right with extra emphasis (the type appears to be carried in by the wave). - **Misaligned text overflow:** Several display-bold strings deliberately overflow their cell boundaries by 60-120px. The overflow is clipped by the next cell or by the viewport edge. The wall's text never fits neatly; the visitor reads partial words. - **Mismatched gutters:** The masonry's intentional irregularity is the design's primary anti-design statement. No two adjacent gutters are the same width. The eye finds no rhythm; this is the joke and the joy. ## Prompts for Implementation **Opening narrative:** Page loads on coastal-blue #7FB5C0. The wordmark "YAMICHIKA.NET" slides in from the right edge in 1.2s, but because it is sized at 240px, only "YAMICHIKA.N" is visible at rest -- the "ET" extends beyond the right edge. The misaligned subtitle types in below (45cps). The first row of masonry cells begins entering with slide-reveals (700ms, randomized directions) over 1.8 seconds. The misalignments of column 2 and 4 are visible from the first row -- the wall starts crooked. **Scroll narrative:** As the visitor scrolls, each new row of masonry cells enters via slide-reveal from randomized directions. The reveal direction is consistent within a row (e.g., row 4 slides in from the right; row 5 from the bottom), but unpredictable across rows. The marble-texture cells reveal their veining last, after the cell shape has slid in -- the veining "paints in" over 600ms with a left-to-right brush stroke. **Display-bold typographic cells:** When a display-bold cell enters, it slides in from the right at full size, then the cell crops it (the visitor reads only the part that fits). On hover (or on dwell), the cell horizontally scrolls itself, revealing the rest of the word over 1.2s before resetting. This is the design's primary interactive joke -- the wall is hiding letters that you can coax out. **Nature-motif cells:** Line-art nature motifs draw themselves via SVG path stroke over 1.4-2.0s when they enter viewport. Each motif's stroke order is varied (the shell starts from its center spiral, the feather starts from its spine, the driftwood starts from one end). **Wave Break section:** The full-width quote enters with a slow horizontal slide from the right (1.6s), arriving at its 1.8-degree counter-clockwise rotation. The quote holds for 2 seconds before scroll continues. **Avoid:** No buttons, no nav, no menu, no CTAs, no pricing, no testimonials, no stat blocks. No video. No glossy buttons or pills. No drop shadows. No round corners on cells -- everything is hard-cornered. No clean photography -- only marble texture (with optional photo ghost beneath). **Tone in motion:** Wind-blown, slightly elastic, playful. Curves are cubic-bezier(.34, 1.56, .64, 1) for cell entries (slight overshoot like wind catching a flag) and cubic-bezier(.4, 0, .2, 1) for text scroll-reveals. Nothing pops urgently; everything blows in. ## Uniqueness Notes **Differentiators from other designs:** 1. **Coastal-blend anti-design:** Anti-design (2% aesthetic) paired with coastal-blend (3% palette) is unique in the corpus. Anti-design is normally aggressive; here it is wind-blown and salt-bleached. 2. **Masonry with intentional column misalignment:** Masonry (3% layout) with columns 2 and 4 vertically shifted, irregular gutters, and overflow clipping. This is masonry as anti-design, not as Pinterest grid. 3. **Display-bold with intentional clipping:** Display-bold typography (3%) deliberately oversized so that words overflow their cells and viewport. The visitor reads partial words; full words reveal on hover via horizontal slide. 4. **Marble-texture as primary imagery:** Marble-texture (4% imagery) used as 50% of all cells -- not as a decorative accent but as the page's substrate. Coastal-marble (seafoam-green and coastal-blue marble) is a chromatic invention. 5. **Slide-reveal with randomized directions:** Slide-reveal (5% patterns) with each cell sliding in from a random direction per cell, simulating wind. No parallax (94% AVOIDED), no scroll-triggered fade (33% AVOIDED). 6. **Nature motifs as hand-drawn line-art:** Nature (24% motifs, common) used in an uncommon way -- as small hand-drawn line-art line-illustrations of beach objects, scattered throughout the masonry rather than as a single hero illustration. **Chosen seed:** aesthetic: anti-design, layout: masonry, typography: display-bold, palette: coastal-blend, patterns: slide-reveal, imagery: marble-texture, motifs: nature, tone: playful. **Avoided patterns from frequency analysis:** parallax (94%), scroll-triggered (33%), card-grid (90%), centered (94%), photography (90% -- used only as faint ghost beneath marble), mysterious-moody (71%), warm palette (92%) -- design is cool coastal. Mono typography (82%) entirely AVOIDED.