School’s Out design system
Components

Labels and status

Tags, badges, and feedback.

Tag

A small label for a category, a detail, or a status. It does nothing when tapped; a choice is a Chip.

On a page

Arts and craftsAges 6–10SaturdaysMaya
Ages 6–10$95 for the day9 am–3 pm
ConfirmedWaitlistPayment failed

On a business’s brand card

Arts and craftsAges 6–10
Show details
  • October 9 (Hannah): a soft rounded rectangle in the surrounding ink at 6%, with no edge, 24px tall with the small type in Medium (20px when small), so it reads as a quiet label beside the round, interactive chips. It replaced the Intelligence tag’s 2px box and hairline from September 30.
  • Its colors come from the surrounding text, so tags stay pale in dark mode and on brand cards.
  • Tones for a status: the fill and the icon take the tone and the words keep the ink, so the tone never rests on color alone. Always pair a tone with an icon.
  • November 2 (Hannah): a dot in a child’s color before their name, for the kids an activity fits. It replaced the child’s initial mark, which filled the tag top to bottom.

Avatar stack

Friends’ or a group’s faces, overlapping, beside the words that name them.

Show details
  • Hannah, October 15, after Partiful’s guest list: the activity test’s friends going. Each face overlaps the one before by a third, in a 2px ring of the surface behind it, so the edges read.
  • Decorative: the words beside it name the people.
  • A group in Mellow (Hannah, October 9) leads with the assistant’s mark and ends with how many more families there are.

Count badge

A number beside a label or on a button’s corner, like 3 plans or 2 filters on.

Plans 3
Quiet, beside a label
Quiet, in Explore’s Filters button
2
Strong, on a group’s Plans
JO3
Alert, on the parent’s avatar
Show details
  • Created October 9 (Hannah) from five hand-built versions in the screens.
  • Quiet (the fill) for how many are in a list, or how many filters are on, in place of the Filters button’s icon on a phone; strong (the ink as a fill) for what needs attention, such as Plans’ Needs you and a group’s plans; alert (School’s Out orange) only for new notifications on the parent’s avatar, at the top right of Plans in the app. On a corner it wears a ring in the page’s color.

Status label

A state in a word, with a dot in its color, like Open or Waitlist.

Available
Success
Waitlist
Warning
Full
Error
Open now
Small
Waitlist
Neutral
Show details
  • For a state in a table or list, where a Tag would be too loud (Hannah, October 8, for the activity page’s sessions).
  • The word stays in the text color and the dot carries the tone, so it reads in light and dark and never relies on color alone. Green for good to go, yellow for running low, red for a problem, gray for nothing to act on.
  • Small (November 1, for Explore’s Upcoming registrations): the word in the small type, beside the other small details in a table row.

Chip

A filter or choice. Tap one to select it.

NewWeekends

With media, as Explore’s categories

Dropdown pills, closed, open, and with a choice

Choices that don’t apply, with the reason beside them

This activity is for ages 6–10, so Theo (5) and Ada (3) can’t go.

Verified badge

A platinum seal after a verified business’s name. On a card it catches the light as the pointer moves.

On a page

Happy Makers

On a business’s brand card

Happy Makers
Show details
  • Where it shows today: on a Collection card’s row, after the name of the business that made the collection. Business pages and activity pages don’t show it; the activity page’s Hosted by line takes the Verified stamp instead.
  • The check keeps 3:1 contrast at every angle.

Verified stamp

A small printed stamp beside a business’s name: the business confirmed it owns its listing on School’s Out.

