Marketing system
The tokens and components Wallace Pierce marketing pages are built from. Every value is a token: compose from surfaces and roles, which resolve to the brand primitives. Change a primitive once and the whole site follows.
How this is organized
Marketing splits into two tracks. Web is the on-site system — tokens, then imagery, then a component library built from them, then the page archetypes that compose it all. Email is its own discipline, because inbox HTML cannot use the same mechanisms.
| Section | What's in it | |
|---|---|---|
| Typography tokens | Display roles, the accented clause, measure caps, per-page budget | |
| Color tokens | The six surfaces and the roles each hands down | |
| Spacing tokens | The ten-step scale, page rhythm, breakpoints | |
| Photography | Before/after pairing, campaign scenes, attorneys, treatment rules | |
| Illustration | Motifs and tokenized colorways | Not yet authored |
| Components | Buttons, cards, service rows, fields, quotes — live previews | |
| Modules | Composed component groups | Not yet authored |
| Sections | Full-width page bands | Not yet authored |
| Layout | Section limits, repetition, visual rhythm | Not yet authored |
| Overflow | Long content, truncation, wrapping behavior | Not yet authored |
| Page archetypes | Seven canonical compositions | Not yet authored |
| Email · Principles | Inbox-grade HTML, fallbacks, dark mode, deliverability | Not yet authored |
| Email · Templates | Ready-to-send templates | Not yet authored |
The two rules that make it hold
- 01 A component never picks its own text color.
It declares a surface and reads
--on-ground,--on-ground-muted, and--on-ground-accent. Writingcolor: var(--sky)in a component is opting out of the contrast guarantee — see Color tokens. - 02 Literal values stop at the primitives layer.
A hex code, a font stack, or a raw pixel size below
brand.cssmeans a decision was made somewhere it cannot be changed system-wide.
1a homepage theme. Where the theme solved a problem with an inline exception, the system solves it with a token — the per-surface muted colors and the surface contract are the two places that shows most.