A complete structure for a marketing and e-commerce website. Each item is tagged by what drives it — brand expression or function — and who should own it.
Subjective choices that make the site recognisable. Change them and the brand changes.
Rules driven by usability, accessibility and engineering. Most can be standard across brands.
The structure is standard; the values are tuned to the brand.
Brand decisions live at the bottom as raw values. Functional rules live in the middle as roles. Components only consume roles, so a brand refresh changes values without touching components.
The brand palette, type families, scales. No meaning attached.
blue-500 · space-4 · radius-2What a value is for. Themes and dark mode swap here.
text-default · surface-card · interactive-primaryOnly when a component must break from the default.
button-danger-bgBrand items. The agency sets the direction and the final values.
Mixed items. Agency gives the look; we turn it into scales, states and variants.
Functional items. Standard practice plus our existing Tapo library.
Status against Pentagram's Web R1 deck (09/30): ● delivered · ◐ partial · ○ missing. Components drawn inside page modules but not yet defined as reusable parts count as partial.