# Design Language for logical.day ## Aesthetics and Tone logical.day channels an ethereal aesthetic — translucent layers, soft luminescence, and the dreamlike quality of abstract thought made visible. The site presents logic as something beautiful and otherworldly, where boolean operations dissolve into soft gradients and syllogisms float in luminous space. Inspiration draws from the soft-focus beauty of Olafur Eliasson's light installations, the clean precision of mathematical notation, the luminous translucency of jellyfish, and the gentle glow of fiber optic networks in darkness. The tone is authoritative — logic presented with confident clarity, each concept delivered with the certainty of mathematical proof. The single-column layout creates a focused, meditative reading path that mirrors the linear progression of logical arguments. ## Layout Motifs and Structure The layout uses a **single-column** architecture — content presented in a single focused stream, eliminating lateral distraction and creating a contemplative, thesis-like reading experience. **Single-Column Architecture:** - Content width: 680px centered, with generous 100px vertical section spacing - No sidebar, no multi-column sections — pure vertical flow - Each section is a complete logical unit (premise, argument, conclusion) - Progressive disclosure: content reveals as the user scrolls, each section building on the last - Pull-quotes and emphasis blocks indented or outdented by 40px for visual variety **Section Sequence:** 1. **Axiom:** Clean hero with logical.day title in frutiger-clean type, a single defining statement about logic, and soft wave-form background animations 2. **Premises:** Core concept cards presented sequentially — each a single-column block with vector art illustration and explanatory text 3. **Deductions:** Feature deep-dives with progressive-disclosure accordion sections that unfold as the user engages 4. **Waveform Gallery:** Full-width break with animated wave-form visualizations in neon dopamine colors 5. **Theorem:** Concluding footer with a final logical statement and minimal links ## Typography and Palette **Typography:** - **Headlines:** "Albert Sans" (Google Fonts) — clean humanist sans at 2.5rem-3.5rem, weight 700. Its Frutiger-inspired clarity channels Swiss design precision for logical concepts. - **Body Text:** "Albert Sans" at 1rem, weight 400, line height 1.8. Consistently clean reading for logical arguments. - **Code/Logic:** "Fira Code" (Google Fonts) — ligature monospace at 0.9rem for logical notation, code examples, and truth tables. - **Pull Quotes:** "Albert Sans" at 1.4rem, weight 300, italic for emphasized logical statements. **Color Palette:** - **Neon Violet:** #8a40ff — vivid purple for primary accents and interactive elements - **Neon Cyan:** #00d4ff — electric blue for secondary accents and links - **Neon Rose:** #ff4080 — vivid pink for emphasis and highlights - **Deep Space:** #0a0a14 — near-black with blue undertone for primary background - **Soft Void:** #14141e — slightly lighter dark for card backgrounds - **Luminous White:** #f0f0fa — bright near-white for primary text - **Dim Mist:** #6a6a80 — muted gray-purple for secondary text - **Glow Yellow:** #f0e040 — bright yellow for occasional accent highlights ## Imagery and Motifs **Vector Art Logic Diagrams:** Logical concepts illustrated as clean vector diagrams (SVG) — Venn diagrams with gradient fills, truth tables as geometric grids, flowcharts with neon-edged nodes. All rendered in the neon palette with subtle glow effects (filter: drop-shadow(0 0 4px currentColor)). **Wave-Form Background Animations:** Sinusoidal wave patterns (CSS or SVG) animate slowly across section backgrounds — multiple overlapping sine waves in Neon Violet, Neon Cyan, and Neon Rose at 0.06-0.1 opacity, creating the visual metaphor of logical signals propagating through space. **Progressive-Disclosure Sections:** Content sections start with a headline and single-sentence summary. A "Expand proof" trigger (styled as a logical operator symbol) reveals the full content with a smooth max-height transition (500ms ease-out). The expanding content uses opacity fade-in (0 to 1, 300ms, delayed 200ms) for a polished reveal. **Luminous Border Accents:** Key content blocks have a thin (1px) border that glows — border-color in Neon Violet with box-shadow: 0 0 8px rgba(138,64,255,0.2), creating ethereal edges that seem to emit light. **Logic Gate Decorative Elements:** Small SVG logic gate symbols (AND, OR, NOT, XOR) used as decorative markers at section breaks — 24px, stroke-only in Neon Cyan at 0.3 opacity, serving as visual punctuation between logical arguments. ## Prompts for Implementation Build the page as an ethereal single-column. Body: background: Deep Space. Container: max-width: 680px, margin: 0 auto. Sections: padding: 100px 0. Wave-form backgrounds: SVG paths with sinusoidal d attributes, animated with CSS @keyframes translateX from 0 to -100% over 20-30 seconds, infinite. Multiple overlapping waves at different speeds and colors create depth. Progressive disclosure: .collapsible-content { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 500ms ease-out, opacity 300ms ease 200ms; } .collapsible-content.expanded { max-height: 1000px; opacity: 1; } Luminous borders: border: 1px solid rgba(138,64,255,0.4); box-shadow: 0 0 8px rgba(138,64,255,0.15), inset 0 0 8px rgba(138,64,255,0.05). Logic gate decorations: inline SVGs, 24px square. AND gate: curved right side with flat left. OR gate: curved both sides. Stroke: Neon Cyan at 0.3 opacity, stroke-width: 1.5px, fill: none. Pull quotes: margin-left: -40px, border-left: 2px solid Neon Rose, padding-left: 24px, font-weight: 300, font-style: italic. AVOID: Dense multi-column layouts, busy navigation, and playful/casual visual elements. Let the single-column focus and ethereal neon luminescence create a contemplative logical experience. ## Uniqueness Notes 1. **Ethereal aesthetic for logic:** Presenting logical concepts as luminous, dreamlike entities creates unexpected beauty in abstract mathematical content. 2. **Single-column as logical argument structure:** The linear reading path mirrors the sequential nature of logical proofs — premise, deduction, conclusion. 3. **Progressive-disclosure as proof expansion:** Collapsible content sections model the mathematical pattern of stating a theorem then expanding its proof. 4. **Wave-form visualizations as signal metaphor:** Animated sine waves represent logical signals and truth-value propagation through systems. 5. **Logic gate decorative elements:** Using actual logic gate symbols as visual punctuation creates thematic coherence at every level of the design. **Seed/Style:** aesthetic: ethereal, layout: single-column, typography: frutiger-clean, palette: dopamine-neon, patterns: progressive-disclosure, imagery: vector-art, motifs: wave-forms, tone: authoritative **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses ethereal aesthetic, single-column layout, dopamine-neon palette, vector-art imagery, and authoritative tone.