Studio implementation design

Approved direction

Direction A is a visual reference library on white and light grey surfaces, with navy text and a blue action colour. Images explain the resource; labels and decisions sit below them. Capability maps are truthful diagrams of inputs, operations and outputs, not fabricated application screenshots.

Typography and layout

• Use the operating system sans-serif stack, with no external font requests. Body text is 16px with a 1.55 line height; headings range responsively from 28px to 40px.
• Desktop has a fixed left rail, generous content space and a three-column card grid. The grid uses two columns below 1120px and one below 720px.
• Comparison gateways stay in a compact illustrated three-wide row, at most 130px high, so the resource pictures remain near the top.
• Resource previews use a consistent 1.6 landscape aspect ratio. Captions contain type, title, brief purpose and provenance where needed. Comparison cards expose task-specific inputs, outputs, decisions and limitations.
• Tool detail pages separate purpose, unsuitable uses, input/output, operation, availability, ratings, limitations and evidence. Source links and related recipes are pictured.

Interaction

Search matches all query words across resource names, summaries, keywords, types and domains. Domain, type and task choices are encoded in URL query parameters. Reset and empty-result actions clear their relevant state. With JavaScript, 24 matching cards appear initially and Show more reveals the next 24; changing a filter resets this visible limit while search still examines every record. The full library is present in initial HTML so it remains readable without JavaScript; JavaScript filters existing elements rather than fetching a second catalogue.

Accessibility implementation

• Semantic headings, landmarks and a skip link.
• Labelled search and task selector; buttons show pressed state and domain links show current state.
• Live result counts and a clear empty-result message.
• Mobile menu has expanded state and a controlled navigation region; Escape closes it.
• Visible keyboard focus, generous control targets and no required motion.
• Images have alternative text, declared dimensions, lazy loading and asynchronous decoding.
• Star glyphs also have text labels. Not-rated states are explicit and never treated as zero.
• Print styles hide navigation and controls and keep cards together where possible.

Technical implementation

The builder uses the Python standard library. Output is static HTML, CSS, SVG and JSON with relative links supporting subpath hosting. No external fonts, frontend dependencies, analytics or network API calls are required for browsing. Existing media assets are reused; generated covers live in catalogue/covers/.

Verification boundary

Static syntax, link, record and SVG checks support correctness. They do not replace browser review, assistive-technology testing or testing the creative tools themselves. Runtime/account readiness and model quality must not be inferred from this interface.