# Design Language for yamichika.com ## Aesthetics and Tone yamichika.com (v2) is a **Bauhaus Chrome Foundry** -- a centered single-figure manifesto rendered as a 1924 Dessau workshop catalog stamped in liquid chrome. The aesthetic is **bauhaus** but cast in metal: primary geometric shapes (the circle, the square, the triangle) are the page's entire vocabulary, but every shape is rendered in chrome-metallic finish -- polished, brushed, hammered, oxidized -- against a centered composition of generous reading space. The .com suffix is read as the most ordinary of suffixes, deliberately stripped of any pretension; this is yamichika *the foundry*, a workshop where chrome shapes are forged. The tone is **grounded-earthy**: the chrome is heavy, honest, made of real metal, not a digital effect. The geometric language is bauhaus -- the three primaries, the strict horizontals and verticals, the Albers-like color squares -- but the materials are earth-forged. The result is a metal-shop bauhaus, not a school-of-design bauhaus. Stagger patterns govern the entry of every chrome shape, like castings being placed one by one on a workshop bench. Circuit motifs hide as tiny brass-pin patterns on each chrome plate. The narrative spine: a single centered manifesto, top to bottom, structured as a Bauhaus catalog of seven chrome objects: Circle, Square, Triangle, Bar, Ring, Hemisphere, and the composite "Yamichika." Each chrome object is photographed (well, rendered to look photographed) on a soft oxidized-copper paper ground, with an elegant-serif caption beneath it. The visitor reads the catalog one object at a time, scrolling down a long quiet column. ## Layout Motifs and Structure The composition is a **centered** layout -- a single narrow vertical column (max-width 720px) running the spine of the page, with each chrome shape rendered large at the center of its section and the caption beneath. The centered layout (94% category, overused in the corpus) is here used differently: not as a hero-card-grid, but as a literal foundry catalog spine -- every object centered like a museum plinth. **Macro structure:** - **Threshold (Section 0, 90vh):** A wide oxidized-copper field with the wordmark "YAMICHIKA" set in elegant serif at center, 96px italic, with a single hairline 1px rule beneath. Below the wordmark, in small Roman type: "the chrome catalog." A small chrome triangle (the bauhaus primary) sits 100px below the rule, polished and reflective. - **Seven Chrome Objects (Sections 1-7, 110vh each):** Each section presents a single chrome shape centered: - **Section 1: CIRCLE** -- a brushed-chrome disc, 480px diameter, with a soft reflective gradient. - **Section 2: SQUARE** -- a polished-chrome square, 420px, with sharp 90deg corners and chrome bevel edges. - **Section 3: TRIANGLE** -- an equilateral chrome triangle, 480px on a side, oxidized at the points. - **Section 4: BAR** -- a horizontal chrome bar, 640px x 80px, hammered finish. - **Section 5: RING** -- a chrome torus seen from above, 480px outer, 240px inner. - **Section 6: HEMISPHERE** -- a chrome hemisphere, 480px diameter, casting a soft shadow. - **Section 7: YAMICHIKA** -- a composite chrome figure assembling all six prior shapes into one: a hemisphere atop a bar, a circle inscribed in a square, a triangle balanced on the ring's edge. The capstone of the catalog. Each section's caption is a 4-6 line elegant-serif paragraph centered beneath the object, describing the shape's geometry and the philosophy of its forging. - **Composite Bridge (Section 8, 70vh):** A single quiet caption page with no chrome object -- only a 4-paragraph elegant-serif essay on the bauhaus principle of "form fully expressed." - **Colophon (Section 9, 60vh):** A small chrome triangle (the threshold's triangle, now smaller), an italic serif colophon, and a 1px chrome rule. **Spatial grammar:** The page is strictly centered. Every chrome object is centered horizontally and vertically within its 110vh section. The caption text is centered beneath the object, with 64px between object and caption. The reading column is 720px max-width and never breaks. Section boundaries are marked by a single 1px chrome rule. There is no horizontal navigation, no sidebar, no grid -- the centered spine is the whole architecture. ## Typography and Palette **Fonts (all Google Fonts):** - **Display titles (section labels):** "Cormorant Garamond" italic weight 500 at clamp(36px, 4.6vw, 72px), letter-spacing 0em. An elegant-serif used for the wordmark and the section labels ("I. CIRCLE," "II. SQUARE," etc.). - **Body text (captions):** "Cormorant Garamond" weight 400 at clamp(17px, 1.3vw, 19px), line-height 1.78. Used for all caption paragraphs. - **Section numerals:** "Cormorant Garamond" italic weight 600 at 14-15px, tracking 0.18em. - **Small caps colophon:** "Cormorant SC" at 11px, tracking 0.22em. **Palette (chrome-metallic, eight stops dark-to-light, plus oxidized copper ground):** - **Oxidized copper ground:** #C9876D (warm copper), #A06848 (oxidized copper), #834F33 (deep copper) -- the page is a copper foundry-floor color. - **Chrome highlights:** #F4F3F0 (chrome-white), #E0DCD6 (chrome-light), #B8B3AB (chrome-mid). - **Chrome shadows:** #5C5750 (chrome-shadow), #2A2620 (chrome-deep), #0F0D0A (forge-black). - **Brass accents (circuit motifs only):** #C9A66B (warm brass). - **Ink:** #2A2620 (deep chrome-shadow, used for body text on copper ground) and #F4F3F0 (chrome-white, for text on chrome surfaces if any). **Type-color rules:** All elegant-serif text in chrome-shadow #2A2620 on the oxidized-copper ground. Section labels in italic, same color. The chrome objects themselves render as a 5-stop chrome-metallic gradient (chrome-white at the top highlight, chrome-light at the upper mid, chrome-mid at the equator, chrome-shadow at the lower curve, chrome-deep at the bottom). Brass accent reserved exclusively for the tiny circuit-motif patterns on each chrome plate. ## Imagery and Motifs **Core visual motifs:** - **Abstract-shapes imagery (imagery mandate):** Six chrome primary shapes plus the composite. Each shape is rendered with a deep chrome-metallic gradient (5-stops) that simulates a polished metal surface seen under workshop lighting. The shapes have a single soft drop shadow (32px blur, 20% opacity) on the copper ground beneath them. Each shape carries one realistic surface treatment: the circle is brushed (faint horizontal striations), the square is polished (mirror-like), the triangle is oxidized at its three points (a tarnish of bluish-purple), the bar is hammered (small visible dimples), the ring is honed (smooth fine grain), the hemisphere is polished (mirror-like with a single specular highlight). The composite figure shows all six finishes together. - **Circuit motifs (motif mandate):** A tiny circuit pattern in brass #C9A66B is etched onto each chrome plate at the lower-right corner. The circuit is a small (32x32px) abstract trace pattern -- a few brass dots connected by thin lines, resembling a foundry serial-number stamp. Each section's circuit pattern is different; each is barely visible (20% opacity). The circuit is the foundry's hidden signature. - **Stagger entry choreography:** Each chrome object enters its section with a stagger: first the shape's outline draws in (700ms SVG stroke), then the chrome gradient fills from top to bottom (1.0s), then the surface treatment overlays (texture, brush marks, oxidation) at 200ms cascades (300ms total), then the drop shadow fades in (400ms), then the brass circuit motif fades in last (600ms). The total entry per shape is approximately 2.6 seconds -- slow enough to feel like a casting being placed on the bench. - **Hairline chrome rules:** Section boundaries are marked by single 1px chrome rules that draw themselves left-to-right over 800ms when the section comes into view. - **Soft reflections beneath shapes:** Each chrome object casts a soft reflection on the copper ground beneath it -- a faint 30% opacity mirrored gradient extending 80-120px downward and fading to nothing. ## Prompts for Implementation **Opening narrative:** Page loads on oxidized-copper #A06848. The wordmark "YAMICHIKA" fades in over 1.2s at center. The 1px chrome rule beneath draws itself left-to-right over 700ms. The small "the chrome catalog" line fades in. The chrome triangle at the bottom enters with the full stagger sequence -- outline draws in 700ms, chrome fills top-to-bottom 1.0s, oxidation tarnish at the points appears 200ms cascade, soft shadow fades in. The threshold holds quiet for 1.4 seconds. **Scroll narrative:** As the visitor scrolls into each chrome object's section, the section's 1px chrome rule draws in first (800ms). Then the section numeral "I. CIRCLE" fades in (400ms). Then the chrome shape executes its full stagger entry (~2.6s total): outline, chrome gradient fill, surface treatment, drop shadow, circuit motif. The elegant-serif caption fades in last, paragraph by paragraph (260ms intervals). **Hover and idle:** The chrome objects do not respond to hover -- they are forged metal, not interactive elements. They rest. On idle (no scroll for 8s), one random chrome plate's surface highlight slowly drifts (a slight 4-second shift in the specular highlight position), suggesting the lighting in the workshop has changed. **Composite reveal (Section 7):** The composite chrome figure enters with a special extended stagger -- each of the six prior shapes flies in from its respective prior section's vertical position (hemisphere from Section 6, ring from Section 5, etc.) and assembles into the composite over 4.4 seconds. This is the catalog's final cadence. **Avoid:** No buttons, no nav, no CTAs, no pricing, no testimonials, no stat blocks, no contact forms. No video. No icons except the brass circuit motifs. No round buttons or pills. No flat shape illustrations -- every shape is rendered with full chrome-metallic gradient. No raster photography. **Tone in motion:** Heavy, deliberate, foundry-paced. Curves are cubic-bezier(.4, 0, .2, 1). Each stagger is 200ms intervals -- a steady drumbeat, not a bounce. Nothing pops; nothing swings; the chrome rests. ## Uniqueness Notes **Differentiators from other designs:** 1. **Bauhaus rendered in chrome:** Bauhaus aesthetic (2%) is normally rendered in flat primary colors (red-yellow-blue). Here it is rendered in chrome-metallic gradients -- bauhaus geometric language cast in metal. No other site in the corpus pairs bauhaus with chrome-metallic palette. 2. **Centered layout as foundry catalog spine:** Centered (94% overused in corpus) is normally used as a card-grid hero. Here it is a vertical museum plinth catalog -- single chrome object per centered section, no grids, no cards. The centered axis becomes a literal catalog spine. 3. **Chrome-metallic palette (2% palette) at full commitment:** Eight chrome stops plus oxidized copper, with brass reserved only for tiny circuit motifs. The palette is forged, not painted. 4. **Stagger as foundry choreography:** Stagger (36% patterns) used as a multi-stage chrome-casting sequence -- outline, fill, surface treatment, shadow, circuit signature. Stagger as material-application order, not as UI cascade. 5. **Circuit motifs as foundry serial-stamp:** Circuit (6% motifs) used as a tiny brass-foundry signature on each chrome plate -- a hidden serial-mark in the lower-right corner. Not as decorative tech-pattern. 6. **Grounded-earthy with chrome:** Grounded-earthy tone (3%) achieved through honest oxidized-copper ground and physical chrome-metal rendering, not through soft browns or beiges. The earthiness is the foundry floor. **Chosen seed:** aesthetic: bauhaus, layout: centered, typography: elegant-serif, palette: chrome-metallic, patterns: stagger, imagery: abstract-shapes, motifs: circuit, tone: grounded-earthy. **Avoided patterns from frequency analysis:** parallax (94%), scroll-triggered (33%), card-grid (90%), photography (90%), mysterious-moody (71%), gradient palette (75%) -- the design uses gradient only on chrome surfaces, never as flat color background. Mono typography (82%) entirely AVOIDED.