# Design Language for diplomacy.day ## Aesthetics and Tone A sunrise-gradient news portal for daily diplomatic developments -- diplomacy.day renders as a warm, optimistic morning briefing where gradient horizons shift from night-blue to dawn-gold across the viewport, and content is delivered with the measured clarity of a quality morning newspaper. The editorial aesthetic draws from broadsheet design traditions: strong headlines, disciplined columns, and typographic hierarchy that guides the eye efficiently. The "day" in the domain becomes the design's organizing metaphor -- a new day, a new chance for diplomatic progress. The tone is editorial-hopeful: informed, balanced, and grounded in the belief that diplomacy works. Language is precise and current. Each section feels like turning to the next page of a well-edited morning edition. ## Layout Motifs and Structure The layout uses a **newspaper grid** -- a 3-column layout with a strong masthead and clear typographic hierarchy. **Grid System:** - 3 columns at max-width 1080px, 32px gutters - Masthead spans all 3 columns with the domain name and a thin rule below - Lead story spans 2 columns; sidebar stories in column 3 - Below the fold: equal 3-column grid for secondary stories **Section Flow:** 1. **The Masthead:** Full-width header with "DIPLOMACY.DAY" in serif caps, date, thin rules above and below. 2. **Above the Fold:** Lead story (2 cols) + sidebar briefs (1 col). 3. **The World:** 3-column equal grid of diplomatic topic areas. 4. **The Horizon:** Closing section with the sunrise gradient background -- dawn gold to sky blue. ## Typography and Palette **Typography:** - **Headlines:** "Playfair Display" (Google Fonts) at 2.5rem-4rem, weight 700, line-height 1.1. - **Body:** "Source Serif 4" (Google Fonts) at 1rem, weight 400, line-height 1.7. - **Masthead:** "Playfair Display" at 1.2rem, weight 400, letter-spacing: 0.25em, all-caps. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Night Blue | Dark base | #0a1830 | Top background | | Dawn Gold | Accent | #e8a838 | Highlights, rules | | Sky Blue | Light accent | #4a90d0 | Links, secondary accent | | Newsprint | Background | #f8f4ec | Content area background | | Ink | Text | #1a1a18 | Body text | | Rule Grey | Dividers | #c8c0b0 | Column rules, dividers | ## Imagery and Motifs **Sunrise Gradient:** The hero background uses a gradient from Night Blue at top to Dawn Gold at the horizon line to Sky Blue, creating a literal sunrise behind the masthead. **Column Rules:** Thin 1px vertical lines in Rule Grey between columns, echoing newspaper column dividers. **Dateline Stamps:** Each story section begins with a small date/location label in caps, letter-spaced, in Dawn Gold. **Thin Rules:** 1px horizontal rules in Dawn Gold separate sections, referencing broadsheet design. ## Prompts for Implementation Build as a morning newspaper the user opens at sunrise. The masthead loads with the sunrise gradient visible behind it, fading from dark to golden. Content below appears on scroll with newspaper-crisp entry (no animation, just visibility). Column rules provide structure. The layout is dense but readable, like a quality broadsheet. The Horizon closing section returns to the full gradient. Avoid all web-app conventions: no cards with shadows, no CTAs, no icons. Pure editorial typography and layout. ## Uniqueness Notes 1. **Sunrise gradient as editorial backdrop:** The literal dawn-to-day gradient behind a newspaper masthead merges time-of-day theming with editorial design. 2. **Broadsheet 3-column grid:** Authentic newspaper column layout with vertical rules is rare in web design. 3. **Dateline stamps as section markers:** Location/date labels in the journalistic tradition provide unique navigational anchors. 4. **Editorial typography hierarchy:** The strict Playfair/Source Serif pairing with precise size ratios creates print-quality typographic depth. Document chosen seed/style: aesthetic: editorial, layout: newspaper-grid, typography: serif-broadsheet, palette: sunrise, patterns: column-rules, imagery: gradient-horizon, motifs: dateline-stamp, tone: editorial-hopeful Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%)