# Design Language for historical.day ## Aesthetics and Tone A museum exhibition catalog for daily history -- historical.day presents each day as a curated gallery of historical events, objects, and figures, styled as a premium museum publication. The aesthetic is exhibition-catalog: generous whitespace, precise image-placeholder frames, and authoritative typography create the feel of a high-quality art book. Where historic.day is a newspaper and historic.quest is an adventure, historical.day is a museum -- reverent, curated, and visually refined. The palette is museum-neutral: warm grays, matte black text, and a single accent of exhibition teal for wayfinding. The tone is curatorial -- expert, measured, and tastefully presented, as if each historical entry were a carefully labeled museum artifact. ## Layout Motifs and Structure The layout uses a **gallery-column** architecture -- a wide single column with large content blocks, generous margins, and figure-caption pairs styled like museum wall labels. **Gallery System:** - Single column, max-width 800px, centered - Large vertical spacing: 120px between exhibits - Each "exhibit" is a content block with a placeholder frame (representing where an artifact image would be), a title, and a descriptive caption - Frame placeholders are rectangular divs with 1px border in #c0b8a8 and subtle inner shadow **Section Flow:** 1. **Exhibition Title (Hero):** "HISTORICAL.DAY" in spaced capitals, small (1.2rem), with today's date below in larger serif (2.5rem). A thin horizontal rule (1px, full-width) separates the title from the first exhibit. 2. **Featured Exhibit:** The day's most significant historical event, presented with a large placeholder frame (16:9 ratio), a bold exhibit title, and an extended wall-label description. 3. **Gallery Walk:** Additional events presented as smaller exhibits (1:1 square frames), arranged in pairs (2 per row) with brief descriptions styled as museum labels. 4. **Timeline Bar:** A horizontal scrolling mini-timeline showing related events from the same week/month. 5. **Museum Shop (Footer):** Links and credits styled as a minimalist museum footer with the institution's address-block convention. ## Typography and Palette **Typography:** - **Exhibit Titles:** "DM Sans" (Google Fonts) -- a clean geometric sans-serif with the precision of museum signage. Used at 1.2rem-2rem, weight 700, letter-spacing: 0.03em, text-transform: uppercase. - **Wall Labels:** "Source Serif 4" (Google Fonts) -- a refined text serif for descriptive body content, matching museum publication standards. Used at 0.95rem, weight 400, line-height 1.7. - **Dates/Meta:** "DM Sans" at 0.75rem, weight 500, letter-spacing: 0.05em, text-transform: uppercase, for datelines and metadata. - **Title Treatment:** "DM Sans" at 1.2rem, weight 400, letter-spacing: 0.15em, text-transform: uppercase for the main site title -- widely spaced for museum-signage effect. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Gallery White | Warm white | #f8f6f2 | Primary background -- gallery wall | | Frame | Warm gray | #c0b8a8 | Placeholder borders, dividers | | Text Primary | Matte black | #1a1a1a | Headlines, exhibit titles | | Text Body | Warm dark gray | #3a3a38 | Wall-label body text | | Text Meta | Medium gray | #7a7a78 | Datelines, metadata | | Teal | Exhibition teal | #1a7a7a | Accent, links, wayfinding | | Surface | Light warm gray | #f0ece4 | Placeholder frame interiors | ## Imagery and Motifs **Artifact Placeholder Frames:** Rectangular divs with 1px #c0b8a8 border and a #f0ece4 interior background serve as stand-ins for artifact images. These frames are the primary visual element -- they occupy space as art would in a gallery, commanding the viewer's attention through their proportions and placement. **Museum Wall Labels:** Descriptions are formatted as museum wall labels: exhibit title in uppercase sans, artist/date line in smaller text, description body in serif. Each label has a consistent left-aligned format. **Generous Margins:** The 120px vertical spacing between exhibits is itself a motif -- the whitespace functions as gallery wall space, giving each exhibit room to breathe. **Horizontal Rules as Floor Lines:** Thin 1px lines in #c0b8a8 appear between major sections, evoking the floor markings that separate exhibit areas in physical museums. **Minimal Interaction:** Hover effects are almost invisible: links gain a subtle underline, exhibit titles shift to teal (#1a7a7a). No animations, no transitions exceeding 100ms. Museums are quiet. ## Prompts for Implementation Build the page as a premium museum publication. The extreme whitespace is intentional -- it creates the contemplative atmosphere of a gallery where each piece is given room. Exhibit titles in widely-spaced uppercase DM Sans should feel like museum wall signage. Placeholder frames should be prominent -- they define the visual rhythm even without actual images. Wall-label formatting (title, date, description) should be consistent across all exhibits. The teal accent color appears only for wayfinding: links, active states, and the occasional emphasis. Everything should feel quietly authoritative -- the design says "this institution knows its subject." AVOID: busy layouts, bright colors, decorative elements, animations, marketing language, card shadows, rounded corners, playful typography. ## Uniqueness Notes 1. **Museum exhibition catalog as web design:** Translating the visual language of art museum publications to a historical content site creates a unique premium experience. 2. **Artifact placeholder frames as primary visual elements:** Empty frames commanding space like artworks is an unusual and evocative design choice. 3. **Museum wall-label typography system:** The consistent exhibit-title + date + description format applied to web content creates a distinctive curatorial structure. 4. **Extreme whitespace as gallery walls:** Using 120px+ spacing to simulate gallery viewing distance creates a contemplative digital atmosphere. Document chosen seed/style: aesthetic: exhibition-catalog, layout: gallery-column, typography: museum-signage, palette: gallery-neutral, patterns: minimal-hover, imagery: placeholder-frame, motifs: wall-label, tone: curatorial Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)