# Design Language for logic.day ## Aesthetics and Tone logic.day is an almanac for the mind -- a daily ephemeris of reasoning, where every sunrise brings a new puzzle, a new fallacy to dissect, a new chain of inference to follow until it snaps or holds. The conceit: logic is not a cold machine but a *weather system*. Premises drift in like cloud banks, conclusions condense and fall, contradictions crack the sky open with light. The site should feel like flipping through a luxurious hand-bound day-planner that someone has been doodling in for years -- gold-leaf edges, ink-black endpapers, and margins overrun with watercolor diagrams of syllogisms blooming like cumulus. The mood is **playful gravitas**: serious about rigor, light about itself. Think of a philosophy professor who wears mismatched socks and keeps a kaleidoscope on the desk. Nothing here is sterile or corporate -- no whiteboard sans-serif, no flat infographic blue. Instead: pigment that pools and feathers at the edges, the warm grain of cold-press paper, and threading through all of it a band of **aurora light** -- a slow ribbon of teal-violet-gold luminance that the user comes to associate with "a valid argument just landed." Invalid arguments, by contrast, get a brief muddy bloom, like two watercolors bleeding into a brown nobody wanted. Inspiration touchstones: the marbled endpapers of antiquarian Euclid editions; the loose botanical washes of a naturalist's field journal; the cool fire of the northern lights photographed over a black fjord; the gilt-and-jet palette of a Victorian lacquer writing box. The result should be unmistakably warm, tactile, and a little bit magic -- the opposite of "AI assistant slate gray." ## Layout Motifs and Structure **Primary layout: sidebar (left rail) with watercolor-washed full-bleed canvas.** A fixed left sidebar, ~280px on desktop, is the "spine" of the day-planner -- it carries the logic.day wordmark up top, a vertical date-ribbon ("DAY 1 / DAY 2 / ..." as scroll waypoints rather than real dates), and a hand-drawn line-illustration index of the sections (a balance scale, a branching tree, a Venn knot, a broken chain, a spiral). The sidebar background is deep lacquer black (#0E0C0A) with a single hairline of gold (#C9A227) running its full height like the gilt edge of a closed book. Active section markers slide along this gold line. The main canvas to the right is **paper** -- a warm watercolor-paper cream (#F4ECD8) with a faint cold-press tooth rendered as a CSS noise/feTurbulence overlay at ~4% opacity. Content lives in generous editorial columns with wide outer margins (min 8vw), and each major section is a full-viewport "page" of the planner. Between sections the paper does not simply scroll -- a **wash transition** sweeps: a soft-edged pigment shape (the section's signature color) blooms from one corner, briefly saturates, then settles into a thin marginal stain that stays as a "bookmark" of where you've been. Compositionally, sections alternate their center of gravity: odd pages anchor their illustration on the right with text flush-left; even pages mirror it. The aurora ribbon -- a horizontal band of layered conic/linear gradients, ~120px tall, blurred heavily -- floats at varying heights between content blocks, never twice the same place, so the eye never settles into a grid. Nothing is bento-boxed. Nothing is a stat tile. The whole right side reads like a spread, not a dashboard. On mobile, the sidebar collapses into a slim top bar with the gold hairline becoming a top border; the date-ribbon becomes a horizontal scroll-spy strip; the illustrations scale down but never disappear. ## Typography and Palette **Typography -- "grotesque-neo": a neo-grotesque sans paired with a high-contrast display serif for ceremony.** - **Display / Section Titles / Wordmark:** "Space Grotesk" (Google Fonts, weights 500/700). A neo-grotesque with just enough quirk in its g and the cut of its terminals to feel hand-set rather than systemic. Used at clamp(2.4rem, 6vw, 5rem), letter-spacing -0.02em, occasionally all-lowercase for the playful register ("logic.day" is always lowercase). Section titles get a thin gold underline that *draws* on entry. - **Body / Prose / Arguments:** "Inter" (Google Fonts, weights 400/500). A clean neo-grotesque workhorse for the actual logical prose -- premises, inferences, asides. Set at 1.0625rem, line-height 1.7, measure ~62ch. Restrained on purpose: the *text* is sober so the *paint* can be loud. - **Accent / Quotes / Marginalia:** "Newsreader" (Google Fonts, weight 400 italic). A reading serif with warmth; used for epigraphs, the "fallacy of the day" callout, and handwritten-feeling margin notes. It contrasts the grotesques like a fountain pen against a felt-tip. - **Mono flecks:** "Space Mono" (Google Fonts, 400) only for tiny formal-logic snippets (∴, P → Q, ¬), set inline in gold against the cream so symbols glint like inlay. **Palette -- "gold-black-luxury" warmed by an aurora accent triad:** - `#0E0C0A` -- Lacquer Black (sidebar, deep grounds, ink) - `#1A1714` -- Walnut Shadow (secondary dark surfaces, footer) - `#F4ECD8` -- Watercolor Cream (main paper canvas) - `#EFE3C6` -- Aged Vellum (raised cards, callout fills) - `#C9A227` -- Antique Gold (hairlines, underlines, the gilt edge, symbols) - `#E7C977` -- Pale Gilt (gold highlights, hover glow) - `#2E8C8C` -- Aurora Teal (valid-argument bloom, primary watercolor) - `#7B5EA7` -- Aurora Violet (secondary watercolor, transitions) - `#8A6A3B` -- Muddy Bloom (the deliberately unpleasant brown of a contradiction) Gold is *never* used as a fill behind body text (legibility) -- only as line, edge, glow, and symbol. The aurora colors appear only as soft-edged, low-opacity washes and the ribbon gradient -- never as hard UI chrome. ## Imagery and Motifs **Core visual motifs (all hand-drawn line-illustration + CSS watercolor, zero stock photography):** 1. **The Watercolor Syllogism.** The hero illustration: three loose pigment blots labeled with tiny serif marginalia -- two premises bleeding gently *toward* each other and a third (the conclusion) condensing in the overlap, rendered as layered SVG `` blobs with feTurbulence-displaced edges and multiply blend modes so they truly mix. On valid arguments the overlap glows gold; the user can hover a premise to see it "lift" (translateY + soft shadow) off the paper. 2. **Line-Illustration Index Icons.** A small set of single-weight (1.5px) ink drawings: a balance scale, a branching inference tree, two interlocking Venn loops tied in a knot, a chain with one snapped link, an Ouroboros spiral (for circular reasoning), a lighthouse beam (for "the valid path"). Each lives in the sidebar and reappears, enlarged and watercolor-tinted, as the section's header glyph. They wobble very slightly on hover, like a hand redrawing them. 3. **The Aurora Ribbon.** A horizontal stratum of overlapping blurred gradients (teal → violet → gold), gently drifting via a slow CSS keyframe (background-position over 24s). It is the site's emotional weather indicator -- intensifying near "valid"/"resolved" content, going pale and thin near unresolved paradoxes. 4. **Marginal Stains.** As you pass each section, a small irregular watercolor stain (that section's color) is "left behind" pinned to the sidebar's gold line -- a visual trail of breadcrumbs that doubles as the read-progress indicator. 5. **Ink Diagrams.** Truth tables, decision trees, and the occasional Venn diagram drawn as if by hand -- slightly uneven strokes, hand-lettered cell labels in Newsreader italic, gold rules. They animate by *drawing* (stroke-dashoffset) when scrolled into view. 6. **Folio Furniture.** Faint hand-ruled baseline hairlines at 6% gold; a corner "page fold" SVG on each section's top-right; a thin double rule under the wordmark like a book's title page. ## Prompts for Implementation Build this as a **full-screen narrative day-planner** the user *turns pages through*, not a marketing site. No CTA stacks, no pricing tables, no stat grids -- if a number must appear, it appears as hand-lettered marginalia, not a counter tile. **Opening (the cover):** Page loads on full Lacquer Black. The gilt edge (a 1px gold line) draws itself top-to-bottom down the left in ~1.4s. Then the black "opens" -- it slides leftward to become the fixed sidebar (~280px) while the watercolor cream paper is revealed beneath/right, accompanied by one slow horizontal sweep of the aurora ribbon across the seam. The wordmark "logic.day" fades up in Space Grotesk lowercase with its gold double-rule, and the hero Watercolor Syllogism blooms in: three pigment blots ease in with staggered scale + opacity, edges trembling via animated feTurbulence, until the overlap condenses and pulses gold once. A line of Newsreader italic underneath: *"every day, an argument. some hold. some don't. let's find out."* **Scroll model:** CSS scroll-snap (y proximity, not mandatory -- keep it gentle). Each section = ~100vh planner page. Sidebar markers slide along the gold hairline; passing a section deposits its marginal stain. Aurora ribbon parallaxes at ~0.4x scroll speed and floats to a new vertical offset per section. **Section transitions ("the wash"):** On entering a section, a large soft-edged blurred radial of that section's color blooms from a corner (scale 0.6→1.4, opacity 0→0.35→0.12 over ~900ms) then settles. This is the page-turn. Pair it with section content sliding up 24px + fading in, staggered by child (~80ms each). **Hover language ("hover-lift"):** This is the signature interaction. Cards, premise blots, illustration glyphs, and nav items all *lift* on hover -- translateY(-6px), a soft warm-gold drop shadow (0 12px 28px rgba(201,162,39,0.18)), and a faint pale-gilt rim-light on the top edge. Use cubic-bezier(0.34,1.56,0.64,1) so the lift has a tiny springy overshoot. On leave, settle smoothly. Index icons additionally do a 1-2deg wobble. **Aurora as feedback:** Anywhere the content presents a "valid" or "resolved" idea, brighten the nearest aurora ribbon segment (saturation + a brief gold pulse). Anywhere it presents a paradox or fallacy, let two watercolor blobs bleed into the Muddy Bloom brown, then have it slowly diffuse away -- never let it stay ugly, the diffusion *is* the comfort. **Drawing animations:** All ink diagrams (truth tables, inference trees, Venn knots) animate via stroke-dashoffset on scroll-in, ~1.2s ease, with hand-lettered labels fading in afterward. The hero syllogism's blot edges should have a continuous, very slow turbulence animation (baseFrequency oscillating subtly) so the paint always looks faintly *wet*. **Texture discipline:** One global feTurbulence noise layer at ~4% over the cream paper for tooth; multiply blend on all watercolor SVG fills so overlaps genuinely mix pigment; never a hard gradient as UI chrome. Reduced-motion: disable parallax, turbulence oscillation, and ribbon drift; keep static washes and instant hover-lift. **Footer ("the colophon"):** Walnut Shadow ground, a hand-drawn closing flourish, the day-ribbon shown complete with all marginal stains lined up the gold edge like a finished journal, and a quiet line: *"tomorrow: another argument."* ## Uniqueness Notes **Differentiators from other designs in this portfolio:** 1. **Logic-as-weather, rendered in actual mixed pigment.** No other site here treats reasoning as a watercolor weather system, with SVG blobs that genuinely blend via multiply blend modes and live feTurbulence "wet" edges. Validity and contradiction are *colors that mix on screen*, not icons or badges -- argument quality is felt as pigment chemistry. 2. **The day-planner spine: a sidebar that is literally the gilt edge of a closed book.** The left rail isn't a nav menu; it's the bound spine of an almanac, with a single gold hairline as the page-edge and watercolor "marginal stains" deposited as a read-trail. This reframes the underused `sidebar` layout as physical book furniture rather than an app shell. 3. **Aurora-lights as an emotional instrument.** The `aurora-lights` motif (0% usage in the portfolio) is used here not as decoration but as a feedback channel -- a drifting teal-violet-gold ribbon that brightens at valid conclusions and pales at paradoxes. It's the site's mood ring. 4. **Gold-black-luxury kept honestly luxurious by *withholding* gold from text.** Gold appears only as line, edge, glow, and inlaid logic symbols (∴, →, ¬) against warm cream -- never as a fill behind prose -- so the gilt reads as genuine craft rather than gaudy chrome, and the playful tone never tips into garish. 5. **Playful tone via marginalia, not via bubbles.** Whimsy lives in Newsreader-italic hand-notes, wobbling line drawings, and self-deprecating epigraphs ("some hold. some don't.") -- not in candy colors or rounded blobs. Rigor stays in the sober Inter prose; the paint and the margins carry the wink. **Chosen seed/style:** aesthetic: watercolor, layout: sidebar, typography: grotesque-neo, palette: gold-black-luxury, patterns: hover-lift, imagery: line-illustration, motifs: aurora-lights, tone: playful. **Avoided patterns from frequency analysis:** Rejected the dominant `corporate` aesthetic (92%), `centered` layout (92%), `gradient`/`warm` palette clichés as UI chrome (96%/90%), `counter-animate` stat tiles (91%), `mysterious-moody`/`mono` defaults (94%/94%), and `photography` imagery (64%) -- this site has zero photos, zero counters, zero centered hero-slabs. Leaned into genuinely underused territory: `watercolor` (4%), `line-illustration` (3%), `hover-lift` (6%), `aurora-lights` (0%), `gold-black-luxury` (7%), `sidebar` (15%).