# Design Language for logic.day

## Aesthetics and Tone

logic.day is a **topographic edition of inference** — a magazine-format journal where formal logic diagrams (truth tables, Karnaugh maps, proof trees) have been plate-printed onto geological survey paper and photographed receding into mountain fog. The page is read the way you'd read a cartographic spread: horizontally first (scanning the columns for structure), then vertically (descending into detail as elevation decreases). The atmosphere is retro-futuristic in the sense of 1970s NASA mission-planning documents crossed with a Soviet-era mountaineering almanac — authority without decoration, precision against wilderness.

The site is not a dashboard. It is not a blog with hero imagery. It is not a logic-education platform dressed up in gradients. It exists as a single archival object: one found document from a discipline that believed thinking well was a physical act, like climbing.

What this site feels like: you are holding a large-format journal, its pages smelling of altitude and ammonia prints. The typography weighs. The whitespace is fog, not emptiness. Diagrams sharpen at the top and dissolve at the bottom edge of every spread.

**Design Thesis:** Logic rendered as landscape — inference diagrams printed at full bleed on geological survey stock, sharpening at the peak and dissolving into gradient-mesh haze at the valley, so that formal precision and atmospheric mystery occupy the same visual surface simultaneously.

**Avoid Tropes:**
1. Tech-purple / electric-blue gradient hero sections masquerading as depth
2. Card-grid layouts that fragment ideas into bite-sized tiles
3. "Clean modern" editorial that uses whitespace as an aesthetic gesture rather than a compositional structure
4. Logic diagrams used decoratively without architectural role in the layout

**Privilege:**
1. Blur-focus depth — foreground elements (column type, diagram nodes) sharp; midground hatching soft; background gradient-mesh fully dissolved into atmosphere
2. Editorial mass — full two-column magazine spread with gutter tension, not a centered single-column text stack
3. Uncanny overlap — where a truth-table grid becomes a topographic contour-line diagram without announcing the transformation
4. Ceremonial weight — type is set with lead-printing gravity; line heights, optical margins, and column gutters are not incidental

## Layout Motifs and Structure

The page is constructed as a **horizontal magazine spread at full viewport width**, divided into two primary columns of unequal measure: a narrow left column (`28vw`) and a wide right column (`66vw`) with a `6vw` gutter between them. This is not a sidebar — the two columns are co-primary and carry different types of content simultaneously, the way facing pages of a printed journal do.

**Depth Layering (blur-focus):**
The vertical axis of the page encodes atmospheric depth. The top 30% of each section — the "summit zone" — renders at full sharpness: clean hairline typography, sharp diagram lines at 1px, fully opaque. The middle 40% — the "treeline zone" — applies a progressive `blur(0px → 1.2px)` to background texture elements only while foreground type stays sharp. The bottom 30% — the "fog zone" — renders the gradient-mesh backdrop at near-full opacity, background geometry dissolves, and only the topmost z-index elements (running headers, footnote numerals) remain crisp.

**Column Architecture:**
- Left column holds running numerals, section-classification tags, and lateral diagram annotations — set flush-right at the column edge, acting as a marginalia system.
- Right column holds the primary editorial body: long-form text, proof trees, spread-width diagrams.
- The gutter is not empty: it carries a continuous `1px` vertical rule that terminates at each section break with a small `×` registration mark, borrowed from print production.

**Spread Structure (top to bottom):**
1. **The Masthead Zone** (`100svh`): Full-bleed gradient-mesh backdrop in slate, ash, and ice-blue. The masthead "logic.day" is set in the left column, large, with the volume/issue metadata running vertically along the left rule. The right column is occupied by a full-height generative proof tree — nodes connected by thin lines, labels typeset in tabular figures, the lower nodes fading into fog blur.
2. **The First Spread** (`~180svh`): Three articles scroll vertically, each treated as a two-column spread. Each article begins with a full-bleed section opener image (gradient-mesh, mountain texture) that bleeds into the left margin. Body text is set in the right column.
3. **The Diagram Fold** (`~120svh`): One section is devoted to a single large diagram — a Karnaugh map whose grid lines align precisely with the topographic contour lines of the gradient-mesh background underneath. The map occupies both columns and bleeds 40px into each margin.
4. **The Index** (`~80svh`): A typographically-dense reference section. Right column only. Left column holds only a large tabular numeral.

