# Design Language for yamichika.com ## Aesthetics and Tone yamichika.com ("dark/underground" -- 闇地下, "yami" = darkness, "chika" = below/subterranean) is a **mcbling-aesthetic** invitation to a fictional after-hours establishment: an underground archive of nocturnal curiosities, half lounge, half cabinet. The mood is **mysterious-moody** -- not gothic horror, but the smoky charisma of a speakeasy at 2am, where velvet booths catch lamplight and conversations linger in low registers. McBling here is reinterpreted through a noir lens: the rhinestone glamour of mid-2000s pop is dimmed, the chromed gradients darkened to copper, the glitter reduced to faint flecks of brass against indigo. Garamond serifs lend the page the gravitas of a vintage literary club menu, while a complementary palette of deep midnight teal and warm burnt-amber creates dramatic visual tension -- like a single candle in a cavernous cellar. Retro-pattern motifs (Art Deco fan shapes, harlequin diamonds, vintage damask flourishes) appear as background ornamentation, and a fine noise texture overlays everything to suggest aged paper, smoke residue, and analog film grain. ## Layout Motifs and Structure The page is organized as a **card-grid** "catalog of subterranean offerings" -- but the cards are not flat business tiles; they are presented as if pages from a vintage scrapbook or a loose deck of tarot-sized cards arranged on a velvet table. This twists the overused card-grid pattern toward something tactile and editorial. **The Threshold (Hero):** The first viewport is a single full-width "frontispiece" -- a centered hero card framed by an Art Deco border (SVG ornamental corners). The domain "yamichika" appears in large Garamond italic at `clamp(3.5rem, 8vw, 7rem)` over a deep midnight-teal field. Below the title, a small ornament (a brass ampersand, a tiny crescent moon) and a tagline in small caps. The card itself sits on a noise-textured "tabletop" background with a soft drop shadow, as if just placed there. No CTA buttons -- only a quiet "press the lantern" prompt with a small interactive flame icon. **The Catalog (Card-Grid):** Below the threshold, a 3-column desktop grid (2-col tablet, 1-col mobile) of "entry cards" -- each representing a section, story, or offering. Each card is portrait-oriented (aspect ratio 3:4, like a tarot card) with: an upper ornamental band (retro pattern in burnt amber), a Garamond serif title, a short description, and a lower "card number" in roman numerals. Cards rest on the noise-textured background with subtle outer shadows. On hover, **scale-hover** transforms the card -- it grows to 1.05x scale with a smooth 350ms cubic-bezier ease, the shadow deepens, and the retro-pattern band brightens with a soft amber glow. The cursor changes to a small magnifying-glass cursor (SVG). **The Reading Room (Long-Form Section):** Between card clusters, occasional full-width "interlude" sections appear -- horizontal velvet-textured bands containing a single Garamond pull-quote in italic with elaborate quotation marks (large gold glyphs at quarter-page size). These break the grid rhythm and act as tonal breathing space. **The Last Call (Footer):** A footer styled as a vintage menu card -- centered on a darker midnight panel with brass-amber rule lines top and bottom, an Art Deco ornament in the center, and small caps text reading the hours of operation, the establishment number, and a quiet farewell line. The whole footer feels like turning over the last page of a thin booklet. ## Typography and Palette **Typography:** - **Display/Headings:** "EB Garamond" (Google Fonts) -- a refined revival of classical Garamond with old-style figures and true italics. Used for hero title (italic, weight 500), card titles (regular, weight 500), and pull-quotes (italic, weight 400). Hero size `clamp(3.5rem, 8vw, 7rem)`. Card titles `1.4rem`, line-height 1.25. - **Body:** "Cormorant Garamond" (Google Fonts) -- a more delicate Garamond cousin with high contrast strokes for body copy and card descriptions. 1.05rem/1.7 line-height, weight 400. Italic available for emphasis. - **Small Caps / Metadata:** "Cormorant SC" (Google Fonts) -- the small-caps variant for taglines, hours, card numbers (when not roman numerals), and footer items. 0.85rem, letter-spacing 0.1em. **Palette (Complementary -- midnight teal vs burnt amber):** - **Midnight Teal (primary):** #1a3a3e -- dominant background, deep and cavernous - **Cellar Black:** #0d1f22 -- secondary darker background for footer and panels - **Burnt Amber (complement):** #c4823a -- primary accent, warm brass/copper glow - **Aged Brass:** #8a5a28 -- secondary accent, deeper amber for ornaments - **Candle Cream:** #e8d8b8 -- text on dark, warm off-white like aged paper - **Velvet Red Whisper:** #6e2a2a -- tertiary accent for rare highlights and small ornaments - **Smoke Veil:** rgba(232,216,184,0.08) -- noise overlay tint for aging - **Brass Highlight:** #d4a060 -- subtle hover glow on retro-pattern bands The midnight-teal-vs-burnt-amber relationship is the complementary spine of the palette -- they sit roughly opposite on the color wheel and create the moody dramatic contrast that defines the after-hours mood. ## Imagery and Motifs **Retro-Pattern Ornamental Bands:** Each card has an upper band (40px tall) decorated with a repeating SVG pattern. Patterns rotate across cards: Art Deco fan-shells, harlequin diamonds, repeating fleur-de-lis, vintage damask flourishes. All rendered in burnt amber on the midnight-teal card field. SVG `` elements with `` for reuse, sized at 32-48px tile. **Noise-Texture Overlay:** A full-viewport SVG turbulence overlay sits on `body::before` with `position: fixed; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0.18`. The SVG: ``. This adds smoke-and-paper-grain warmth. **Art Deco Corner Ornaments:** Four SVG ornamental corner pieces frame the hero card. They are stylized fan-shape vectors in burnt amber, mirrored across the four corners. Each corner is roughly 120px square at desktop, scaling to 60px on mobile. The lines are 1.5px thick with subtle inner shadow giving them an embossed feel. **Brass Lantern Cursor:** Inside hero and over hovered cards, the cursor changes to a custom SVG: a small lantern icon (24x24) glowing amber. Implemented via `cursor: url("data:image/svg+xml,...") 12 12, pointer`. On hover of cards specifically, cursor switches to a small magnifying glass. **Mcbling Glint (subtle):** Tiny "glint" SVG elements (4-pointed sparkle stars, 6-12px) are scattered sparsely across the hero and ornamental bands -- maybe 8 total per viewport. They animate with a gentle twinkle: `@keyframes twinkle { 0%,100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.9; transform: scale(1.1); } }` over 4 seconds with random delays. This is the "bling" element -- restrained, not overwhelming. **Roman Numeral Card Numbers:** Each catalog card has a roman numeral in the bottom-right corner (I, II, III, IV...) in Garamond italic, faded (opacity 0.5) at 1.6rem. This acts as quiet collection metadata. ## Prompts for Implementation Build the site as a **nocturnal underground catalog** -- a card-grid presentation that reads like leafing through a private membership ledger of an after-hours establishment. **Card-Grid System:** Use `display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; padding: 4rem 5vw`. Cards have `aspect-ratio: 3/4`, `background: #1a3a3e`, `border: 1px solid rgba(196,130,58,0.25)`, `box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.5)`. Card content uses internal grid: ornament-band 40px, title section 1fr, description 2fr, footer-numeral auto. **Scale-Hover Interaction:** Apply `transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 350ms, filter 350ms` to cards. On `:hover`, `transform: scale(1.05); box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 2px 6px rgba(196,130,58,0.2); filter: brightness(1.08)`. The ornament band gets `filter: drop-shadow(0 0 8px rgba(212,160,96,0.6))`. Use `will-change: transform` only on focus to avoid GPU overuse. **Noise Texture Layer:** Implement via `body::before` with the SVG turbulence filter described above. Use `mix-blend-mode: overlay` and opacity 0.18 to avoid washing out content while preserving warmth. **Retro Pattern Band:** Define SVG patterns in a hidden `` container with `` containing 3-4 named patterns. Apply via CSS `background: url(#patternId)` or directly as `` inside each card's ornament band. **Garamond Type Hierarchy:** Hero italic for poetic emphasis, regular Garamond for card titles, Cormorant Garamond for body, Cormorant SC small-caps for metadata. Use `font-feature-settings: "lnum" 0, "onum" 1` to enable old-style figures throughout for that vintage book feel. **Mcbling Twinkle Stars:** Place ~8 small 4-pointed star SVGs absolutely positioned within hero. Stagger `animation-delay` values from 0s to 3.6s. Keep `position: absolute` with random-feeling top/left percentages. **AVOID:** Bright neon Y2K saturation (this is dimmed mcbling, not full chrome), aggressive glitter/sparkle overload, heavy drop-shadow gradients, modern flat-design CTAs, scroll-jacking parallax, dark-mode-toggle gimmicks. Mood must stay velvet-cellar restrained, never costume-party loud. ## Uniqueness Notes 1. **McBling reinterpreted as nocturnal velvet rather than chrome glitter:** Mcbling aesthetic is dimmed and warmed -- copper, brass, and amber replace the typical chrome pinks and silvers, and the bling becomes restrained twinkle rather than saturated sparkle. This is mcbling at 2am instead of mcbling at noon. 2. **Tarot-card aspect ratio for grid items (3:4 portrait):** The catalog cards are not standard square or 16:9 tiles but vintage-tarot-card portrait proportions, giving each card the feel of an individual collectible artifact rather than a UI component. 3. **Roman numeral collection metadata:** Each card carries a roman numeral in the corner, framing the entire site as a "ledger" or "edition" rather than a website -- a small typographic detail that reframes the whole experience. 4. **Complementary palette anchored in deep teal (not the common warm-vs-cool-blue split):** Most complementary schemes lean into red-green or blue-orange poles; this one uses the rarer midnight-teal vs burnt-amber pairing, producing a moodier underground-jazz tonal world. **Chosen seed/style:** mcbling aesthetic, card-grid layout, garamond-classic typography, complementary palette, scale-hover patterns, noise-texture imagery, retro-patterns motifs, mysterious-moody tone. **Avoided overused patterns:** Avoided centered (high frequency), warm-only palette, mono typography, photography imagery, playful aesthetic, scroll-triggered animations, and bright/light backgrounds. Reframed the common card-grid via portrait tarot proportions, ornamental bands, and roman-numeral metadata so it does not read as a generic feature-tile layout. Embraced underused mcbling and mysterious-moody combinations.