HARBOR | Design System Handoff Manual

Prompt

Create an editable English A4 design system handoff manual for HARBOR, a fictional team collaboration app: design principles, color and typography tokens, button/form/status message guidelines, an accessibility checklist, and the naming and version handoff process. Use navy blue, azure and warm white with a clear information hierarchy and tables, and note "Fictional example · Adapt per project".

Result

docx
HARBOR Design System Handoff Manual

HARBOR · TEAM COLLABORATION PLATFORM

Design SystemHandoff Manual

Colour, type, component and process decisions for shipping HARBOR interfaces — written to be handed over, reviewed and edited.

Prepared as a handoff template. Sections 1–11 are the manual; Appendices A–C support review and adaptation.

Contents

The contents list is a live field. Open the document in Word, right-click the list and choose Update Field to fill in page numbers after editing.

Right-click here and choose “Update Field” (or press Ctrl+A then F9) to build the contents list with page numbers.

Document control

This page records what changed, who the manual is for and which conventions it uses. Keep it current: a handoff manual that disagrees with the library it describes costs more time than it saves.

Revision history

An editable Word document — A4, 16 numbered sections plus three appendices, 62 tables, navy blue / azure / warm white throughout, with the notice "Fictional example · Adapt per project" on the cover, in the document-control section and in the footer of every page.

What's inside

PartContents
Front matter
Cover with document-control block, live contents field, revision history, role-based reading guide, conventions, fictional-example notice
1–2
Purpose, scope, system layers, definition of a complete handoff; six testable design principles with worked decisions and rejected anti-patterns
3–5
Colour tokens (primitive palette with swatches, semantic aliases, status colours, do/don't), typography (typefaces, 10-step scale, hierarchy rules), spacing / radius / elevation / breakpoints
6–8
Buttons (anatomy, 5 variants, 3 sizes, 6 states, label rules, grouping), forms (field specs, labels and required conventions, validation timing, error-copy patterns), status messages (4 severities, placement, copy patterns, live-region and timing behaviour)
9
Accessibility checklist: 27 items across Perceivable / Operable / Understandable / Robust, each with a verification method and WCAG 2.2 reference, plus keyboard requirements, a test routine and a sign-off table
10–11
Naming grammar and approved vocabulary, component/code/file conventions, deprecation naming; semantic versioning, release states, 9-step handoff workflow, RACI, package checklist, change requests, deprecation policy, sign-off
Appendices
Glossary, one-page quick reference, and an adaptation guide including the contrast formula and a change checklist

Notes on accuracy and use

  • Every contrast ratio printed is computed from the hex values in the document with the WCAG relative-luminance formula (for example navy.900 on warm white 15.34:1, azure.600 with white 6.20:1, neutral.500 border 3.42:1). Recompute after any palette change — Appendix C shows the formula.
  • WCAG criterion numbers and levels were checked against the normative WCAG 2.2 Recommendation; one widely shared blog has 2.4.11–2.4.13 mis-numbered, so the spec numbering is used.
  • All names, dates, people and interface copy are invented for the template.
  • Headings use real Word heading styles, so the contents field fills in page numbers when you open it and choose Update Field (Ctrl+A, F9). Styles, table formatting and colours are all editable in Word; page size and margins are already A4 with a 16.6 cm text block.
  • Verification coverage: page geometry, table widths against the text block, section completeness, heading hierarchy and figure consistency were checked programmatically on the built file. No office renderer was available in the sandbox, so final pagination should be eyeballed once in Word.

How it was made

Mode
Document
Try this prompt

Related document prompts