**Pacing:** The scroll advances the atmospheric depth — summit at the top of the page, valley/fog at the bottom. Every scroll increment brings you deeper into haze. The gradient-mesh intensifies downward. The mountain "descends" as you read.

**Asymmetry is structural, not decorative:** The unequal column widths, the off-center gutter rule, and the left-column marginalia create visual asymmetry through mass distribution. Primary typographic objects (headlines, body text, diagram labels) are upright and properly aligned. No primary element is tilted.

## Typography and Palette

**Typography (Google Fonts only — eclectic-hybrid stack with four voices):**

- **Masthead / Display:** `IBM Plex Mono` — weight 600, tracked at `0.04em`, set at `clamp(48px, 7vw, 96px)`. The monospace construction reads as typewriter-proof, as if the journal title was stamped rather than typeset. Used for "logic.day", section numerals, and large diagram labels.

- **Primary Body / Articles:** `Source Serif 4` — weight 300 for long paragraphs, weight 600 for deck introductions. `optical-sizing: auto`. Set at 17px/1.72 in the right column. The optical-size axis at small sizes gives it the authority of a well-printed journal without Victorian ornament.

- **Marginalia / Left Column / Tags:** `Space Mono` — weight 400, 11px, letterspacing 0.08em, uppercase. Used for all left-column text: section numbers like `§ 3.2`, classification tags like `PROPOSITIONAL`, footnote keys. Reads as annotation from a technical instrument manual.

- **Diagram Labels / Mathematical Notation:** `Noto Serif` — weight 400, italic variant for variables, upright for operators. Set at 13px for node labels, 10px for edge annotations. Inherits the authority of mathematical typesetting without requiring specialized LaTeX rendering.

**Palette — retro-futuristic slate/ice/rust authored set:**

- `#0E1117` — Deep space slate. Primary background of masthead and fog zones. The colour of a mountain valley at 04:00 before nautical twilight.
- `#1C2333` — Elevated slate. Section backgrounds, body column ground. Warmer than the deep, reads as ambient.
- `#2E3D52` — Midrange blue-slate. Card-like zones inside the body column, the treeline zone background.
- `#8FA8C8` — Ice-blue grey. Primary body text, diagram lines, the color of a glacier photographed under flat overcast light.
- `#C4D4E8` — Near-white ice. Headlines, masthead text, high-contrast diagram node labels.
- `#4A6741` — Mountain moss green. Used sparingly — only for "true" states in truth tables and for the section-complete registration mark. Reads as a living signal against the slate field.
- `#C87941` — Oxidized copper. Used for "false" states, for error-case callouts, and as the color of the gutter rule. Retro-futuristic warmth that reads as amber instrument panel, not alarm.
- `#E8DCC8` — Survey-paper cream. Used for exactly one thing: the background of the Karnaugh map diagram section, where the grid appears on a material that looks like physical drafting stock.

**Type rhythm:** Body column line-length holds between 65–72 characters. Baseline grid is `8px`. All spacing values are multiples of `8px` or `4px` (half-grid). Column margins are `clamp(24px, 4vw, 64px)`.

## Imagery and Motifs

**No photographs. No stock. No UI screenshots. No product imagery.**

The visual world is built from three families of generated form:

1. **Gradient-Mesh Mountain Atmospheres.** The primary backdrop imagery: CSS `radial-gradient` and `conic-gradient` compositions that describe mountain silhouettes in fog — not representationally, but topographically. A typical masthead backdrop uses three overlapping radials: a cold blue peak `(#1C2333 → transparent)` centered at `30% 20%`, a warmer grey mass `(#2E3D52 → transparent)` centered at `70% 60%`, and a deep atmospheric ground `(#0E1117)` at full bleed. The gradients are not decorative backgrounds — they are the mountain.

