# Design Language for rational.today ## Aesthetics and Tone rational.today channels a swiss aesthetic — the precision, grid-discipline, and typographic clarity of Swiss International Style applied to a daily rational analysis and commentary platform. The site grids — Müller-Brockmann's mathematical compositions, Helvetica's neutral authority, and the belief that rational thought is best served by rational design. Inspiration draws from the poster design of Josef Müller-Brockmann, the typographic systems of Jan Tschichold, the grid foundations of Karl Gerstner, and the systematic identity work of Wim Crouwel. The tone is futuristic-cutting-edge — forward-looking, technology-embracing language that positions daily rational analysis at the leading edge of intellectual discourse. ## Layout Motifs and Structure The layout uses a **horizontal-scroll** architecture — content organized in a side-scrolling sequence that creates the news-ticker quality of daily rational updates flowing across the screen like market data. **Horizontal Scroll Architecture:** - Horizontal scroll container: 100vh height - Content panels: 80-90vw width, side by side - Scroll snap: snap to each panel start - 6-8 panels for daily analysis sections - Navigation: minimal index markers at top - The horizontal scroll creates the real-time feed quality of rational analysis flowing continuously **Section Sequence:** 1. **Today:** First panel with frutiger-clean title on warm-earthy swiss gradient, minimal clean data illustrations, organic-blobs softening geometry 2. **Analysis:** Daily insights in horizontal panels — tilt-3d interactive perspective engagement with minimal clean analytical graphics 3. **Deep Dive:** Featured analysis in wider panel with organic-blobs flowing soft accents and minimal precise data visualization 4. **Brief:** Quick rational notes in compressed panels with minimal concise summaries 5. **Tomorrow:** Final panel as forward look — futuristic-cutting-edge closing with organic-blobs resolved forms and forward-looking farewell ## Typography and Palette **Typography:** - **Headlines:** "Albert Sans" (Google Fonts) — Frutiger-clean humanist sans at 2.2rem-3rem, weight 700. Its clear, rational forms create the Swiss-design quality of typography serving communication with maximum clarity. - **Body Text:** "Albert Sans" at 0.9rem, weight 400, line height 1.8. - **Accent:** "Albert Sans" at 1rem, weight 600 for analysis labels and daily markers. - **Labels:** "Albert Sans" at 0.65rem, weight 600, uppercase, letter-spacing 0.1em. **Color Palette:** - **Earth Warm:** #f4ede4 — warm earth for backgrounds - **Earth Surface:** #e8dcd0 — warm surface for panels - **Earth Charcoal:** #2c2820 — warm charcoal for primary text - **Earth Rust:** #b06840 — warm rust for primary accent - **Earth Olive:** #708050 — muted olive for secondary accent - **Earth Light:** #faf6f0 — light earth for panel highlights - **Shadow Earth:** #988870 — earth shadow for secondary text - **Border Earth:** rgba(44,40,32,0.06) — warm minimal border ## Imagery and Motifs **Minimal Clean Data Graphics:** Daily analysis illustrated through minimal geometric data forms — thin lines (1px), small circles (4-6px), and rectangles as simplified chart elements in Earth Charcoal at 0.15 opacity. The minimal graphics create the Swiss-design quality of data reduced to essential visual forms. **Tilt-3D Perspective Engagement:** Analysis panels respond to cursor with subtle tilt — transform: perspective(1000px) rotateY(var(--tilt, 2deg)) shifting based on horizontal cursor position within panel. Transition: 200ms ease-out. The tilt creates the tangible quality of handling a printed daily brief. **Organic-Blobs Softening Geometry:** Soft, amorphous blob shapes (60-100px) in Earth Rust and Earth Olive at 0.03 opacity providing organic counterpoint to Swiss geometric precision. CSS: border-radius: 40% 60% 50% 50% / 55% 45% 55% 45%. The blobs soften the grid-discipline with warm, human irregularity. **Warm-Earthy Swiss Atmosphere:** Background uses restrained warm tones — linear-gradient(90deg, rgba(176,104,64,0.02), rgba(112,128,80,0.015), transparent). The warm earth palette creates the quality of Swiss design printed on premium warm-toned stock. **Grid Registration Marks:** Small cross marks (+, 8px) at grid intersection points in Earth Charcoal at 0.04 opacity. The registration marks create the print-production quality of Swiss design in its final proof stage. ## Prompts for Implementation Build the page as a swiss daily rational analysis feed. Horizontal: .swiss-feed { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 100vh; } .swiss-panel { min-width: 85vw; scroll-snap-align: start; padding: 60px 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #f4ede4; } Tilt-3d: .analysis-card { transition: transform 200ms ease-out; transform-style: preserve-3d; } /* JS: track cursor horizontal position, apply subtle rotateY */ Organic blob: .warm-blob { position: absolute; width: var(--blob-size, 80px); height: var(--blob-size, 80px); border-radius: 40% 60% 50% 50% / 55% 45% 55% 45%; background: var(--blob-color, rgba(176,104,64,0.03)); } Minimal data: .data-line { height: 1px; background: rgba(44,40,32,0.15); } .data-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(44,40,32,0.15); } Registration mark: .reg-mark { width: 8px; height: 8px; position: relative; } .reg-mark::before { content: ''; position: absolute; width: 8px; height: 1px; top: 50%; background: rgba(44,40,32,0.04); } .reg-mark::after { content: ''; position: absolute; height: 8px; width: 1px; left: 50%; background: rgba(44,40,32,0.04); } AVOID: Standard news dashboards, corporate analysis platforms, and minimal data feeds. Let Swiss precision and futuristic-cutting-edge language create a daily rational analysis platform where each day's insights are presented with the typographic authority of International Style design. ## Uniqueness Notes 1. **Swiss for daily rational analysis:** International Style precision makes daily commentary feel like authoritative, grid-disciplined journalism. 2. **Horizontal-scroll as news ticker:** Side-scrolling panels create the real-time feed quality of market-data-style continuous analysis. 3. **Organic-blobs against Swiss grid:** Soft forms soften geometric precision with the warmth of human irregularity. 4. **Registration marks as print proofing:** Cross marks create the print-production quality of design in its final quality-check stage. 5. **Tilt-3D as tangible brief:** Perspective response creates the physical quality of handling a printed daily analysis document. **Seed/Style:** aesthetic: swiss, layout: horizontal-scroll, typography: frutiger-clean, palette: warm-earthy, patterns: tilt-3d, imagery: minimal, motifs: organic-blobs, tone: futuristic-cutting-edge **Avoided Overused Patterns:** corporate aesthetic (87%), parallax patterns (92%), asymmetric layout (90%), mono typography (93%), warm palette (94%), friendly tone (88%), minimal imagery (92%). This design uses swiss aesthetic, horizontal-scroll layout, warm-earthy palette, minimal imagery, and futuristic-cutting-edge tone.