Theme Framework How the LeaseLeads theme frontend works

Styling

SCSS architecture, the shared lib, the rhythm system, animation, and the state-class contract.

Loose watercolour wash study in colour

Where most design work happens. Styles live in colocated SCSS and are driven by two inputs you don't own: CSS custom properties the editor's Fields emit, and state classes the JS toggles.

  1. SCSS architecture & colocation — where styles live and how they're bundled.
  2. The lib/ directory — shared mixins, functions, and variables.
  3. The rhythm system — the fluid vertical-spacing scale (gutter vs rhythm).
  4. Animation — the .animate → .is-animated fade contract.
  5. The state-class contract — JS drives state, SCSS expresses it.