2. **Generative Proof Trees and Logic Diagrams.** SVG structures built at page-render time (or authored as inline SVGs): binary proof trees where each node is a 20px circle with a 1px stroke in `#8FA8C8`, connected by 0.8px lines. Variables at leaf nodes label in `Space Mono` 10px. Each tree is unique, never repeated. Karnaugh maps use a `1px` grid in `#4A6741` on `#E8DCC8` stock — the grid cells shade with `0.12` opacity fills in the moss/copper colors.

3. **Blur-Focus Treatment on Background Geometry.** The gradient-mesh backdrops in the treeline and fog zones receive a `CSS filter: blur(2px) brightness(0.7)` applied to a `::before` pseudo-element. The blur is not applied to text or diagram elements — only to the atmospheric layer. This creates the sensation of reading a page mounted in front of a mountain in cloud.

**Recurring Motifs:**

- **The Contour Line:** Single `1px` horizontal rules at irregular vertical intervals (not decorative spacing rules — placed to echo the topographic contour structure of the gradient backdrop). They appear in `#2E3D52` at 20% opacity behind text columns.
- **The Registration Mark:** `×` at `0.8em`, in `Space Mono`, `#C87941`, placed at every section terminus in the gutter. A reference to print production; a signal that something has been verified.
- **The Node Circle:** Every truth-table row terminus, every proof-tree node, every Karnaugh cell is anchored by a circle — not a bullet, a geometric node form. They appear at 12px diameter, `1px` stroke, no fill.
- **The Survey Grid:** A `40×40px` SVG pattern of `0.4px` lines in `#8FA8C8` at `3%` opacity, present everywhere as a universal ground — the geological survey sheet the entire document is "printed on."

## Prompts for Implementation

Build logic.day as a **single-document archival journal spread** where the visitor reads downward through decreasing atmospheric clarity. The page has no navigation. No sticky header. No menu. The masthead is the only orientation device.

**Technical composition:**

- The two-column layout uses CSS Grid: `grid-template-columns: 28vw 6vw 66vw`. The gutter column holds only the vertical rule (`::after` pseudo-element, `1px`, `#C87941`, `height: 100%`).
- Implement the atmospheric depth system using three stacked layers per section: `(1)` a `position: absolute` backdrop div holding the gradient-mesh, `(2)` a `position: relative` content layer at full z-index, `(3)` a `position: absolute` fog overlay div with `backdrop-filter: blur(0px)` at the summit and `blur(2.5px) brightness(0.6)` at the valley (animated on scroll using `IntersectionObserver`).
- The survey grid background is a single `<svg>` pattern referenced via CSS `background-image`. Apply at `position: fixed` with `z-index: -1` and `opacity: 0.03`.
- The gradient-mesh mountain — masthead backdrop specifically — should use a `<canvas>` element with a static generative draw: a set of 6–8 overlapping `radialGradient` fills drawn in one render pass at load. No animation, no loop. Static atmospheric image.

**Proof tree rendering:**
Generate the main proof tree (masthead section) as inline SVG. The tree has 4 levels, 15 nodes total. Root node sits at `top: 8%` of the right column, centered. Leaf nodes sit at `top: 72%` of the right column. Each node is a `<circle r="10" stroke="#8FA8C8" stroke-width="1" fill="none"/>`. Labels are `<text>` in `Space Mono` 10px. Lines are `<line stroke="#4A6741" stroke-width="0.8"/>`. The lowest two rows of nodes have `opacity: 0.3` — they are dissolving into fog.

