Worklist

Pending tasks and future improvements for principles.design.

In Progress

None currently

Pending

Font Optimization

  • Subset Inter font to Latin-only (~80-100KB vs current 291KB)
  • Requires pyftsubset from fonttools: pip install fonttools brotli
  • Command: pyftsubset Inter-Variable.woff2 --unicodes="U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD" --flavor=woff2
  • Status: Full Inter font (291KB) is now live on master

Legacy Cleanup

  • Delete _sass/ directory (no longer used, replaced by _includes/css/)
  • Remove “Help needed” boxes from example pages (legacy feature)
  • Audit for any remaining hardcoded colors (should use tokens)
  • Audit for any remaining inline styles that could be classes

The “Help needed” boxes were displayed on example pages when:

  • Missing overview frontmatter
  • Missing author frontmatter
  • Missing source frontmatter
  • Missing summary for individual principles

These were community contribution prompts that are no longer needed. Files removed:

  • _includes/missing-info.html (37 lines)
  • Include removed from _layouts/example.html
  • .help-footer CSS class remains in footer.css (unused)

Design System

  • Document remaining components (tile, forms, info-block)
  • Add component previews to /design-system/ page
  • Consider adding dark mode tokens (future)

Performance

  • Audit image sizes and formats (WebP where supported)
  • Review third-party scripts (Fathom analytics)
  • Test Core Web Vitals

Field Guide - Schema Markup

  • Add Book schema markup to field guide page when live
  • Schema to add:
    <script type="application/ld+json">
    {
    "@context": "https://schema.org",
    "@type": "Book",
    "@id": "https://principles.design/field-guide/design-principles-in-practice/#book",
    "name": "Design Principles in Practice",
    "subtitle": "A Field Guide",
    "url": "https://principles.design/field-guide/design-principles-in-practice/",
    "inLanguage": "en-GB",
    "author": {
      "@type": "Person",
      "@id": "https://principles.design/about/ben-brignell/#person",
      "name": "Ben Brignell"
    },
    "publisher": {
      "@type": "Organization",
      "name": "principles.design",
      "url": "https://principles.design"
    },
    "bookFormat": "https://schema.org/EBook",
    "description": "A practical field guide to using design principles as decision-making tools, with worksheets for applying them during real work."
    }
    </script>
    

Completed

Feb 2026

  • Replace Ruby Sass with plain CSS custom properties
  • Create design tokens system (tokens.css)
  • New header component (flexbox, responsive, accessible)
  • Homepage improvements (text-step utilities, intro spacing)
  • Footer fixes (design system link, color tokens)
  • Add color tokens: --color-text-light, --color-success, --color-error
  • Remove legacy navigation.css
  • Create /design-system/ documentation page
  • Create DESIGN-SYSTEM.md documentation
  • CSS loading: dev concatenated, prod inlined
  • Deploy Inter font with tight letter-spacing
  • Componentise footer with preview parameter
  • Fix GitHub icon vertical rhythm using design tokens

Last updated: Feb 2026