# Design Language for docomade.com ## Aesthetics and Tone Docomade.com is a neubrutalist hexagonal control surface for navigating a foggy, frosted, half-encrypted archive. The name "doko made" (Japanese: "how far?") frames the page as a journey of unknown depth. The aesthetic is raw and structural - thick 4px outlines, exposed labels, condensed typography - but every surface is frosted and translucent, like control panels glimpsed through a layer of breath on cold glass. Tone is mysterious-moody: the visitor is invited to discover, but the page volunteers nothing. Each hexagonal cell hides its content behind a skeleton-loading shimmer that resolves only when prompted. Inspiration draws from speculative-architecture renderings of Liam Young, the data terminals in Annihilation, frost-etched Russian metro tile murals, and the polygon-mesh diagnostics of early Mars rovers. ## Layout Motifs and Structure The page is a hexagonal honeycomb: 19 hex cells tiled across the viewport in a 4-3-4-3-4-1 staggered offset (mobile reduces to 2-1-2-1...). Each hex is a frosted translucent panel with a thick neubrutalist outline. The central hex carries the page title and a single hovering glyph; surrounding rings carry archive shards (each shard a one-line cipher in condensed type with a skeleton shimmer until interacted with). The composition fills 100vh on first load and continues into a second 100vh layer below that mirrors the honeycomb, rotated 90 degrees. Hovering a hex causes adjacent hexes to dim 50%, creating a focused-search illusion. No headers, no nav - just the comb. ## Typography and Palette Headlines use Oswald Bold at clamp(2rem, 5vw, 4rem), tightly condensed weight 700, letter-spacing -1%, all uppercase. Subheads use Oswald Light at 1.1rem, uppercase, letter-spacing 0.12em. Body copy is set in Barlow Condensed Regular at 0.95rem with 1.5 line-height. Cipher labels and metadata use Oswald ExtraLight at 0.72rem with letter-spacing 0.18em. Palette is translucent frost: deep-fog #1F252C (page background), frost-ice #B8D4DC at 18% opacity (hex panel fills), mist-white #ECF2F5 at 55% opacity (hover state), ink-charcoal #0A0C10 for borders and type, accent ice-blue #4FB8D8 (used only on active skeleton-loading shimmer), and one warm spark #FFB85C reserved for the page's single revealed secret hex. Every border is solid 4px #0A0C10 with backdrop-filter blur(16px). ## Imagery and Motifs Imagery is organic-blobs: amorphous frost-shaped blobs (8-12 of them) drifting behind the honeycomb at 30% opacity, never coming into focus, suggesting half-formed organisms in the fog. Motifs reference tech: PCB trace lines snaking between hexes as thin 1px paths, vector arrows pointing inward toward the central hex, and isometric microchip glyphs as cipher decoration. Decorative dingbats include hex-shaped chips (small 4px hexagons) and circuit-node dots. A recurring "DOKO MADE?" wordmark appears rotated 90 degrees at the right edge of the viewport. ## Prompts for Implementation Build docomade.com as a frosted hexagonal archive interface. Implement skeleton-loading on every hex from page load: thin diagonal shimmer bars sweep across the frosted backdrop-filtered surface from top-left to bottom-right over 2.4s cycles, paused only on the central hex. Hovering a hex causes its shimmer to halt, the cipher inside to "resolve" (a typewriter-effect 800ms reveal of its actual label), and adjacent hexes to fade to 30% opacity. Implement parallax on the organic-blob backdrop with 25% scroll speed; blobs morph their clip-paths over 18-second loops. PCB traces between hexes path-draw on initial load over 2.2s. Cursor over hexes becomes a small hex-shaped reticle. Avoid CTA banks - instead, the visitor is guided by the single warm-spark hex revealed only after they hover 8 different hexes (tracked in JS); when revealed, that hex slowly expands into a full-bleed content panel. The narrative should feel like decrypting a forgotten observatory's archive: shimmer, reveal, fog, repeat. End the page with the cipher question "DOKO MADE?" - how far did you come? ## Uniqueness Notes - Builds a 19-hex honeycomb interface where 18 hexes hide ciphers behind skeleton-loading shimmer until interacted with, revealing the single "warm spark" hex only after 8 unique hovers. - Combines neubrutalist 4px outlines with backdrop-filter frosted translucent panels - hard structure over soft fog. - Treats skeleton-loading not as a pre-content state but as a permanent visual rhythm pulsing across the entire interface. - Chosen seed/style: neubrutalism aesthetic, hexagonal-honeycomb layout, condensed typography, translucent-frost palette, skeleton-loading pattern, organic-blobs imagery, tech motifs, mysterious-moody tone. - Frequency analysis avoidance: sidesteps overused mono typography (82%), centered/card-grid layouts (96%/93%), warm-gradient palettes (95%/78%), photography imagery (90%), parallax-as-default (96%). Leans into underused hexagonal-honeycomb (4%), skeleton-loading (1%), translucent-frost (2%), organic-blobs (6%), condensed typography (14%), and neubrutalism (1%).