Hosted by Happy Makers This business is verified by School’s Out
This business is verified by School’s Out
16px
This business is verified by School’s Out
20px
This business is verified by School’s Out
24px
This business is verified by School’s Out
40px
This business is verified by School’s Out
64px
This business is verified by School’s Out
Light, on a deep color
This business is verified by School’s Out
Dark, on a light color
Show details
  • Hannah, October 18, after a hand-printed star stamp: a blue square printed in ink, a seven-point star knocked out of it to the paper (October 19: one more point than the reference’s six), and a check in the star. The ink is nearly solid, with a soft wobble at the edges and a fine grain.
  • School’s Out blue (the illustration blue), the same in both appearances. On a business’s colored card it is white or dark where the blue doesn’t clear 3:1 (Hannah, October 19: the blue vanished on muddy greens); the Brand System picks which.
  • Where it shows: after a verified business’s name, in the activity page’s Hosted by line and on the business page (its test’s header today).
  • Not the Verified badge: the badge is a platinum seal that catches the light, on a collection’s row. The stamp is flat ink that sits in a line of text and says one thing, that the business claimed its listing. It replaced the verified seal the business page dropped on October 7, which meant something else.
  • A verified business shows this stamp, never a seal (PRODUCT.md, Hannah, October 23).

Child mark

A child’s first initial on their own color, the one sign for that child everywhere.

M
Purple
T
Turquoise
A
Pink
K
Lime
N
Blue
S
Yellow
M
Tiny, in a calendar row
M
Small, in a list
M
Large, on a profile
Show details
  • Hannah, October 16: a child is a color and their first initial, on the family pages, the Plans month, and booking. It replaced the family pages’ ringed avatar and the month’s tinted mark. No photos of children and no surname initial.
  • The parent picks the color on the child’s form, and no two children in a family share one, so a color on the calendar always means one child. Six colors from the accents, in this order for new children: purple, turquoise, pink, lime, blue, yellow.
  • The letter is black on the light colors and the inverse ink on purple and blue, 6:1 or more in both appearances; a hairline keeps the light colors’ edge on a white page.
  • Sizes tiny (24px) in calendar rows, small (32px) in lists, medium (40px) in the family list and the color picker, and large (56px) on a child’s profile.

Avatar

A person’s photo, or their initials when there is none.

P
Initial, tiny
MC
Initials, small
LP
Initials, medium
Happy Makers
Photo, large
JO
Initials, extra large
Show details
  • Sizes small (32px), medium (40px), and large (56px).
  • Tiny (20px, one initial) sits beside a line of text, such as who made a collection (October 9).
  • Extra large (96px) is the one person a page is about, at the top of a profile (October 21).

Progress bar

Shows how far along a task is.

Profile complete60%
Question 2 of 5

Step list

What Mellow is doing, step by step, while it works on its own.

  1. Filled in 8 details, Done
  2. Attached the immunization record, Done
  3. Sending it to Experiment PDX, In progress
  4. Waiting for Experiment PDX to confirm, Not started
Working
  1. Filled in 8 details, Done
  2. Sending it to Experiment PDX, Waiting for youPaused for your answer
  3. Waiting for Experiment PDX to confirm, Not started
Waiting for the parent
  1. Filled in 8 details, Done
  2. Sent to Experiment PDX, Done
  3. Waiting for Experiment PDX to confirm, Didn’t go throughTheir form closed before we could send it. Nothing was charged.
Failed
Show details
  • Each step is done, in progress, still to come, waiting for the parent, or failed (Hannah, October 8, for booking with Mellow). Done is green, waiting for the parent yellow, failed red.
  • Say each step as the parent would: “Sending it to Experiment PDX,” then “Sent to Experiment PDX.” A line under a step says why it paused or failed.

Fraction

Not in use yet

Retained for design review. No consumer screen uses this component.

A count against its limit, like children registered out of a session’s places, for a business’s own views.

5 of 12 children
Filling
0 of 12 children
Empty
12 of 12 children
Full
Show details
  • The total is muted.

Loading placeholder

A gray shape shown while content loads, so the page doesn’t jump.

Show details
  • The fill breathes slowly (October 11; a shimmer swept across it before) and holds still for people who prefer reduced motion.
  • Content pieces draw their own loading shape from it, so a screen never builds one: Activity tile and Listing row (ActivityTileLoading, ListingRowLoading), and Card shelf, Session list, and Table (loading).

Spinner

A turning ring for a wait of a moment.

Sending

16, in a row
20
24, a status

On a business’s brand card