**Scroll behavior:**
- On scroll past the masthead, the gradient-mesh backdrop intensifies: implemented with a CSS custom property `--fog-depth: 0` incremented by a `scroll` event listener. The property controls `backdrop-filter: blur(calc(var(--fog-depth) * 2.5px))` on the fog overlay.
- No parallax on primary content elements. Only the atmospheric layer shifts — foreground stays fixed to the reading plane.
- Section transitions use a `200ms` `opacity: 0 → 1` fade as each section enters the viewport via `IntersectionObserver`. No slide, no scale.

**Typography loading:**
Load `IBM Plex Mono` (weights 400, 600), `Source Serif 4` (weights 300, 600, variable optical size), `Space Mono` (weight 400), `Noto Serif` (weights 400, 400 italic) via a single Google Fonts embed. Use `font-display: swap`. Set `font-optical-sizing: auto` on `Source Serif 4` globally.

**AVOID:**
- CTA buttons anywhere. No "Get Started", no "Learn More", no sign-up forms.
- Pricing or features grid.
- Stat numbers arranged in a 3-up grid.
- Floating card elements disconnected from the column grid.
- Making the proof trees decorative wallpaper — each must occupy a specific spatial position in the column structure.
- Applying blur to the text or diagram layers. Blur lives only in the atmospheric layer.
- Adding a navigation bar. The masthead IS the navigation.

## Uniqueness Notes

**Differentiators from the existing registry:**

1. **Logic diagrams as primary layout architecture, not decoration.** Other designs in the corpus use geometric forms or grids as background texture. logic.day uses proof trees and Karnaugh maps as load-bearing layout elements — the proof tree occupies the full right column of the masthead the way a photograph occupies a magazine spread, not as a decorative SVG watermark.

2. **Blur-focus as an atmospheric-depth system derived from the domain name.** The blur behavior encodes the concept directly: at the mountain summit (page top), logic is sharp, axioms clear. As you descend into the valley (page bottom), inference becomes diffuse, the atmosphere takes over. This is a domain-specific use of `blur-focus` — not a fashionable depth-of-field effect but a conceptual statement about where certainty lives.

3. **Retro-futuristic materiality is geological and archival, not neon.** The corpus shows retro-futuristic at 3% and most examples reference chrome/neon/vaporwave. logic.day's retro-futurism is a 1970s geological survey crossed with mission-control — `IBM Plex Mono` on slate, survey-paper cream, oxidized copper, moss green. No neon. No chrome. The "future" implied is austere and analytical, not spectacular.

4. **The two-column magazine-spread enforced at structural level.** Magazine-spread appears at 4% in the corpus. logic.day's use is distinguished by making the asymmetric column split (`28vw / 6vw / 66vw`) the irreducible structural fact of the page — the left column is always marginal, the right is always body, and nothing flips or stacks until the viewport is narrower than 680px.

**Chosen seed:** `aesthetic: generative, layout: magazine-spread, typography: eclectic-hybrid, palette: retro-futuristic, patterns: blur-focus, imagery: gradient-mesh, motifs: mountain-landscape, tone: mysterious-moody`

**Avoided patterns from frequency analysis:**
- `parallax-sections` (11% — overused): fog depth is simulated via blur and opacity, not parallax scrolling of content elements
- `gradient-mesh` as hero wallpaper (8% — overused): here gradient-mesh is the mountain, a structural metaphor, not a decorative gradient layer behind hero text
- `generative` as particle animation (11% — overused): generative here means static proof trees rendered to SVG, not canvas particle systems
- `horizontal-scroll` (3%): rejected — the magazine-spread is vertical in scroll, horizontal in layout structure
- Any layout that could serve a different domain unchanged: the logic diagram system, the fog-depth scroll metaphor, and the survey-paper Karnaugh section are inseparable from the domain name and concept
<!-- DESIGN STAMP
  timestamp: 2026-05-08T11:25:03
  domain: logic.day
  seed: seed:
  aesthetic: logic.day is a **topographic edition of inference** — a magazine-format journal ...
  content_hash: 84fdcbc4875f
-->