School’s Out design system
School’s Out design system

The building blocks of every School’s Out page.

Each business keeps its own colors. The system keeps every page clear and easy to read.

100 components, 19 businesses, light and dark.

Happy Makers

Art classes, camps, and open studio for all ages.

View business
OMSI

Science programs and outdoor adventure camps.

View business
Trackers Earth

Camps for outdoor skills, handcraft, and adventure.

View business
One card, three businesses.

Building blocks

GuidelinesApplying the systemHow the pieces go together, so a page feels calm, clear, and a little delightful.
FoundationsColor and typeThe colors, type, and grid every page sits on.
FoundationsLayoutThe page grid, the page’s widths, spacing, and the pieces that place things on them.
ComponentsButtons and inputsWays to act and to answer.
ComponentsLabels and statusTags, badges, and feedback.
ComponentsCards and layoutCards, tables, and ways to show more.
PatternsPage sectionsWhole parts of a page, built from the pieces.
BrandsBusinessesEvery business’s brand, light and dark.

How a brand is built

Six steps from a business’s listing to a finished page.

  1. 1CollectColors, photos, description, and logo
  2. 2CheckThree must-haves decide the design
  3. 3Fill gapsOwn first, then a suggestion, then a default
  4. 4Match colorOne of nine color families
  5. 5Make readableSame readability on every card
  6. 6ApplyEvery component paints the same colors
See it run on a business →