Longform digital annual report

You are designing the public web edition of the FY2026 annual report of Norlys Kystlinjen, a fictional Norwegian coastal ferry and express boat operator with 34 routes, 21 ships and 6.1 million passengers a year. It will be read by journalists, investors, passengers and one very demanding board chair. It must look like a printed report that learned how to behave on a screen, not like a startup landing page that found a table.

Deliverable

A web edition you can open directly from disk in a desktop browser and in a phone browser. Decide the file and folder layout yourself.

Content you must invent and keep consistent

• Six months of passenger counts per route (in a single inline JS data literal), total must equal 6.1 million and every derived figure on the page must follow from that data rather than contradicting it.
• A fleet table: 21 ships with name, year built, length, capacity, fuel type, and a route assignment.
• Financial summary: revenue, EBITDA, and CO2 per passenger kilometre, with two comparison years.
• A letter from the CEO (about 320 words), a board statement, and a sustainability note with methodology footnotes.

Required sections, in an order you justify

• Opening that is characteristic of the subject (a route, a crossing, a timetable, a coastline). A centred headline with a button is not acceptable.
• Key figures at a glance, with one dominant number and supporting comparisons.
• Interactive route map: an SVG coastline you draw, with clickable route arcs, hover states, and a legend. It must be recognisably a map, not a scatter of dots.
• Fleet section with the table and, for at least three ships, a hand drawn SVG profile that shares one scale bar.
• Financials: a chart set drawn in SVG by hand (bars, waterfall or bridge, and a line with a shaded band). Implement your own scales and tick selection.
• Sustainability: emissions by fuel type plus a small multiples grid, with an honest note about what the numbers exclude.
• The CEO letter, set as a proper reading experience: comfortable measure, no wider than about 70 characters, footnotes as real footnotes with back links.
• Governance and board, as a compact directory that stays legible at 320 px. Present the sections in whatever order you can justify, and say why in the rationale.

Interaction requirements

• Persistent navigation that shows which section you are in, works with keyboard, and does not fight the browser back button.
• Reading progress that is meaningful, not decorative.
• Cross highlighting between the route map, the route table and the charts: selecting a route must update every affected figure.
• A filter for the fleet table (fuel type, plus sorting on any numeric column) implemented by you, no library.
• Anchor links that land the heading clear of any sticky element.
• Print stylesheet that produces a sane A4 document: no clipped charts, no orphaned headings, no background wash.

Design direction

Nordic editorial. Cool neutrals, a warm single accent, generous grid, restrained motion. Use only locally available font stacks: build a two or three family system from a serif, a grotesque and a mono, and declare your stacks in custom properties. State your type scale in one place and never deviate from it. Align to a baseline or spacing scale you actually define. Motion is for orientation only, and everything must degrade sensibly under prefers-reduced-motion.

Hard constraints

• No console errors, no horizontal scroll below 1280 px, usable at 320 px.
• Colour contrast at least 4.5:1 for body text and 3:1 for large text; state the pairs you checked.
• Semantic landmarks, one h1 per page, headings in order, and every SVG chart paired with a real data table or an adequate text alternative.

Before you finish

Write a short design rationale of at most 300 words: the grid, the type system, the palette with hex values, and the three taste decisions you are most confident about and why. Then walk the acceptance list above and mark anything you did not achieve as NOT DONE with a reason. Never silently drop a requirement. You may consult any documentation you want and search the web with donsetch (search, fetch, crawl) whenever you are unsure about a CSS feature, an SVG attribute or browser support; cite nothing, just get it right.