# Design Language for yome.quest ## Aesthetics and Tone yome.quest is a **playful celestial atlas rendered in pure flat design** — a hand-cut paper map of the night sky pinned to a powdery cream wall, where every constellation has been reorganized into wonky little compartments and given a name like "Office Hours, Reclaimed" or "The Saturday I Took Three Naps." The mood is **whimsical-domestic**, somewhere between a child's bedroom planetarium, a 1960s craft-magazine spread, and a soft-launched zine printed on recycled card stock. There is **no gradient, no glow, no skeuomorphic shading anywhere**. Every shape is a single flat fill. Stars are hard-edged five-point silhouettes. Ripples are pure outlined arcs. Shadows do not exist — depth is conveyed only by **a 2-pixel hard offset in a contrasting cream tone**, never by blur. The whole site looks like it could be screen-printed in three or four passes on butter-thick paper. Inspirations: Charley Harper's flat-shape ornithology, Saul Bass's geometric movie titles applied to bedtime stories, the cut-paper collages of Alma Thomas reduced to a cream-and-blush palette, Ladybird Books astronomy plates from the 1970s, the Bento spread in a Studio Ghibli picnic scene. The voice that narrates the site speaks like a friend who labels their fridge magnets: warm, lightly self-deprecating, occasionally rhyming on accident. ## Layout Motifs and Structure The page is a **bento-box quest board** — an irregular 12-column grid where rectangular cells of varying sizes interlock without gutters, like a tray of mochi. Each "quest" or content unit lives in its own bento cell with a flat fill, a thin 2px border in **Inkwell Plum** (#3B2A4E), and a tiny five-point star pinned in one corner like a pushpin. **Bento grid specifics:** - 12-column responsive grid, **24px gap on desktop, 12px on mobile** - Cells span 3 / 4 / 5 / 6 / 8 columns and 1 / 2 / 3 row units, never identical neighbors - Every cell rotates **between –1.5deg and +1.5deg at random** (set once at load, never animated continuously) so the whole board looks slightly hand-pinned, never machined - Cells have a **2px solid border + 4px hard offset shadow** in a darker pastel — no soft shadows ever - Hero "constellation cell" spans 8 cols × 3 rows in the upper-left, containing the site title rendered as **a flat star-map** where Playfair Display capitals are connected by dotted star-lines **Spatial rhythm:** - Sections are separated by **horizontal ripple bands** — three concentric arcs in cream, blush, and plum, always drawn flat as outlined ellipses, never filled - A persistent **"quest log" sidebar** on desktop (12% width, fixed) holds an enumerated checklist with hand-stamped star checkboxes - Footer is a single bento cell that spans full width and contains a **flat-illustrated horizon line** with seven cut-out stars in collaged poses **Imagery slots are explicitly collaged:** every photograph or illustration is presented as a torn-edge cut-out (CSS `clip-path` polygon with 8–12 jagged points) overlapping a flat-fill rectangle, sometimes spilling 8–16px outside its bento cell to break the grid playfully. ## Typography and Palette **Fonts (Google Fonts only):** - **Playfair Display** (700 / 900 italic) — display headings, the site title, every quest name. Used at huge sizes (clamp 3rem to 7.5rem) with **negative letter-spacing (–0.02em)** so the elegant serifs almost touch and feel storybook-imperial. - **Fraunces** (400 / 600, optical size 144) — sub-headings and pull quotes. Picked for its soft contrast against Playfair, providing a second elegant serif voice that is rounder and warmer. - **DM Mono** (400) — quest IDs, timestamps, sidebar checklist numbers, footer metadata. A single monospaced anchor that keeps the whimsy from floating away. - **Caveat** (400) — used sparingly for hand-scrawled annotations layered over collaged photos (e.g. "shipped this on a Tuesday"). **Body copy** is set in **Fraunces 400 at 1.0625rem / 1.65 line-height** with generous 1em paragraph spacing. Headings use Playfair at 900 italic for emotional beats and 700 roman for navigational beats. **Palette — Creamy Pastel, sealed with one dark plum:** | Role | Name | Hex | |---|---|---| | Page base | Buttercream | `#FBF3E2` | | Bento fill A | Powdered Blush | `#F5D3C8` | | Bento fill B | Pistachio Cream | `#D7E5C0` | | Bento fill C | Sky-Milk | `#CADCEC` | | Bento fill D | Apricot Sherbet | `#F7C58B` | | Accent / motif | Saffron Star | `#F2A03D` | | Border / ink | Inkwell Plum | `#3B2A4E` | | Hover wash | Lavender Soda | `#E0D4EE` | These eight values are the **entire site palette**. Cells cycle through fills A→D in a deliberately non-repeating rhythm so no two adjacent bentos share a color. Every text glyph is **Inkwell Plum**, never pure black. White is forbidden — even the brightest highlights are Buttercream. ## Imagery and Motifs **Five-point celestial stars** are the spine of the visual identity. They appear as: - **Pinpoint stars** (8px, Saffron Star fill) at every bento cell corner — like map pins - **Hero constellation** of 14 stars connected by 1px Inkwell Plum dotted lines spelling the letterform "Y" of the wordmark - **Star-checkbox** in the quest log: empty = outlined plum star, completed = filled saffron star with a tiny Caveat tick mark scribbled across it - **Star-rain divider** — a horizontal band of 24 randomly-placed flat stars in three sizes between sections - **Constellation footnote** — every long-form article ends with a unique 5–7 star constellation drawn flat above the byline, as a visual signature of that piece **Ripple motif** appears as: - **Section breakers**: three concentric flat-outlined ellipses (no fill), each thicker than the last (1px, 2px, 3px), in alternating Inkwell Plum, Saffron Star, and Powdered Blush - **Loading state**: ripples expand outward from a center point in 240ms steps, never blurring, always crisp outlines - **Hover signal on bento cells**: a single concentric ripple ring blooms once from the cell's corner star and fades after 360ms **Collage imagery rules:** - Every photo is rendered with a **CSS `clip-path` polygon of 8–12 jagged points** simulating a hand-torn paper edge - Photos are duotoned to the palette: the lightest values become Buttercream, the darkest become Inkwell Plum, and a midtone is mapped to whichever bento fill the cell uses (A/B/C/D) - Each collage element gets a **2px hard offset** in a contrasting pastel — never soft shadow - Collaged elements may **break the bento border by 8–16px** in one direction, never two, to create the pinned-paper effect - Tiny **paper-tape strips** (10px × 28px flat rectangles in 60% Apricot Sherbet) appear at random photo corners as if holding the cutouts down **Decorative micro-motifs scattered through the layout:** - Tiny moons (waxing crescents, flat fills, 12px) placed asymmetrically near headings - Hand-drawn arrows in Caveat-style strokes pointing from one bento cell to another, tracing reading paths - A recurring **mascot star** named "Nori" — a personified five-point star with two black dot eyes and a flat blush cheek — who appears in the corner of every page in a different pose ## Prompts for Implementation **Storytelling directive:** Treat every page as a **single-screen quest spread** from a children's astronomy almanac. The reader should feel like they have flipped open a heavy-paper book and are looking at one beautifully composed bento layout per scroll-section. Animations are sparse, deliberate, and always in service of the metaphor — never decorative motion for motion's sake. **HTML/CSS implementation guidance:** - Use **CSS Grid with `grid-template-areas`** named after constellations (`hero`, `north-star`, `little-dipper`, `cassiopeia`, `quest-log`) for each bento layout block — semantic and discoverable in DevTools - **No box-shadow with blur ever.** Depth uses `box-shadow: 4px 4px 0 var(--inkwell-plum)` only — hard, flat, offset - Each bento cell is an `
` with a class like `.bento.bento--blush` and a `--rotation: var(--rand-tilt)` CSS custom property set inline (PHP/JS) on render, between –1.5deg and 1.5deg - Star pins use **inline SVG with `clip-path: polygon()`** for the 5-point silhouette — never font icons, never images - Ripple dividers are pure SVG: three nested `` elements with stroke-only, no fill, animated via `stroke-dashoffset` on intersection-observer trigger - Photos use `` wrapped in a `
` with `clip-path` polygon and a CSS filter chain `grayscale(1) sepia(0.4) brightness(1.05)` plus a `mix-blend-mode: multiply` overlay tinted to the bento fill — yields the duotone collage feel - Body uses `font-feature-settings: "liga" 1, "dlig" 1, "ss01" 1` to enable Fraunces' optical refinements - Implement a **`prefers-reduced-motion`** branch that disables ripple bloom and star-rain shimmer but keeps the static composition fully intact **JavaScript / interaction guidance:** - On page load, a tiny script assigns each `.bento` a random `--rotation` (range –1.5 to 1.5deg) and a random fill class (A/B/C/D constrained so no neighbors match) — runs once, never re-randomizes - An IntersectionObserver triggers a **single ripple bloom** from the corner star of any bento cell that enters the viewport — 360ms, then permanently still - Hovering a bento cell expands its corner star from 8px to 14px over 200ms with `transform: scale()`, no other change - The mascot **Nori the star** floats into the corner of the viewport on first load, stays for 2.5s, then settles into a fixed 36px decoration in the lower-right margin (never blocks content) - A quiet **"shooting star" cursor trail** activates only on devices with fine pointers: a 4px Saffron Star follows the cursor with 80ms lag, fading out after 240ms — disabled by reduced-motion **AVOID strictly:** - CTA-heavy hero sections, button-stacks, "Get Started" / "Sign Up" megabuttons - Pricing tables, comparison grids, testimonial carousels, stat counters - Glassmorphism, neumorphism, gradients, glows, blurs, drop-shadows with blur - Dark mode (this design is intentionally bright-and-warm only; a proper dark mode would betray the cream-paper metaphor) - Stock photography unfiltered — every photo MUST pass the duotone-collage pipeline - Generic five-star rating widgets (the star motif is reserved for celestial use, never reviews) - Centered single-column layouts — the bento grid is the entire structural language **Bias toward** full-screen bento spreads, generous breathing room inside cells, slow narrative scroll where each spread feels like turning a page, hand-feel imperfections (the random tilt, the torn edges, the off-by-2px offsets) layered over a strictly disciplined flat color system. ## Uniqueness Notes **Differentiators from sibling designs in this catalog:** 1. **Flat design + bento + collage convergence** — Most flat-design sites flatten everything into clean rectangles; most bento sites use neumorphic depth. This design fuses pure flat fills with **torn-paper collage cut-outs that explicitly break bento borders**, producing a hand-pinned-quest-board aesthetic that no other site in the catalog approximates. 2. **Playfair Display + Fraunces double-serif voice** — While Playfair-elegant is the seed typography, this design pairs it with **Fraunces** rather than the typical sans-serif companion, creating a full-serif romantic voice that is rare among the bento-styled designs and reinforces the storybook-quest tone. 3. **Pure outlined ripples as section breakers** — Ripples here are **never filled, never animated continuously** — they are static 3-arc geometric flourishes printed between sections. This distinguishes the ripple use from any aquatic / sound-wave / pulse interpretation seen in other sites. 4. **The "Nori" mascot star** — A named, returning persona who roams the corners of the layout in hand-crafted poses gives this design a distinct character no other catalog entry has. The mascot is a five-point star with face, never a generic logo. 5. **Constellation footnotes per article** — Each long-form piece ends with its **own unique 5–7 star constellation** drawn flat. This signature device transforms the celestial motif from decoration into a structural authorship gesture. 6. **Hard 4px offset shadow rule** — A self-imposed CSS contract that the entire design uses only `box-shadow: 4px 4px 0 var(--inkwell-plum)` — no blur, no softening, no exceptions. This single rule enforces flat-design discipline while still giving the collage feel. **Chosen seed (from assignment):** > aesthetic: **flat-design**, layout: **bento-box**, typography: **playfair-elegant**, palette: **creamy-pastel**, patterns: **ripple**, imagery: **collage**, motifs: **star-celestial**, tone: **playful** **Avoided patterns** (informed by frequency analysis): no glassmorphism, no brutalism, no dark/cyberpunk neon, no monospace-only typography, no terminal/ASCII aesthetic, no parallax-heavy hero, no full-bleed video backgrounds, no carousels, no scroll-jacking — patterns that have appeared often in sibling sites are deliberately rejected here in favor of the static-paper-quest-board language.