Show details
  • For a short wait inside something: a message sending, a booking confirming. For content on its way, use the loading placeholder, which holds its shape.
  • It appears after 150ms, so a quick wait never flashes it. 16px in a row, 24px for a status on its own. Buttons have their own: set loading.

Tooltip

A short hint that appears when you hover or focus.

Saved to your listOpens in a new tabACA accreditedThe American Camp Association reviewed its health, safety, and staff practices. Checked Oct 2026.
Show details
  • Appears after 300ms. Keep the label to a few words; never put actions inside a tooltip.
  • A badge that does nothing when tapped (a Tag) can explain itself in one short sentence, what was checked and when (Hannah, October 21, the business page test’s credentials, its one use on a consumer screen: hover, not a sheet). Hover only where a pointer hovers, so the badge’s own words must stand alone on a phone.

Status marks

Small illustrations that say what kind of feedback a message gives.

Success
Warning
Error
Information
Show details
  • Hannah, October 11: the toast’s tone dot became an illustration in the topic marks’ style (Topic marks, under Cards and layout): a 36px tile, often in two color fields, with one object that may break past its edge, in one fine navy line.
  • Each kind keeps its status color, so color still says what happened: green for success, amber for a warning, red for an error, and blue for information. Each also has its own shape (a badge with a check, a triangle, a stop sign, a speech bubble), so it never relies on color alone.
  • 40px in a toast and in the booking module’s results. The colors hold in both appearances, as the topic marks do.
  • Not on photos: the activity tile’s status uses a library icon in the tag’s ink, since the mark’s navy outline read heavy there (Hannah, October 20).

Toast

A brief message after an action, such as a booking that went through or an alert that’s on.

Maya is booked: Open Studio, Sat, Oct 10

We’ll tell you if a spot opens

Open Studio, Sat, Oct 10. This doesn’t put you on their waitlist.

Pending confirmation: Bright Ridge Robotics will reply to you about Maya

One step left on Experiment PDX’s site

Removed Open Studio from Saved

In its layer: tap the bookmark to remove it from Saved

Show details
  • What gets one in the product (PRODUCT.md, October 20 and 21): a booking’s answer when the parent isn’t watching it (View opens it); an alert the parent turned on, saying what they’ll get (Manage opens the Following list, and it shows over an open sheet); and a removal, with Undo. Saving never shows one: it opens the collections picker, and never offers a reminder.
  • Each toast leads with a status mark in its tone (Hannah, October 11; a colored dot before): success, warning, error, or neutral, which shows the information mark. A one-line message centers beside the mark; a longer one starts at its top.
  • At most one action, a small text button at its end, so it never outweighs the message.
  • The layer places it at the foot of its surface, rising in and leaving the way it came (October 11). It stays six seconds, waits while it is pointed at or focused and while the tab is hidden, and a swipe down sends it away.

Empty state

What a screen shows when there’s nothing yet, with a clear next step.

Nothing saved yet

Tap the bookmark on any activity or business and it lands in Saved.

Inline, for an empty list inside a page: one line and one small action

No dates posted yet

Show details
  • Centered for a screen with nothing yet; inline (October 11) for an empty list inside a page: one line and at most one small action.
  • The title says what’s empty in plain words, with no period: “Nothing saved yet”. One line says what will appear, or one action fixes it; never guilt and never a large illustration (PRODUCT.md, Copy).
  • Every list that can be empty passes one: Card shelf, Table, and Session list take empty, so a heading never sits over nothing.

Notice

Something to know on a page or in a step, inline with the content.

Registration opens Mon, Nov 2 at 9 am

Remind me sends three reminders: the day before, the morning of, and 10 minutes before.

Booked

Experiment PDX sent a confirmation to your email.

Maya is booked at Happy Makers that day

Pick another date, or keep both if pickup works.
Show details
  • Moved into the library from the consumer screens (October 11), which used it 41 times; it absorbed Announcement.
  • Each tone carries its icon, so the meaning never rests on color: info on the fill, then success, warning, and error tinting the surface and edge. Links inside read in its ink, underlined.
  • Not for what happens after an action (Toast) or a page with nothing to show (Empty state).
NextCards and layout →