# Design Language for kaguya.dev ## Aesthetics and Tone kaguya.dev is **a leather-bound retro developer journal** -- a split-screen workshop where the left page is a worn cordovan notebook and the right page is a tide-and-sky coastal view from the workshop window. The mood is **conversational**: a senior craftsman talking quietly to an apprentice over coffee, no slides, no slogans. Inspirations: 1970s Steelcase office brochures, the leather book bindings in Cormac McCarthy's writing room, vintage Olivetti typewriter manuals, Aaron Marcus' 1976 typographic-color-coded interface design papers, and the coastal-blue photography of Adolf Fassbender. The retro aesthetic supplies the worn leather, tabbed sections, hand-stamped inks, and slightly yellowed page edges. The split-screen lets the journal and the coast share the page: code thoughts on the left, sky on the right, with neither one shouting. The coastal-blend palette weaves leather-tan with seafoam and slate. Scale-hover interactions reward small attention: hovering on tabs nudges them slightly larger; hovering on figure plates magnifies them by 4%. The voice converses: "let's talk about why I keep coming back to this pattern." ## Layout Motifs and Structure A **split-screen** where the dividing line is a leather binding -- a 28px-wide vertical strip with stitched edges that runs the full page height down the center. - **Hero spread (110vh):** Left page: a leather-textured background (#8a4a32 with subtle leather grain) holding the wordmark "KAGUYA.DEV" stamped in bebas bold at clamp(56px, 9vw, 144px) in a slightly darker leather emboss (text appears pressed into the leather). Right page: a coastal-blue gradient (sky to sea) with a single hand-drawn lighthouse silhouette. - **Journal entries (variable height, ~130vh per entry):** Each entry is a spread. - Left page: a coded thought rendered as a notebook page with ruled lines, tabbed margin, and stamped date. Body text in slab serif on cream paper. - Right page: a "view from the window" -- a coastal photograph treated with a leather-toned duotone, or an abstract diagram of the concept being discussed. - **Tabbed sidebar (left edge, 32px-wide):** A vertical column of small leather tabs sticking out from the binding's left side, each labeled with an entry's stamped initial. Click to jump. - **Marginalia ribbons (right edge):** Thin silk-ribbon bookmarks dangling from the top of each page, in coastal-blue. - **Index spread (90vh):** Near the end, an index of all entries in two columns of small caps, with page numbers. - **Colophon (60vh):** A handwritten-style signature in stamp ink at the bottom right of the last spread: "set in Bebas Neue and Roboto Slab. printed on cordovan." The leather binding holds the two halves together visually; scale-hover gives any tab or thumbnail a small lift when pointed at. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Bebas Neue" weight 400 at clamp(56px, 9vw, 144px). Bebas read here as a stamped-leather monogram rather than a broadcast headline. - **Sub-display:** "Bebas Neue" at clamp(28px, 4vw, 48px), tracking 4%. - **Body:** "Roboto Slab" weight 400 at 18px / 1.75. The slab body reads as a notebook-printed journal entry. - **Italic:** "Roboto Slab" italic at weight 400. - **Numerals:** "Bebas Neue" tabular at 22px. - **Captions / stamps:** "Roboto Slab" weight 700 small caps at 11px tracking 14%. **Palette (coastal-blend -- leather meets sea):** - `#f4ead2` -- aged cream paper (left page background, notebook surface) - `#8a4a32` -- cordovan leather (left page binding panels) - `#5a2c1c` -- deep leather shadow (binding stitch lines, stamped emboss) - `#3a8aa8` -- coastal blue (right page gradient stop, ribbon color) - `#a0c4d4` -- sea-fog (right page gradient stop) - `#1c2c34` -- slate stone (text on cream) - `#d4b890` -- aged paper edge (cream variant, page edges) Half the palette is warm leather (cordovan, aged cream); half is cool coast (coastal blue, sea-fog). The split-screen's two halves get their own palette zones. ## Imagery and Motifs - **Leather texture (left page):** SVG `` filter at low frequency simulates leather grain. The cordovan surface has stitched edges drawn as 1px dashed lines. - **Hand-stamped ink marks:** Each entry has a date stamp drawn as a rotated rectangle with crooked baseline (`transform: rotate(-3deg)`), in deep leather shadow over cream paper. - **Coastal photography (right page):** Each entry's right page features a photograph from the workshop window -- sea, shore, lighthouses, fog. All treated with a leather-toned duotone (cordovan to coastal blue). - **Leather-tabbed margin:** Vertical leather tabs along the left edge protrude 32px out, each scaled-up 8% on hover via `transform: scale(1.08)` with 280ms ease. - **Silk-ribbon bookmarks:** Thin coastal-blue ribbons (12px wide) dangling from each spread's top, animated subtly with a 2deg sway over 6.4s. - **Retro pattern motifs:** Vintage motifs (anchors, fountain pens, brass rivets, lighthouse silhouettes) appear as small line-drawn marks scattered as decorative ornaments. ## Prompts for Implementation The site is a leather-bound journal of code-craft, open to today's spread. The split-screen never breaks; the binding is the structural spine. - The page uses CSS Grid `grid-template-columns: 1fr 28px 1fr` where the middle column is the binding (a vertical leather strip with stitch SVG overlay). On viewports under 720px, the binding becomes a horizontal divider and pages stack. - Leather texture: `background: #8a4a32; background-image: url("data:image/svg+xml,...")` -- an SVG `` filter producing leather-grain noise. The emboss on the wordmark uses `text-shadow: 1px 1px 0 rgba(90, 44, 28, 0.6), -1px -1px 0 rgba(212, 184, 144, 0.18);` to simulate stamped relief. - Scale-hover: `.tab, .thumbnail { transition: transform 280ms cubic-bezier(.2,.8,.2,1); } .tab:hover, .thumbnail:hover { transform: scale(1.08); }`. - Coastal photography duotone: `filter: sepia(0.4) hue-rotate(180deg) saturate(0.7);` plus an overlay `mix-blend-mode: multiply;` with a `linear-gradient(180deg, #8a4a32, #3a8aa8);`. - Silk-ribbon sway: `@keyframes ribbon { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(2deg); } }` at 6.4s, applied to each ribbon with varied delays. - AVOID CTAs, signup banners, pricing tiers, "feature cards," code-block-as-marketing. The site is a journal, not a product page. There is one mailto link at the colophon: "write to the apprentice's desk." - Storytelling: hero introduces the journal; entries unfold one by one as the apprentice's quiet lessons; coastal photographs provide breathing room; the index gathers everything; the colophon closes the volume. - Conversational voice: "let's talk about why I keep coming back to this pattern." "you might have seen it before; if not, here's how it goes." "I think this is right, but I welcome correction." ## Uniqueness Notes **Differentiators from other designs:** 1. **Split-screen as leather-bound book with stitched binding:** No other design treats the split-screen divider as a physical leather binding with stitching, leather grain, and emboss effects. 2. **Retro aesthetic + conversational tone for a .dev site:** Most .dev sites lean terminal, brutalist, or futuristic. A leather-bound conversational journal is a unique register for a developer-facing site. 3. **Coastal-blend palette splitting leather + coast across the spread:** The palette is divided between the two halves of the screen, so the user reads from "leather" into "coast" -- the color does part of the spatial work. 4. **Bebas Neue as stamped leather monogram, not broadcast headline:** Bebas's narrow capitals are used here for engraved emboss rather than display volume. 5. **Scale-hover as the only interaction:** No carousels, modals, scroll-snap, parallax. Only the small 8% scale-up on hover. The discipline of motion creates a quiet, focused reading mode. **Chosen seed:** retro split-screen bebas-bold coastal-blend scale-hover leather-texture retro-patterns conversational -- planned seed from assignment. **Frequency-aware choices:** `retro` (8%), `coastal-blend`, `scale-hover`, `leather-texture`, and `retro-patterns` are all uncommon. Avoids overused `terminal`/`corporate` aesthetics and `photography` patterns common in .dev sites. Bebas Neue is common but rarely used as an emboss/stamp face.