# Design Language for yome.day ## Aesthetics and Tone yome.day (v2) is an **Avant-Garde Sepia Almanac** -- a dashboard-layout reimagined as a 19th-century botanical almanac in which each "widget" is a hand-illustrated specimen page, set in serif-revival type, painted in sepia-nostalgic tones, with elegant-sophisticated air and particle-effect dust motes drifting through every panel. The aesthetic is **avant-garde**: each dashboard widget breaks dashboard convention -- there are no numbers, no metrics, no charts; instead each widget is a contemplative botanical illustration paired with a serif-revival caption written in the cadence of a slow walker. The .day suffix is read as "a particular day, looked at carefully" -- not a daily summary, but a single deep day's almanac. The tone is **elegant-sophisticated**: this is a dashboard for someone who reads their day rather than measuring it. The sepia palette anchors everything in soft late-afternoon light. Serif-revival typography (a 19th-century revivalist face like "Cardo" or "Lora") carries each widget's caption in the language of an unhurried diary. Skeleton-loading patterns are the entry choreography -- every widget begins as a skeleton outline and gently shimmers into its illustrated state, as if a printer's plate is slowly inking. The narrative spine: the page is the dashboard of "yome.day," a fictional botanical almanac for a single given day (today). Twelve dashboard widgets occupy a 4-column dashboard grid, but instead of metrics they contain: a sunrise illustration with a Latin tagline, a humidity widget rendered as an ink-painting of mist on a leaf, a sky-condition widget showing a hand-drawn cloud chart, a moon-phase widget as a crescent etching, a bird-call widget rendered as bird-song notation, and so on. Each widget is an almanac entry rather than a data readout. ## Layout Motifs and Structure The composition is a **dashboard** layout -- a 4-column desktop grid (3-col tablet, 1-col mobile) of 12 widgets arranged in a structured pattern. The dashboard convention is honored architecturally (regular grid, consistent widget framing) but inverted in content (illustrations, not metrics). The grid is generous: each widget is 280-380px wide and 320-540px tall, with 24px gutters. **Macro structure:** - **Threshold (Section 0, 60vh):** A wide sepia header reading "YOME / a botanical almanac" set in serif-revival italic at center, 80px, with a small ink-flourish beneath. The date appears in small caps: "MAY 12TH, 2026." Below, a 1px ink-rule edge-to-edge. - **Dashboard Grid (Section 1, scrolls 500-700vh):** 12 widgets arranged in a 4-column structured grid. Each widget is a card-like panel with a 1px ink-border, a sepia paper background, and a botanical illustration plus a serif-revival caption beneath. The 12 widgets: 1. **Sunrise (top-left, large 2x1):** Hand-drawn sun rising behind a flower-meadow horizon. Caption: "the sun rose at 5:34, into the eastern hedge." 2. **Humidity:** Ink-painting of mist condensing on a single leaf. Caption: "the air, today, holds its breath at 64%." 3. **Wind:** Hand-drawn ribbons of wind moving leftward across the panel. Caption: "a gentle 6 mph wind, from the west." 4. **Sky chart:** Botanical-style cloud-type chart showing four cloud forms. Caption: "cumulus and cirrostratus, stacked." 5. **Temperature:** Mercury thermometer illustration with a small bird perched on its top. Caption: "an idle 18 degrees by the apple tree." 6. **Bird-song:** Musical-notation page of one bird's morning call. Caption: "the redstart, at 6:12 and again at 6:14." 7. **Tide:** Illustration of a tide-line across a beach with a small crab. Caption: "the tide draws back at 11:48." 8. **Moon:** Etching of the current moon phase (waning gibbous). Caption: "the moon is waning, 76% lit, visible after dark." 9. **Almanac quote (large 2x1):** A serif-revival italic pull-quote occupying two columns, no illustration. Quote: "to know a day is to read the page it writes on the world." 10. **Botanical specimen:** Pressed-flower illustration of one specimen for the day. Caption: "today's specimen: yarrow." 11. **Time of day:** Sundial illustration with the shadow at noon position. Caption: "noon, the shadow at its shortest." 12. **Closing widget (bottom-right):** Hand-drawn page-curl with a small "the day continues" caption. - **Closing (Section 2, 40vh):** A single serif-revival italic line: "*the almanac, kept for one day, may be read on the next.*" A small ink-flourish beneath. **Spatial grammar:** The dashboard grid is structured but not rigid. Two widgets (Sunrise, Almanac Quote) span 2 columns for visual emphasis. The rest are 1-column. Widget heights vary 320-540px so the page breathes vertically. 24px gutters between widgets. Each widget has 28px inner padding. Sepia paper texture sits as a 12% opacity overlay across the entire grid. ## Typography and Palette **Fonts (all Google Fonts):** - **Display titles (almanac header):** "Lora" weight 600 italic at clamp(48px, 6vw, 80px), letter-spacing 0em. A serif-revival face used for the threshold "YOME / a botanical almanac" and for the large pull-quote. - **Widget headlines:** "Lora" weight 600 at clamp(20px, 2vw, 28px), letter-spacing 0em. - **Widget captions (body text):** "Lora" weight 400 italic at 14-16px, line-height 1.65. Used for all 12 widget captions and the closing line. - **Small caps and metadata:** "Lora" weight 500 small caps at 11-12px, tracking 0.22em. - **Tags and Latin taglines:** "Lora" weight 500 italic at 13px, tracking 0.04em. **Palette (sepia-nostalgic, eight stops cool-paper to warm-amber):** - **Sepia papers:** #F4E9D2 (sun-warmed paper), #E8D8B5 (sepia mid), #D4BC8A (deep sepia), #B89867 (warm tan). - **Ink shadows:** #5A4218 (sepia ink), #3D2A0E (dark ink), #2A1B0A (very dark ink). - **Botanical accents:** #6E7A47 (botanical green) and #94633A (ochre-brown) used sparingly for hand-drawn ink-wash details. - **Particle dust:** #FFEBA8 (faint amber dust motes drifting through panels). - **Ink color:** #2A1B0A used for all body type and most illustration linework. **Type-color rules:** All serif-revival text in dark ink #2A1B0A on sepia paper grounds. Italic captions in slightly lighter #3D2A0E. Small caps and metadata in #5A4218. The hand-drawn illustrations are rendered in dark ink #2A1B0A with occasional botanical-green or ochre ink-wash details. The page's overall sepia warmth is what carries the elegant-sophisticated mood. ## Imagery and Motifs **Core visual motifs:** - **Botanical-illustration imagery (imagery mandate):** Each of the 12 widgets contains a hand-drawn (or hand-drawn-looking) botanical-style illustration: pressed leaves, mercury thermometers, page-curls, sundials, crescent moons, redstart birds, yarrow specimens, tide-lines, cumulus clouds. Every illustration is rendered in dark-ink linework on sepia paper, with occasional ink-wash fills in botanical-green or ochre. The illustrations have visible ink-line variation -- the hand of an artist, not a vector-traced perfection. - **Particle-effects motif (motif mandate):** Tiny amber dust motes drift slowly across each widget at 0.4-0.8px/frame. The motes are barely visible (28-40% opacity, 1-2px diameter). They simulate the dust caught in afternoon light through a window. 6-10 motes per widget; they drift independently with slight randomness. The whole dashboard appears to be aging in real time. - **Skeleton-loading entry choreography:** Each widget enters via a skeleton-loading shimmer: first the widget's border draws in (300ms), then the inside of the widget shows a skeleton-shimmer (a diagonal pale-amber sweep, 1.6s) revealing the illustration as the shimmer passes over it. After the shimmer completes, the caption fades in below the illustration (400ms cascade). The skeleton-loading effect is the design's reveal -- as if each almanac entry is being printed in front of the visitor. - **Ink-flourishes:** Small ornamental flourishes -- 1px ink-line curls and small leaf-sprigs -- appear in the upper-right corner of each widget and beneath the threshold header. These are the page's 19th-century printing conventions. - **Paper grain:** A sepia-paper noise-texture sits at 12% opacity across the entire document, simulating the grain of slightly aged paper. The grain is uniform; the paper looks well-loved but not worn out. ## Prompts for Implementation **Opening narrative:** Page loads on sepia paper #E8D8B5. The threshold header "YOME / a botanical almanac" fades in over 1.4s in serif-revival italic. The date "MAY 12TH, 2026" types in via slow typewriter (32cps). The 1px ink-rule draws itself left-to-right over 800ms. The first row of widgets begins its skeleton-loading entry sequence -- borders draw first, then skeleton-shimmer reveals fill the widget contents. Particle dust motes begin drifting after the first widget has fully revealed. **Scroll narrative:** As the visitor scrolls through the dashboard, widgets enter via skeleton-loading in a 4-widget-per-row cascade (80ms left-to-right intervals within a row, 400ms between rows). Each widget's skeleton-shimmer is 1.6 seconds; after the shimmer, the botanical illustration is visible at full opacity. The serif-revival caption fades in 200ms after the illustration is fully revealed. **Particle drift:** Once a widget is revealed, its amber dust motes begin their slow drift. The motes have slight individual paths -- some drift diagonally upward, some straight across, some in slow arcs. The dust is the design's persistent ambient motion. **Pull-quote widget (Section 1, widget 9):** The almanac pull-quote enters with a slightly different choreography -- the skeleton-shimmer crosses the widget twice (once left-to-right, once top-to-bottom) over 2.4 seconds, then the serif-revival italic quote fades in word by word (140ms intervals). The pull-quote is the dashboard's contemplative pause. **Avoid:** No buttons, no nav, no CTAs, no pricing, no testimonials, no stat blocks, no settings dropdowns, no edit buttons. No video. No icons except the hand-drawn botanical illustrations. No round buttons or pills. No metric numbers (the dashboard contains no figures except the widget data line). No raster photography. **Tone in motion:** Slow, paper-paced, sepia-warmed. Curves are cubic-bezier(.4, 0, .2, 1). Skeleton-shimmer is 1.6s; particle-drift is continuous-slow; type cascade is generous. Nothing pops; nothing flashes. The almanac is patient. ## Uniqueness Notes **Differentiators from other designs:** 1. **Avant-garde dashboard with no metrics:** Avant-garde aesthetic (2%) inverts the dashboard convention -- 12 widgets containing botanical illustrations and serif-revival captions instead of numbers, charts, or stats. The dashboard format is honored architecturally but emptied of its data-readout content. 2. **Sepia-nostalgic palette (4% palette):** Eight-stop sepia-paper-to-ink palette anchors the entire design in 19th-century afternoon light. Warm palette (92% overused) is here specifically sepia, not generic warm. 3. **Skeleton-loading as 19th-century printing reveal:** Skeleton-loading (2% patterns) used as a printer's-plate reveal mechanism -- each widget skeleton-shimmers into its botanical illustration. Not as a UI loading indicator. 4. **Particle-effects as drifting dust motes:** Particle-effects (2% motifs) used as amber dust motes drifting through each widget, simulating afternoon light through a window. Not as confetti or as celebration particles. 5. **Botanical-illustration imagery (2% imagery):** Twelve hand-drawn botanical-style illustrations -- one per widget -- in dark ink on sepia paper. The corpus rarely uses botanical-illustration; this design commits fully. 6. **Serif-revival typography at almanac cadence:** Serif-revival (5% typography) used as the typographic voice of a 19th-century walking-diary. Lora italic carries the elegant-sophisticated tone (4%) at perfect register. **Chosen seed:** aesthetic: avant-garde, layout: dashboard, typography: serif-revival, palette: sepia-nostalgic, patterns: skeleton-loading, imagery: botanical-illustration, motifs: particle-effects, tone: elegant-sophisticated. **Avoided patterns from frequency analysis:** parallax (94%), scroll-triggered (33%), card-grid (90%) -- the dashboard is structurally a card-grid but inverted in content. Centered (94%) is partially used but reframed as dashboard-pattern. Photography (90%) entirely AVOIDED. Mysterious-moody (71%) replaced by elegant-sophisticated. Mono typography (82%) entirely AVOIDED.