TechnicalCompany history timeline that tells a story
Act as an editorial designer. Build a company history timeline for {{business_name}} in this style: {{visual_style}}, from this material: {{source_notes}}
Choosing milestones: 6 to 12 moments that changed something for customers or the team: the founding, a first location, a hard year, a big launch. Skip years with nothing to say. Never invent a milestone, date or number; where the material is thin, ask me instead.
Each milestone: the date or year, a short title, 1 or 2 sentences, and optionally a photo with a caption, or a then-and-now number with its source.
Semantics: an ordered list; dates in time elements; headings for eras if there are more than 8 milestones; the line and dots are decorative and aria-hidden.
Layout:
- 360: a single column with the line on the left at 16px, dates above titles
- 768: the same, with photos to the right of the text
- 1280: a date column of 2 (sticky within its milestone) and content in 7, max width 1000px; no two-sided zig-zag, which is harder to scan
Spacing between milestones 40 / 48 / 64px.
Type: years 28 to 36px, weight 700, tabular-nums, in the accent token; titles 18 to 20px weight 600; body 16px at 4.5:1, max 60ch.
Photos: archival photos keep their grain and color, with captions naming the year and people (with permission); width and height set; lazy below the fold; a missing photo collapses the slot.
States: long titles wrap; a milestone without a date isn't shown until it has one; the latest milestone ends with a forward-looking line, not a slogan.
Motion: the line fills with the scroll using a scroll-driven animation, falling back to a static line and staying static under prefers-reduced-motion.
Avoid: horizontal scrolling timelines, an icon in a circle for every year, invented history, "Our journey" headings with nothing behind them.