Tinnitus Child Theme

Tinnitus Child Theme — Style Guide

Component library for the Tinnitus WordPress child theme (based on Twenty Twenty-Five).

Organization

Components follow atomic design methodology:

  • Atoms — Single HTML element styles (badges, buttons, inputs)
  • Molecules — Composed of 2+ atoms (cards, meta rows, accordions)
  • Organisms — Page-level sections (archives, layouts, footer)

Design Tokens

All visual values come from tokens/tokens.json, compiled to SCSS variables via Style Dictionary. WordPress-mapped tokens reference var(--wp--preset--*) custom properties from theme.json. Component tokens hold raw values for component-specific dimensions.

Build

npm run build    # tokens + css + docs
npm run watch    # auto-rebuild on save