# Design Language for historygrapher.com ## Aesthetics and Tone A data-visualization tool for historical timelines -- historygrapher.com is the professional instrument for creating, analyzing, and sharing historical graphs and timelines. The aesthetic is data-tool-premium: clean dashboard surfaces, precise data visualization elements, and a professional dark-light palette create an environment where historical data is the centerpiece. Think Figma meets academic historiography -- a tool interface where timelines, relationship graphs, and chronological data are rendered with precision and beauty. Thin lines, small dots, and carefully scaled axes create the vocabulary of a charting application. The tone is tool-professional -- confident, precise, and focused on enabling the user to work with historical data effectively. ## Layout Motifs and Structure The layout uses a **dashboard-workspace** architecture -- a persistent toolbar at the top, a collapsible left panel for navigation, and a large central canvas area where timeline visualizations are displayed. **Dashboard System:** - Top toolbar: 48px height, spanning full width, containing tool name, action buttons, and view toggles - Left panel: 240px collapsible sidebar with timeline list and filter controls - Central canvas: remaining space, with a subtle dot-grid background (every 24px) suggesting a graph-paper workspace - Bottom status bar: 28px, showing current view metadata **Section Flow:** 1. **Toolbar:** "historygrapher" in clean sans-serif, followed by icon-button placeholders (zoom, pan, filter, export) represented as small CSS-drawn icons (squares, circles, lines). 2. **Canvas - Hero View:** A large-scale timeline visualization rendered with CSS/SVG: a horizontal axis with year markers, vertical event lines dropping from a horizontal baseline, and labeled nodes at event points. 3. **Sidebar - Timeline List:** A scrollable list of timeline entries, each row showing a color dot (category indicator), title, and date range. Active row has a blue left border. 4. **Detail Panel:** When an event is "selected" (shown in default view), a right-side panel (320px) slides in showing event details with a mini-timeline-context view. 5. **Status Bar:** Bottom bar showing "1,247 events | 850 BCE - 2024 CE | Zoom: 100%" ## Typography and Palette **Typography:** - **UI/Labels:** "Inter" (Google Fonts) -- the standard for application interfaces, with excellent rendering at small sizes. Used at 0.75rem-1rem, weight 400-600, for all UI labels, buttons, and axis labels. - **Data Values:** "Inter Tight" (Google Fonts) or "Inter" with tight letter-spacing (-0.01em) at 0.7rem for axis numbers, data values, and status bar content. - **Headlines:** "Inter" at 1.2rem-1.5rem, weight 600, for panel titles and section headers. - **Event Descriptions:** "Inter" at 0.85rem, weight 400, line-height 1.5 for event detail text. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Canvas | Off-white | #fafafa | Central workspace background | | Surface | Light gray | #f0f0f2 | Toolbar, panels | | Border | Subtle | #e0e0e4 | Panel borders, grid lines | | Dot Grid | Faint | #e8e8ec | Workspace dot-grid pattern | | Primary Blue | Tool accent | #3b82f6 | Selected items, primary actions | | Text Primary | Dark gray | #1e1e2e | Labels, headlines | | Text Secondary | Medium gray | #64748b | Descriptions, metadata | | Axis Gray | Chart gray | #94a3b8 | Axis lines, tick marks | | Category Red | Event type | #ef4444 | Category indicator dots | | Category Amber | Event type | #f59e0b | Category indicator dots | | Category Green | Event type | #22c55e | Category indicator dots | | Category Purple | Event type | #8b5cf6 | Category indicator dots | ## Imagery and Motifs **Dot-Grid Workspace:** The central canvas has a repeating pattern of small dots (2px, #e8e8ec) at 24px intervals, creating graph-paper precision for the timeline visualization area. **Timeline Axis:** A horizontal line (1px, #94a3b8) with vertical tick marks at regular intervals (year markers), and small text labels below. This is the foundational visualization element, drawn with CSS/SVG. **Event Nodes:** Small circles (8px diameter) in category colors positioned along the timeline axis, with thin vertical connector lines (1px, #94a3b8) dropping from the axis to event labels below. **Panel Borders:** Clean 1px borders (#e0e0e4) separate panels. No shadows are used -- the tool interface relies on borders and background-color differences for visual hierarchy. **Active-State Blue:** Selected elements gain a blue (#3b82f6) indicator: left border on sidebar rows, filled circle for selected event nodes, blue text for active navigation items. ## Prompts for Implementation Build the page as a professional data tool interface. The dashboard layout should feel immediately like an application workspace -- the toolbar, sidebar, and canvas create a familiar tool environment. The dot-grid canvas establishes precision. The timeline visualization in the central area is the hero element: a horizontal axis with year markers and event nodes creates an immediately understandable data visualization. The sidebar list should feel scannable with consistent row heights and color-coded category dots. The bottom status bar adds application authenticity. All interactions should feel instant: hover states on nodes (scale 1 to 1.3), selected-row highlights (blue left border), and panel transitions. The overall impression should be of a tool built for serious historical research. AVOID: decorative elements, serif fonts, warm colors, marketing language, hero sections, animations, playful elements, card layouts with shadows. ## Uniqueness Notes 1. **Professional tool interface as landing page:** Presenting a web tool's interface as the design itself creates a unique "product-is-the-design" approach. 2. **Dot-grid workspace canvas:** The graph-paper-style background establishes a precision workspace metaphor rare in web design. 3. **CSS/SVG timeline visualization as hero:** A functional data visualization serving as the primary visual element replaces traditional hero imagery. 4. **Tool-professional tone:** The confident, utilitarian voice of application UI writing is distinct from marketing or editorial tones. Document chosen seed/style: aesthetic: data-tool, layout: dashboard-workspace, typography: ui-system, palette: tool-neutral, patterns: active-state, imagery: timeline-viz, motifs: dot-grid, tone: tool-professional Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), friendly tone (77%), minimal imagery (96%)