# Design Language for logical.day ## Aesthetics and Tone `logical.day` is a **1928 Bauhaus telegraph office that has been wired for fiber-optic signal**. Imagine the Chrysler Building's lobby — chevron terrazzo floors, gilded sunburst grilles, stepped archways — but every ornamental surface has been recast in exactly two colors: deep oxidized brass (#2C1E0F) against crisp blueprint linen (#F0EAD6). No chrome, no neon, no gradient. The duotone is architectural, not decorative. Every chevron, every running-key border, every stepped fan motif earns its place by also carrying information. The tone is **tech-tutorial as craft manual**. This is not a documentation dump or a CRUD walkthrough. It is the kind of instructional voice you find in a 1940s machinist's handbook or a letterpress compositor's guide — authoritative, tactile, deeply ordered, with an assumption that the reader wants to *understand* the process, not just copy commands. Each tutorial is a process log, structured the way a craftsperson would structure it: gather materials, prepare the surface, execute the technique, inspect the result. The writing is second-person, present-tense, never condescending. The visual signature is **precision-ruled geometry under organic pressure**. Art-deco structure (grid-lines, stepped borders, symmetrical ornaments) meets the biological fact that screens curve, fingers smear, attention drifts. Organic blobs — rendered in the same two palette colors — push against the grid from behind, like linseed oil pressing through laid paper. The grid wins, but the blob is visible. This tension is the design's emotional core: logic containing the organic. ## Layout Motifs and Structure The page is a **vertical timeline**, not a scroll of cards. This is a deliberate counter to the corpus's 89% centered layout dominance. The timeline has a single spine — a 2px vertical rule in #2C1E0F, positioned at 64px from the left edge at desktop — and every tutorial step branches from it with a horizontal connector ending in a stepped art-deco terminal diamond. Think: a wiring schematic drawn by a draftsman who also loved Viennese Secessionism. **Structural anatomy (desktop, 1280px viewport):** - **Left margin (0–64px):** Contains only the timeline spine and step-count numerals. Numerals are set in `Cormorant Garamond` at 11px, tracking +0.3em, rotated 90° counter-clockwise, reading bottom-to-top. They are purely decorative — the actual step number is in the content area — but they anchor the eye to the vertical axis. - **Connector zone (64–128px):** Art-deco terminal diamonds (`◆`, 12px, #2C1E0F) mark each step's branch point. Between steps, the spine has a **border-animate** treatment: a second hairline rule in #8B6F4E traces the spine with a `stroke-dashoffset` animation, appearing to *draw itself* as the user scrolls past each step's midpoint. - **Content column (128px–900px):** The primary reading area. `min(680px, calc(100vw - 192px))` wide. Step headers, body prose, code blocks, and output inspections live here. - **Annotation gutter (900px–1280px):** Marginal annotations — short, terse, telegraphic — sit here, set at 11px `JetBrains Mono`. These are not footnotes; they are the machinist's pencil marks: "verify temp", "watch alignment", "this is the failure point". The annotations connect to inline `⌘N` superscripts in the body with a dotted hairline. **Step anatomy within the column:** 1. **Step header:** Left-aligned, `Cormorant Garamond` variable at 36px, `wght 600`. A stepped fan ornament — hand-drawn at SVG level, not a font glyph — appears to the right of the step number, its rays fanning 90° clockwise from the number's baseline. 2. **Prerequisites block:** A bordered rectangle with a `border-animate` treatment: the border draws clockwise from top-left corner on scroll-enter, taking 400ms total, `cubic-bezier(0.4, 0, 0.2, 1)`. 3. **Body prose:** `Lato` at 17px/1.65, #2C1E0F on #F0EAD6. Generous line length (680px max) appropriate to deliberate reading. 4. **Code blocks:** Full-width within the content column, dark-mode inversion: #F0EAD6 text on #2C1E0F background, `JetBrains Mono` at 14px. The code block's top border is a running chevron pattern (not a straight rule) drawn in SVG, echoing the Chrysler Building's eagle gargoyle frames. 5. **Inspection callouts:** After each step, an "Inspect" block — a shallow trapezoid (art-deco stepped shape, 0° top, 4° angle on bottom) in #E8E0C8 — gives the expected output and a single-line verification command. **Organic blob layer:** Behind the entire layout sits a `position: fixed` SVG containing 4–6 organic blob shapes in #2C1E0F at 4% opacity. They do not move. They are purely textural — the grain of the paper showing through the blueprint. As the user scrolls, `mix-blend-mode: multiply` makes them appear to press forward when content passes over them. **Mobile (< 768px):** The spine collapses to a top border (horizontal timeline). The annotation gutter disappears — annotations fold inline as collapsed `
` elements with the same border-animate treatment on the `` border. ## Typography and Palette **Typography — humanist system (all Google Fonts, verified available):** - **Display headers, step titles, pull-quotes:** [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond) — variable, axes `wght 300–700`, `ital 0–1`. Used at H1: 72px `wght 600`, `ital 0`; H2 (step titles): 36px `wght 600`; pull-quotes: 28px `wght 300` italic. The humanist warmth of Cormorant's calligraphic origin sits in productive tension with the mechanical art-deco grid. The wide brackets and ink-trap details of the lowercase become visible at display sizes, referencing letterpress imprecision. - **Body prose:** [`Lato`](https://fonts.google.com/specimen/Lato) — Regular (400) for body, SemiBold (600) for inline code references and key terms. 17px / 1.65 line-height on desktop, 16px / 1.7 on mobile. Lato's semi-rounded humanist structure keeps long tutorial text readable without the clinical detachment of a geometric sans. - **Code, terminal output, annotations:** [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono) — variable, `wght 100–800`. Body code: 14px `wght 400`; output: 13px `wght 300` in #8B6F4E; annotations: 11px `wght 500` tracking +0.15em. The mono anchors the tech-tutorial register without overwhelming the humanist prose. - **Numerals, step counts, ornamental text:** [`Cormorant SC`](https://fonts.google.com/specimen/Cormorant+SC) — small caps, `wght 400–700`. Used for the rotated spine numerals and for section-count labels ("Step 01 of 07"). The small-cap geometry echoes art-deco signage letterforms. **Palette — strict duotone, 6 tones:** - `#2C1E0F` — Deep oxidized brass. Primary text, spine rule, diamond connectors, code block background. The darkest tone; reads as near-black but has undeniable warmth. - `#F0EAD6` — Blueprint linen. Page background, code block text (reversed), blob fill at 4% opacity. A warm white — not pure, never sterile. - `#8B6F4E` — Mid-register bronze. Secondary text (annotations, captions, step numerals). Bridge tone between the two primaries. - `#E8E0C8` — Aged ivory. Inspection callout trapezoid fill, prerequisites block background. Slightly darker than linen — creates depth without introducing a third hue. - `#D4C4A0` — Warm sand. Inline code background (inside body prose), hover states on connector diamonds. This is the duotone's accent — barely a color, but enough to separate inline code from prose without jarring. - `#C5A96B` — Burnished gold. Border-animate stroke color on prerequisites blocks and inspection callouts. The only tone with clear metallic reference — used exclusively for animated borders, never for static text. **Color rule:** All six tones are derived from the same brown-amber axis. There are no blues, no greens, no purples. The duotone discipline is absolute. ## Imagery and Motifs **No photography.** Zero. The corpus shows photography usage but `logical.day` is typography-and-geometry-only. **Organic blob layer (SVG, `position: fixed`, `pointer-events: none`):** Four irregular blob shapes occupying different viewport quadrants. Each blob is an SVG `` with `cubic-bezier` curves — roughly 8–12 control points — producing forms that suggest amoeba cross-sections or ink dropped in water. All blobs in `#2C1E0F` at 4% opacity with a `filter: blur(32px)` to push them behind the sharp geometric foreground. They do not animate. Their purpose is textural: the biological asserting itself beneath the mechanical. **Stepped fan ornaments (SVG, inline per step):** Each step header features a small stepped fan — 7 rays of unequal width, fanning 90°, the outer ray the longest — drawn in `#2C1E0F` at 18px height. This is not a Unicode character; it is a custom SVG `` component constructed from `` elements. The ray widths follow a Fibonacci progression (1, 1, 2, 3, 5, 8, 13 units, normalized to 18px height). One step gets an inverted fan (concave sunburst) to mark the tutorial's pivot point. **Running chevron rule (SVG, top of code blocks):** Instead of a straight horizontal rule, code blocks are topped with a repeating chevron pattern: `<` symbols 8px wide, 4px tall, spaced 6px apart, in `#2C1E0F`, 40% opacity. The pattern is generated with a `` SVG element and applied via `fill` to a 4px-tall rectangle spanning the code block's full width. **Grid-lines substrate (SVG, `position: absolute`):** Behind the content column — not fixed, scrolling with content — a grid of horizontal hairlines at 28px intervals (matching the body leading grid) and vertical rules at 128px and 900px (matching the layout zones). Lines at 8% opacity in `#2C1E0F`. This makes the layout's skeleton visible, referencing architectural blueprint drafting. On hover of any step header, the two vertical rules within that step's bounding box animate to 20% opacity for 200ms, then return — the grid *acknowledges* the user. **Terminal diamond connectors:** At each branch point on the timeline spine, an SVG `◆` (12×12px rotated square with 1px inner inset creating the diamond's bevel) in `#C5A96B`. On scroll-enter of its parent step, the diamond pulses: `scale(1) → scale(1.4) → scale(1)` over 300ms, `ease-in-out`. One pulse only — not looping. **Art-deco keyline borders:** Section-level wrapping borders use a stepped keyline pattern: the outer rule is 1.5px solid `#2C1E0F`, inset 8px is a 0.5px rule in `#8B6F4E`. Between them, the corner regions are filled with a stepped notch (3×3px L-shaped cut) rather than a simple mitre — referencing the Chrysler Building's brick-corbel crown detail. ## Prompts for Implementation Build `logical.day` as **a single long-scrolling tutorial page** — a machinist's process log for one complete technical procedure. The narrative arc is linear: gather materials → prepare environment → execute steps → inspect results → understand what happened and why. No navigation, no sidebar, no table of contents at the top (there is a floating, minimal step-count indicator at the viewport's top-right: "Step 03 / 07", set in `Cormorant SC` at 13px, updating on scroll-enter events). **Implementation priorities (in order):** 1. **Establish the grid-lines substrate first.** Before any content, render the `position: absolute` SVG grid behind the content column. The grid lines must snap to the 28px leading grid and align with the 64px, 128px, and 900px layout breakpoints. Get this right before touching typography. 2. **Build the timeline spine and diamond connectors.** The spine is a single `
` with `position: absolute; left: 64px; top: 0; bottom: 0; width: 2px; background: #2C1E0F`. Diamond connectors are absolutely positioned at each step's `offsetTop`. The `border-animate` treatment on the spine is a second `
` (child of the spine) with a CSS animation using `background-size: 100% 0` → `background-size: 100% 100%` triggered by an `IntersectionObserver` at 40% threshold. 3. **Implement the border-animate on prerequisites blocks.** Use SVG `` with `stroke-dasharray` equal to the element's perimeter and `stroke-dashoffset` animating from `perimeter → 0` on scroll-enter. The stroke color is `#C5A96B`. Use `ResizeObserver` to recalculate perimeter on viewport change. 4. **Typography rendering.** Load `Cormorant Garamond:ital,wght@0,300;0,600;1,300`, `Cormorant SC:wght@400;700`, `Lato:wght@400;600`, `JetBrains Mono:wght@300;400;500` from Google Fonts with `display=swap`. Use CSS custom properties for the full type scale: `--type-display`, `--type-step`, `--type-body`, `--type-code`, `--type-annotation`. 5. **Stepped fan ornaments.** Build these as a reusable SVG component. Input: `width` (default 48px), `rays` (default 7), `fill` (default `#2C1E0F`). The Fibonacci ray-widths must be computed in JS and passed as `d` attributes. Place one fan per step header, positioned immediately right of the step numeral, baseline-aligned. 6. **Running chevron code-block headers.** Use an SVG `` element defined in a `` block at document head. The pattern tile is a single `` in `#2C1E0F` at 40% opacity. Apply as `fill: url(#chevron-pattern)` on a `height: 4px` `` spanning each code block's full width. 7. **Organic blob layer.** Four SVG blobs, `position: fixed`, `z-index: 0`, `pointer-events: none`. Each blob: ~10 control points, `filter: blur(32px)`, `opacity: 0.04`, `fill: #2C1E0F`. Place them at: top-left (behind step 1–2), top-right (behind annotation gutter), center-left (behind step 4–5), bottom-right (behind final inspection). They must not obscure text — the blur and 4% opacity guarantee this. 8. **Annotation gutter.** The gutter annotations are `position: absolute` elements placed at `top: [step-offsetTop + annotation-relative-offset]` in the gutter zone. They connect to their inline superscripts via an SVG overlay (same `position: absolute`, full content-column width) containing dotted `` elements from the superscript's position to the annotation's left edge. Use `MutationObserver` to reposition on DOM change and `ResizeObserver` for viewport changes. 9. **Step-count floating indicator.** `position: fixed; top: 24px; right: 24px`. Updates its text content (`Step XX / YY`) via `IntersectionObserver` on each step's diamond connector. Appears with a 200ms fade-in on first scroll past step 1 header. 10. **Inspection trapezoids.** Use CSS `clip-path: polygon(0% 0%, 100% 0%, 100% 94%, 96% 100%, 0% 100%)` for the stepped-corner effect. Background `#E8E0C8`. The keyline borders (outer 1.5px `#2C1E0F`, inner 0.5px `#8B6F4E`) are implemented as `outline` + `box-shadow: inset 0 0 0 9px transparent, inset 0 0 0 9.5px #8B6F4E` — this maintains the gap between the two rules within the clip-path. **AVOID:** - CTA buttons, "Get Started" heroes, pricing comparisons - Any gradient that blends to a different hue family (browns only, no blue-to-amber) - Parallax (corpus at 82% — do not add) - Card grid layouts for steps (steps are a timeline, not a grid) - Hover effects that reverse to a dark background (the dark background belongs to code blocks only) **Story arc for implementation demo content:** Tutorial subject: "Building a deterministic finite automaton in Go — from grammar to working lexer." Seven steps: (1) Understand the state model, (2) Define the alphabet struct, (3) Build the transition table, (4) Implement the recognizer loop, (5) Handle error states and panics, (6) Write the tokenizer wrapper, (7) Inspect the output with the debug printer. This content fits the site name (`logical.day`) and the tech-tutorial tone without being generic. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: art-deco, layout: timeline-vertical, typography: humanist, palette: duotone, patterns: border-animate, imagery: organic-blobs, motifs: grid-lines, tone: tech-tutorial **Differentiators from the existing corpus (212 designs analyzed):** 1. **Art-deco aesthetic at 0% corpus frequency, applied to tech-tutorial content.** No other design in the registry combines 1920s Bauhaus ornamental geometry with programming instruction. The stepped fan ornaments, chevron code-block headers, and keyline border-bevel are art-deco vocabulary repurposed as information hierarchy markers — not decorative overlay. 2. **Strict duotone palette discipline (1% corpus frequency) with a six-tone derivation system.** All six colors (`#2C1E0F`, `#F0EAD6`, `#8B6F4E`, `#E8E0C8`, `#D4C4A0`, `#C5A96B`) are derived from a single brown-amber hue axis. The corpus overwhelmingly uses multi-hue palettes. This site has no hue variety whatsoever — only tonal variation within one family. 3. **Timeline-vertical layout with annotation gutter (0–1% corpus frequency for this specific structure).** The corpus is 89% centered and 76% full-bleed. This design is neither: it has a hard left-edge spine, a content column, and an annotation gutter — the spatial grammar of an illuminated manuscript or an engineering change order, not a web page. The annotation gutter is the most unusual structural element in the registry. 4. **Border-animate as primary interaction pattern (1% corpus frequency), not as decoration.** In the corpus, animated borders appear as hover sparkle or loading indicators. Here, border-animate is the *scroll-reveal mechanism* — prerequisites blocks and inspection callouts materialize as their borders draw. The border-draw IS the entrance animation. 5. **Grid-lines motif (3% corpus frequency) as a semantic blueprint layer.** The grid is not a background texture — it encodes the layout's own structure (spine at 64px, content zone at 128px–900px) and responds to user interaction (vertical rules brightening on step hover). The grid is the page's self-documentation. **Avoided overused patterns (per frequency analysis):** - parallax (82% corpus) — completely absent - stagger animations (58%) — not used - centered layout (89%) — replaced with asymmetric timeline spine - hand-drawn aesthetic (60%) — replaced with mechanical precision geometry - vintage motifs (47%) — avoided; art-deco here is 1920s Bauhaus, not sepia nostalgia - editorial aesthetic (50%) — replaced with process-manual instructional structure