# Design Language for historic.day ## Aesthetics and Tone historic.day is a **living cartographic almanac** — a site that treats every calendar date as a geographic coordinate in time, with the visual language of a 19th-century natural history museum crossed with a mission-control HUD. The aesthetic imagines what it would look like if a Victorian botanical illustrator had been asked to redesign NASA's Apollo tracking room: watercolor washes of deep jewel tones — amethyst, teal, burgundy, saffron — suspended behind semi-transparent instrument overlays, Lottie-animated timeline needles, and isometric icon clusters that render historical events as three-dimensional objects floating in shallow relief. The tone is **scholarly-intellectual** without being cold. Every visual choice carries the weight of a primary source: colors reference the actual pigments used in illuminated manuscripts (iron-gall black, verdigris green, vermilion red, ultramarine blue); typography is set in a grotesque that reads like a stencil label on a museum vitrine; botanical motifs recur as the connective tissue between centuries — flowers that bloomed in 1415, 1776, 1945, and today drawn in the same continuous watercolor style, reminding visitors that nature continued its cycles regardless of human events. The experience is quiet but dense. Like lifting the cover of a well-preserved atlas: the grid is firm, the type is small but legible, the illustrations are jewel-bright, and the entire composition radiates the confidence of something that has been this way for a very long time. ## Layout Motifs and Structure The layout metaphor is the **HUD overlay on a watercolor field map** — a translucent instrument panel locked to a shifting, painterly ground. The underlying layer is always a soft wash of color, never a hard background; the UI elements float above it as semi-opaque panels with thin 1px borders, dashed connector lines, and subtle drop shadows that suggest depth without full glassmorphism. **HUD grid logic:** - The canvas is divided into a 12-column grid, but only **7 of those columns are ever occupied at once** — the other 5 remain as breathing room, creating asymmetric negative space that feels like a printed chart with margins. - A **fixed HUD frame** sits at the outermost edge of the viewport: top strip (date readout + event count), left rail (epoch taxonomy — Ancient, Medieval, Early Modern, Modern, Contemporary), right rail (live counter + rotating Lottie compass rose), bottom strip (timeline scrubber, always visible). - The **main content well** (center-left, 7 columns) uses a **card-over-wash** pattern: each historical event card is a translucent white rectangle (background: rgba(255,255,255,0.72), backdrop-filter: blur(4px)) floating over a watercolor zone. No hard shadows — only a 0.5px border in the panel's dominant jewel-color. - **Cross-hair reticles** appear at key layout intersections — thin SVG lines (1px, 15% opacity) that suggest alignment instruments, like a surveyor's field book. - On desktop (≥1280px): true HUD split. On tablet (768–1279px): left rail collapses to icon strip. On mobile (<768px): HUD strips compress to a top bar and bottom scrubber; cards stack full-width. **Spatial hierarchy:** 1. **Watercolor field** — full-page, behind everything, softly animated (Lottie wash bleed) 2. **HUD frame** — fixed, semi-opaque, instrument-grade 3. **Event cards** — floating, translucent, date-addressable 4. **Botanical overlay** — floral-botanical SVG paths that thread between cards as decorative connective tissue 5. **Isometric event icons** — 3D-perspective micro-illustrations, one per event card ## Typography and Palette **Typefaces (Google Fonts only):** - **Primary display / HUD labels:** `Barlow Condensed` (weights 300, 500, 700) — a grotesque-neo face with the compressed proportions of stencil lettering on instrument panels and specimen labels. Used at clamp(0.65rem, 1.2vw, 0.85rem) for all HUD readout text, uppercase, tracked at 0.12em. At H1 scale (the date hero), used at clamp(3.5rem, 8vw, 7rem), weight 300, tracking 0.04em — the condensed geometry reads as carved into a stone lintel. - **Body / card text:** `Libre Franklin` (weights 300, 400, 600) — a faithful digital revival of the Franklin Gothic grotesque family. Body text at 0.9rem/1.6, weight 300 for narrative prose, weight 600 for event titles. The slightly wide grotesque counters pair visually with the condensed display, creating a controlled tension between compressed and open. - **Monospace accents / dates:** `DM Mono` (weight 400) — for timestamp strings, coordinates, and event ID codes. Rendered at 0.75rem in the HUD strips, color: current panel jewel-tone at 80% opacity. **Palette — Jewel Tones (specific hex values):** | Role | Name | Hex | |---|---|---| | Parchment ground | Vellum Wash | #F5EFE0 | | Amethyst panel | Deep Amethyst | #5C3D7A | | Teal panel | Manuscript Teal | #1A6B6E | | Burgundy panel | Carmine Burgundy | #7A1F3D | | Saffron accent | Illumination Saffron | #D4880A | | Midnight frame | Observatory Midnight | #1B1F2E | | Botanical green | Verdigris | #3D6B4F | | Type dark | Iron Gall | #1C1612 | | Highlight | Vellum Bright | #FDFAF4 | **Color application:** - The parchment ground (#F5EFE0) is the global background, brushed with Lottie watercolor wash animations in amethyst, teal, or burgundy tones depending on the active epoch. - HUD frame elements use observatory midnight (#1B1F2E) at 88% opacity. - Event cards use a 72% white overlay; their 0.5px border takes the color of their epoch's jewel tone. - Botanical SVG paths are rendered in verdigris (#3D6B4F) at 35% opacity — present but not dominant. - Lottie wash animations blend between #5C3D7A and #1A6B6E as the page scrolls through epochs. ## Imagery and Motifs **Isometric event icons** are the primary imagery vocabulary. Each historical event card carries a single isometric icon rendered at 48×48px display size, drawn in a consistent 2:1 isometric projection with flat colors sampled from the jewel-tone palette. The icon subjects are rendered as objects, not pictograms: - A battle is an isometric compass rose with a cracked quadrant. - A scientific discovery is an isometric glass flask tilted at the projection angle, with a small watercolor splash escaping the rim. - A political event is an isometric quill and sealed document. - An artistic movement is an isometric open book with a botanical illustration visible on its right page. - A natural event is an isometric globe with a single wave or bloom emerging from the indicated region. Icons use only three colors: the epoch's jewel tone, iron gall (#1C1612), and vellum bright (#FDFAF4) — no gradients, no shadows. Each icon is an inline SVG so it can be precisely positioned and animated. **Floral-botanical motifs** thread through the design as decorative connective tissue — not as background texture, but as drawn paths that seem to grow between and around cards. These are SVG paths styled in verdigris at low opacity, depicting: - Sprig clusters of medieval herbs (angelica, woad, madder) referencing the actual plants medieval chroniclers used to make ink and pigment. - A continuous vine that grows along the left rail of the HUD as the visitor scrolls deeper in time — the vine is thicker and more complex in recent centuries, sparse and skeletal in ancient epochs, suggesting how documentation density increases over time. - Pressed flower silhouettes appearing behind event cards as watermark-level layer elements at 8% opacity. **Lottie animations:** - **Watercolor wash bleed** (global background): a looping Lottie animation that slowly pushes a watercolor wash across the parchment ground, changing hue gradually as the visitor scrolls through epochs. The animation is idle-driven, not scroll-driven — it pulses gently even when the visitor is not scrolling. - **Compass rose rotation** (right HUD rail): a Lottie compass rose that rotates 0.25° per second, an allusion to the continuous passage of time. - **Timeline needle sweep** (bottom HUD strip): a Lottie-animated needle that sweeps across the timeline scrubber when the active date changes, like the second hand on a precision chronograph. - **Botanical growth** (left rail vine): a short Lottie entrance animation that sprouts the vine segment for each newly revealed epoch section, using a draw-on stroke effect. ## Prompts for Implementation Build historic.day as a **single-page almanac instrument** — a date explorer where the visitor either navigates to today's date automatically (on load) or dials through the calendar using the bottom HUD timeline scrubber. The experience is **not a list of articles** — it is a navigable map of time, where each date is a destination. **Page structure (single page, HUD-framed, no traditional navigation):** 1. **HUD FRAME MOUNT** — On load, the HUD frame assembles from opacity:0, each strip fading in at 200ms intervals: top strip first (date readout ticks up to today's date via DM Mono counter animation), then left rail (epoch taxonomy appears with Lottie vine sprouting animation), then right rail (compass rose begins rotating), then bottom scrubber (timeline needle sweeps to today's position). Total assembly: 1.2 seconds. No splash screen, no loading spinner — the assembly IS the loading experience. 2. **WATERCOLOR FIELD** — Behind all HUD elements, the parchment ground (#F5EFE0) receives its Lottie watercolor wash. The wash color is epoch-determined: Ancient = muted saffron; Medieval = deep amethyst; Early Modern = manuscript teal; Modern = carmine burgundy; Contemporary = verdigris green. On load, the wash fades in over 800ms. 3. **DATE HERO PANEL** — The center-top of the content well shows the current date in `Barlow Condensed` weight 300, enormous (clamp(4rem, 9vw, 8rem)), iron gall color, tracking 0.04em. Below it, a subtitle line in `Libre Franklin` 300 italic reads: "What happened on this day." This is not a headline — it is a compass bearing. 4. **EVENT CARD GRID** — Below the hero panel, a responsive masonry-adjacent grid of event cards (no JavaScript masonry — pure CSS grid with `grid-template-rows: masonry` where supported, else `auto` rows with staggered card heights achieved by varying card content density). Each card: - Translucent white panel (rgba(255,255,255,0.72), backdrop-filter: blur(4px)) - 0.5px solid border in the card's epoch jewel tone - Top-left: isometric icon (48×48px inline SVG) - Top-right: DM Mono year stamp in epoch jewel tone at 80% - Middle: event title in Libre Franklin 600, 1rem - Body: 3-4 sentence scholarly precis in Libre Franklin 300, 0.875rem/1.65 - Bottom: botanical sprig SVG in verdigris at 35% as a decorative footer rule - Hover state: border brightens to full jewel tone opacity, card lifts 4px (transform: translateY(-4px)), isometric icon rotates 6° on its isometric axis 5. **EPOCH RAIL (left HUD)** — Fixed left strip, 56px wide. Five epoch labels in `Barlow Condensed` 500 uppercase, rotated 90° CCW, stacked vertically. Active epoch highlighted in its jewel tone. The botanical vine grows between epoch labels — each label is a node on the vine. Clicking an epoch filters the visible event cards. 6. **TIMELINE SCRUBBER (bottom HUD)** — Fixed bottom strip, 48px tall. A continuous timeline from Jan 1 to Dec 31, rendered as a thin horizontal rule with month ticks. The Lottie needle marks today. Dragging the needle navigates the date; the event cards update with a 200ms fade-out/fade-in transition. The scrubber is the only navigation mechanism — there are no hamburger menus, no pagination. 7. **DATE COUNTER (top HUD, right side)** — DM Mono text showing: "Day 127 of 365" (or leap year variant). Updates when scrubber is moved. To its left, a small Lottie animation of a slowly rotating orrery ring (2 rings, no planets — purely decorative, 24×24px). 8. **BOTANICAL CONNECTOR PATHS** — Between event cards, verdigris SVG botanical paths (herb sprigs, leaf clusters) are absolutely positioned to create visual flow between cards. They do not obscure text. They are generated deterministically based on the date's hash so the same date always shows the same botanical pattern. **CSS/animation guidance:** - Use CSS custom properties for all jewel-tone values: `--amethyst: #5C3D7A`, `--teal: #1A6B6E`, `--burgundy: #7A1F3D`, `--saffron: #D4880A`, `--verdigris: #3D6B4F`, `--midnight: #1B1F2E`, `--vellum: #F5EFE0`, `--iron-gall: #1C1612` - Epoch color is set on `:root` as `--epoch-color` by JS on load and on scrubber interaction — all components that need to respond to epoch changes read from this single variable - HUD frame elements use `position: fixed` with `z-index` layering: watercolor field (z:0), botanical paths (z:1), event cards (z:2), HUD frame (z:100) - The Lottie watercolor wash uses `mix-blend-mode: multiply` over the parchment ground so it feels like actual paint soaking into paper, not a flat color overlay - All card entrance animations use `@keyframes cardReveal` with `opacity: 0 → 1` and `translateY(12px → 0)` over 300ms, staggered by 60ms per card (CSS custom property `--card-index` on each card element) - DO NOT use: carousel sliders, accordion components, tab navigation, sticky headers beyond the HUD frame, parallax depth effects, or any animation that moves the primary content — the content stays fixed; only the decorative layers animate **AVOID all of:** - CTA buttons ("Sign up", "Learn more", "Subscribe") - Pricing blocks or feature comparison grids - Testimonial carousels - Hero images with text overlay (the watercolor IS the hero; text floats above it) - Footer with link columns — the HUD bottom strip IS the footer ## Uniqueness Notes 1. **HUD-overlay layout on a watercolor field ground** — the frequency analysis shows hud-overlay layout is effectively absent from the 162-design corpus (not a named entry), while watercolor sits at only 10%. Combining a precision instrument HUD with watercolor painting creates a tension that no other design in the registry exploits: the coldness of a mission-control interface over the warmth of hand-mixed pigments. This is not glassmorphism (23% usage, avoided) — the HUD has no frosted-glass blur on its structural chrome, only on the floating event cards. 2. **Grotesque-neo typography at 2% — used as a scholarly instrument typeface, not a tech/startup typeface** — Barlow Condensed and Libre Franklin are used as if they are the stenciled labels on specimen jars and instrument dials, not as the sans-serif shorthand for "modern tech company." The typographic hierarchy mimics a Victorian natural history catalog: condensed uppercase labels, open-weight body text, monospace date stamps — a three-layer system that feels archival rather than digital. 3. **Isometric icons as historiographic objects, not UI affordances** — at 3% frequency in the corpus, isometric-icons are typically used as tech-product feature illustrations. Here they function as scholarly object illustrations: the icon for a battle is a cracked compass rose, not a sword emoji. Each icon is semantically tied to its event type through a museum object language, making the isometric vocabulary feel like a plate from a Victorian encyclopedia rather than a SaaS marketing site. 4. **Botanical motifs as documentation-density metaphors** — the vine on the left epoch rail grows thicker and more complex in recent centuries, sparse in ancient epochs. Floral-botanical motifs (5% corpus frequency) are typically used as decorative backgrounds; here the botanical illustration carries semantic meaning — it is a visual data encoding of how much recorded history exists per epoch. The same motif that looks decorative is also informational. 5. **Lottie animation serving epoch transition and temporal orientation, not onboarding or delight** — lottie-animation is rare in the corpus. On historic.day it is not decorative micro-interaction but functional: the watercolor wash bleed tells the visitor which epoch they are in; the compass rose rotation is a continuous clock; the vine growth indicates epoch boundaries. Animation is always purposeful, never ornamental. **Chosen seed from assignment:** aesthetic: watercolor, layout: hud-overlay, typography: grotesque-neo, palette: jewel-tones, patterns: lottie-animation, imagery: isometric-icons, motifs: floral-botanical, tone: scholarly-intellectual **Avoided patterns from frequency analysis:** - hand-drawn (66%): the watercolor field is Lottie-animated wash, not hand-drawn illustration — the distinction is between a painted ground and drawn figures - editorial layout (47%): no editorial column splits, no pull quotes, no magazine grid — the HUD-overlay compositional logic is instrument-panel, not publication - centered layout (90%): all content is left-offset within the 7-column content well; the HUD asymmetry is deliberate; nothing is centered - full-bleed (76%): the watercolor wash bleeds to edges but the content does not — all event cards respect margins and the HUD frame's padding - glassmorphism (23%): the HUD frame chrome is opaque observatory midnight, not frosted glass; only event cards use minimal backdrop-filter blur