How to design a School’s Out page with the system.
Calm by default, one main action, one moment of delight, and every piece checked on a phone.
One typeface in six sizes, colors that work in light and dark, and one set of fluid columns with three page widths.
Use the components before drawing new ones. Pieces marked Not in use yet are ready but on no page.
A business’s color fills its page’s header and the field behind an activity’s title, and its logo is a sticker. Everything else stays neutral, so every business page reads the same way.
Text on a brand card aims for 8.2:1 and never falls under 4.5:1. Brand color, in the top bar, tests a change on every business at once.