Brand checklist · checked against Apple's Human Interface Guidelines

What a complete brand identity needs, and where we are.

Apple's guidelines don't give one "brand checklist", but across Branding, Colour, Dark Mode, Typography, Layout, Accessibility, App Icons, Writing, Motion, Materials and Images they say what a brand system has to define. Each item below is checked against our brand.css and guide.

What to do next, in order.

The to-do and partly done items, grouped into the smallest set of tasks. The first four block building pages; the rest can follow.

  1. Recolour and outline the logo kitEvery logo file to #9B1C2E; outline the Baskerville wordmark so it renders the same everywhere.
    Blocks pages
  2. Finish the colour systemHigh-contrast variants, dark-mode check of every pair, and the rule "never colour alone" written down. Decide whether labels stay red.
    Blocks pages
  3. Complete the component setForms and inputs, error and empty states, tabs, FAQ accordion, breadcrumb, modal, 44px touch targets.
    Blocks pages
  4. Write the voice and terms guideProgramme names, button-label rules, error messages, capitalisation, words we use and avoid.
    Blocks pages
  5. Favicon, app icon and social avatar setLight, dark and tinted versions from one source; social profile image; Open Graph template.
    Before launch
  6. Icon setOne line-icon family (stroke, corners, grid) for the ~20 icons the site uses.
    Before launch
  7. Image and motion specsFormats and sizes (WebP/AVIF, 2x), naming, photo dark treatment; motion durations with reduced-motion fallback.
    Before launch
  8. Tokens into the real siteMap brand.css tokens into the site's Tailwind theme so every page uses them.
    With the homepage
  9. Applications and governanceSlides, event poster, email signature, certificate; an owner and a changelog for the guide.
    After launch

Source: Apple Human Interface Guidelines pages Branding, Color, Dark Mode, Typography, Layout, Accessibility, App Icons, Writing, Motion, Materials and Images. Apple's iOS sizes are translated to web equivalents (for example 44pt touch targets become 44px; Dynamic Type becomes text that scales to 200% with rem units). "Done" means defined in brand.css and the brand guide, not yet built into the live site.