# Design Language for diplomatic.day ## Aesthetics and Tone A clean Swiss-international design system for daily diplomatic briefings -- diplomatic.day renders with the precision and neutrality of Swiss graphic design: a strict grid, Helvetica-inspired typography, objective color use, and the belief that clarity is the highest form of respect for the reader. The Swiss aesthetic is inherently diplomatic: it takes no sides, presents information without editorial bias, and trusts the reader's intelligence. The tone is briefing-neutral: the voice of an official daily summary. No opinions, no adjectives of judgment. Facts are presented; context is provided; conclusions are left to the reader. ## Layout Motifs and Structure The layout uses a **Swiss grid** -- a strict 12-column system with mathematical precision. **Grid System:** - 12 columns, max-width 1200px, 24px gutters - Content blocks snap precisely to column boundaries - Strong left alignment with a wide left margin (columns 1-3 for labels, 4-12 for content) - Horizontal rules at mathematical intervals **Section Flow:** 1. **The Header:** Full-width top band with domain name, date, and a red accent bar (12px height, full width). 2. **The Briefing:** Label-content pairs in the Swiss layout -- left margin labels, right content. 3. **The Data:** Structured information in tables and lists with strict grid alignment. 4. **The Footer:** Minimal closing with a thin red rule. ## Typography and Palette **Typography:** - **Headlines:** "Inter" (Google Fonts) -- the modern Helvetica equivalent. Used at 2rem-3.5rem, weight 700, line-height 1.15. - **Body:** "Inter" at 0.95rem, weight 400, line-height 1.65. - **Labels:** "Inter" at 0.75rem, weight 600, letter-spacing: 0.04em, all-caps. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | White | Background | #ffffff | Primary background | | Black | Text | #1a1a1a | Primary text | | Swiss Red | Accent | #e02020 | Accent bar, emphasis | | Mid Grey | Secondary | #6a6a6a | Labels, secondary text | | Light Grey | Rules | #e0e0e0 | Grid lines, dividers | ## Imagery and Motifs **Red Accent Bar:** A bold 12px-height red bar spanning the full viewport width at the top of the page -- the Swiss design signature element. **Left-Margin Labels:** Section labels positioned in the left margin (columns 1-3) in small caps, grey, creating a persistent index alongside content. **Strict Rules:** 1px horizontal lines in Light Grey at consistent intervals separating content blocks. **Mathematical Whitespace:** Spacing follows a strict 8px baseline grid with section gaps at exactly 64px. ## Prompts for Implementation Build as an official briefing document. Everything loads instantly -- no animations (Swiss design is atemporal). The red bar is the first thing visible. Content is organized with Swiss precision: labels left, content right, separated by invisible grid lines. Tables are clean with minimal borders. The entire experience should feel like reading a perfectly typeset government document. No decoration, no personality beyond the system itself. The design IS the content delivery mechanism. ## Uniqueness Notes 1. **Swiss international style as diplomatic metaphor:** The neutrality of Swiss design perfectly embodies diplomatic objectivity. 2. **12px red accent bar as signature:** The bold top bar is a distinctive Swiss design element rarely implemented on the web. 3. **Left-margin label index:** Persistent labels in the left margin create a scannable document structure. 4. **Zero-animation design philosophy:** No transitions or animations -- information appears immediately, respecting the user's time. Document chosen seed/style: aesthetic: swiss-international, layout: swiss-grid, typography: helvetica-equivalent, palette: white-red-black, patterns: strict-rules, imagery: accent-bar, motifs: margin-labels, tone: briefing-neutral Avoided overused patterns: asymmetric layout (96%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)