maintaining-design-systemlisted

# Maintaining the Design System Design system maintenance for the site. Tokens, themes, typography, and CSS architecture. British English throughout—code, comments, documentation, content. ## When to Use Consult this skill when modifying design tokens, adding or updating themes, or changing typography scales. Reference [SHIKI.md](./SHIKI.md) for syntax highlighting changes. Reference [COMPONENT_DESIGN.md](./COMPONENT_DESIGN.md) when creating new components or establishing component patterns. ## Philosophy The design system pays homage to Swiss Style—clean, grid-locked, typographically precise. Every spatial decision aligns to an 8px grid. This constraint breeds coherence. Discipline over necessity. The project's scale doesn't demand this rigour; the practice itself is valuable. The source will be public—it should exemplify high-quality design decisions. ## Token Architecture Design tokens live in `src/styles/tokens/`. Each file defines a category of CSS custom properties. | File | Purpose | |------|---------| | `colours.css` | Theme colour definitions (semantic: `--bg`, `--fg`, `--muted`, `--rule`, `--highlight`, `--emphasis`) | | `typography.css` | Font families, size scale, line heights, letter spacing | | `spacing.css` | Margin/padding scale (8px base) | | `sizing.css` | Fixed dimensions | | `layout.css` | Safe area insets for mobile | | `z-index.css` | Stacking context scale | | `transitions.css` | Animation timing tokens | | `borders.css` | Border width scale |