Foundations
Color and type
The colors, type, and grid every page sits on.
Light and dark
Every page works in both. Use the switch at the top to change this whole page.
Light
The default.
Dark
Same layout, deeper colors.
Colors
One set of named colors, each with one job. The page is white, containers sit on it in a light gray, and what floats over the page stays white.
Page
Container
FillAges 6–10Day camp
Floating
Sheets, menus, dialogs, and toasts open over the page with a shadow.
PageThe page itself, and bars pinned to its edges.Plans, Explore, the booking bar on a phone
ContainerGroups content that sits on the page, at half the surface over what’s behind it.Panel, settings groups, the family list
FillSmall solid pieces inside any surface: chips, tracks, placeholders, and hover and selected rows.Session chips, a photo before it loads
FloatingOpens over the page, always with the floating shadow.Sheets, menus, dialogs, toasts
FieldWhat you type into or choose.Text fields, selects, checkboxes, choice tiles
ThumbWhat rides on a track, a step up from it in dark mode.A switch’s thumb, the chosen segment, the current page
InverseThe ink as a fill, for the rare mark that must stand out.Tooltips, a count badge, today’s date
When to use which
- The page is white, and containers sit on it in a light gray. In dark mode the same layers get lighter as they rise.
- Group content with a container. Inside it, use fill for smaller pieces and dividers between rows; a container inside a container takes the fill. Never a third level.
- What opens over the page floats: white in light mode, always with the floating shadow. The shadow shows it is above the page, not a darker color.
- Fields stay white in light mode, on the page or in a container, so they read as places to type or choose.
- Text is ink, or muted ink for supporting text. Links and mentions use the link blue. On an ink-colored fill, text takes the inverse ink.
- Success, warning, and error mark meaning only. For a notice, tint the surface lightly with one and keep the text in ink.
- A business’s colors appear only where the Brand System puts them: its brand cards, its logo sticker, and the vivid field behind an activity’s title. Every other surface stays neutral.
Do and don’t
Science Buddy
Oct 3–24Nov 7–28
Science Buddy
Oct 3–24 · Nov 7–28
Share · Save · Report
Share · Save · Report
Surfaces
Page
Container
Container over a wash, solid
Container over a wash, frosted
Surface, the container at full
Fill
Fill on hover
Floating
Field
Thumb on a track
Inverse
Behind a dialog
Text
Main text
Supporting text
Text on an inverse fill
Links and mentions
Text on photos
Lines
Dividers and edges
A field’s edge
An empty checkbox or radio
Container edges
Keyboard focus
Status
Success
Warnings
Errors
Buttons
Primary
Primary label
Secondary
Secondary, Soft, and Plain label
Keyboard focus
Accents
Lime
Pink
Purple
Ruby
Red
Yellow
Green
Blue
Turquoise
Orange
Sand
Show details
- Hannah, October 7: the page turned white in light mode, so containers took the light gray the page had, and the layers above them, floating layers and fields, stayed white.
- After Atlassian’s surfaces (a gray for grouping on a white page, with raised and overlay layers set apart by shadows) and Apple’s system backgrounds, where layers in dark mode get lighter as they rise.
- Fill is a step past the container, so a chip or a placeholder reads on the page and inside a container alike.
- Dark mode keeps its colors: the page is the darkest, and containers, floating layers, and fields share the next step up.
Glass
Two glasses, each with its own job: liquid glass for the bars and controls that float over the page, and rim glass for glass buttons and cards.
The web bar and the footer
Clear, lit at its edges.
A glass card
Frosted, with a lit rim.
Rim glass: Secondary and icon button
Show details
- Liquid glass (Hannah, October 18, after Apple’s Liquid Glass and Matt’s Liquid Glass Buttons on Framer): clear enough that what passes under keeps its shape, lit at its edges and never shaded inside. Apple’s rule holds: it belongs to navigation and controls that float. The web bar, the app’s tab bar, the directory footer, the booking bar’s glass look, the map’s search and controls, and the chat header’s name pill wear it.
- Rim glass (Hannah, October 19, after Linearity’s glass buttons and cards): a frosted fill, a 1px rim lit from the top left, a soft glow inside the edge, and a faint halo. On a Secondary button or icon button the rim’s light follows the pointer. Glass cards (GlassCard finish="rim", the activity page’s sections), Panel frosted, the activity tile’s photo tag, and business pills on photos wear it.
- Neither goes on a row, a field, or a container at rest on the plain page; glass needs color or a photo behind it. Reduced transparency turns liquid glass solid.
Type
One typeface, Helvetica Now, in six sizes and four weights, after Partiful: heavy type once a screen, on its hero name, Bold for page titles, Medium for names, controls, and section headings, and Regular for reading, plus a script for a rare accent. Size and ink do most of the work; weight stays quiet.
Display48 / 52 · ExtraBold · Display
School’s Out design systemThe library’s own cover and page titles. Product pages never use it: their titles stop at Headline (Hannah, October 9).
Headline32 / 36 · Bold · Display
Personal infoPage titles at every width (PageHeading), the largest a product page goes; section headings are Section title.
Hero name32 / 36 · ExtraBold · Display
Happy MakersA business’s or an activity’s own name, once a page, its one heavy moment (HeroTitle; October 23, the business and activity pages). A verified stamp may follow it.
Section title20 / 24 · Medium · Display
Current activitiesSection headings on every page (PageSection, the business page, Card shelf’s page heading): two steps above body and one under Headline (Hannah, October 9), a quiet label for a group in Medium since October 19.
Lead18 / 28 · Regular · Text
Creative studio classes where kids build, paint, and tinker with real tools.Intros and longer paragraphs, like a business’s description.
Title16 / 24 · Medium · Text
Saturday Clay StudioThe title in a tile, row, card, sheet, dialog, toast, or notice, and a total; it leads by ink against muted details.
Control16 / 24 · Medium · Text
$95 for the dayNavigation, chips, tabs, prices, dates, times, and a word stressed inside a sentence.
Body16 / 24 · Regular · Text
Oct 3–24 · Saturdays · 10am · Ages 5 to 9Most text.
Label14 / 20 · Medium · Text
Suggested for youField labels, eyebrows, tags, badges, and small headings above a group.
Caption14 / 20 · Regular · Text
Ages 6–10 • Day camp • 9 am–3 pmEvery line of details under a title (DetailLine: the facts in the ink, who booked muted, a round dot between parts), dense lists inside a card (What they offer, Things to know, answers: ItemText small), the page’s end note, hints, and fine print (October 23).
Script36 / 40 · Medium · Caveat
Curious minds are good company.An accent only, at most once on a screen: the feed’s note for today. Never a button, label, field, heading, price, or date.
Show details
- Page titles stop at Headline, 32px, on every product page and at every width (Hannah, October 9). Section headings are the Section title role, the section step (20/24 in Medium), two steps above body and one under Headline (Hannah, October 9; the lead size at 500 before).
- Body is 16/24, with 14/20 supporting text and 18/28 lead paragraphs, following Airbnb’s distinction between reading and compact content. Titles differ from body by weight; dense cards and controls do not inherit the prose Lead size.
- Helvetica Now (Hannah, October 15; Geograph from October 13) is served from the site (public/fonts). Text, drawn for reading, sets text below the section step; Display, drawn for large sizes, sets Section title and up, since it runs tight at 13px. While it loads, or if it fails, Helvetica Neue or Arial shows.
- Weights (Hannah, October 19, after Partiful; Bold for every name from October 16, after Shop): Partiful sets heavy type once a screen, on the event’s own name, and uses two weights everywhere else, a medium for names, rows, buttons, and dates and a regular for details; its section labels are small and plain, and utility screens get a modest title. So: ExtraBold only for a screen’s hero name (an activity’s title card, a business’s hero, the library’s cover); Bold for page titles (Headline); Medium for titles in tiles, rows, cards, and sheets, controls, labels, prices, dates, and section headings; Regular for everything read, warnings and errors included, whose color carries them. A title leads by its ink and size against muted Regular details, not by weight.
- Tracking tightens on headings: Display and Headline −3%, Section title neutral since October 19 (Medium is lighter, so it needs no tightening). Reading text has neutral tracking. Text is antialiased, so Bold and ExtraBold stay crisp on a Mac.
- ExtraBold is the hero’s voice, once a screen: an activity’s or business’s own name and the library’s cover (every heading from October 16 to 19, when seven ExtraBold section heads on one page read as a stack of headlines). Below the section step it is only a curated collection’s cover name, in uppercase. Buttons, navigation, fields, prices, dates, tags, and chips are Medium.
- Caveat, a handwritten script, is for an accent only, at most once on a screen, like the scribble: today the feed’s note for today. Never a button, label, field, heading, price, date, or anything read to act. It runs small for its size, so it has its own step, 36/40.
- The business and activity pages (Hannah, October 23, reviewed and adopted for every new page): four sizes on a page, Headline, Section, Body, and Small, with buttons and chips at their own. The name is the Hero name, once. Section titles are Section title, with a count after a round dot in the muted ink and one link beside the title, a small underlined Text button in the muted ink (SectionHeading count and link). A card’s one fact or a name is Title (Body in Medium), its continuation muted in Regular. Reading text is Body Regular, cut at six lines with See more. Every line under a title is Caption with round dots between its parts (DetailLine), and lists inside a card drop to Caption too (ItemText small). The page ends with a Caption note in the muted ink.
- Parts on one line are always split by the drawn round dot (DotSeparator: 5px, the same at every size, 8px from the words), never a typed ·, •, or |. On a phone a line of details takes a part a line, so no dot is left at a line’s end, unless it must stay one line, which ends in an ellipsis.
- Button labels are 13, 15, and 16px by size. Text fields are 16px, so iPhones do not zoom in when a field is tapped.
- Text on a brand card is never smaller than 13px, since it sits on a textured surface. Businesses’ own fonts are not used.
Text blocks
The seven text pieces every screen uses for its hero name, titles, headings, lines of details, labels, items, and the way back, so type is set in one place.
Happy Makers
Ages 5–10, Day camps, classes, and drop-in, $–$$$
Priya and Sam booked here, 15 families nearby booked this fall
Activities, 12
View all 12 activitiesSettings
Personal info
How businesses and your family reach you.
Dates
Book a day, or the whole week.
Your account
S.T.E.A.M. Discovery CampAges 6–10$95 for the day
Cost and refundsFree cancellation until 14 days before10% off for each sibling
Back link
Show details
- Hannah, October 19: screens set their own type in 339 rules across 71 files, more than the library’s components did, so the same title or label looked a little different from page to page and weight felt scattered. Each recurring piece now lives here once: a page’s title, a section’s heading, the small label over a group, an item’s title with its details, and the way back.
- Page heading: an eyebrow, the title in Headline, and one muted line of description. Section heading: the section step (or Title for a subsection), an optional mark, a description, and one action. Group label: the small step in the label weight, muted or in the ink. Item text: an eyebrow, the title, muted details, and a note, as List row draws them. Back link: the arrow and the page’s name, 44px tall.
- From the business and activity pages (Hannah, October 23): Hero title is a business’s or activity’s own name, the Hero name role, once a page. Detail line is every line under a title, the small step in Regular, its parts split by the drawn round dot (Dot separator), the facts in the ink and who booked muted, a part a line on a phone. Section heading takes a count, after a round dot in the muted ink, and one link beside the title, a small underlined text button in the muted ink. Item text’s small size sets a list inside a card in the small step.
Scribble
A hand-drawn line that underlines something new, once, like a new note on the feed.
Curious minds are good company.
Show details
- Hannah, October 7: the text button’s line (the same strokes, color, 2px weight, and 450ms draw), drawn once under a block of text the first time someone sees it. The feed’s note for today uses it.
- Each line of the text gets its own stroke, drawn one after another, as a hand underlines a sentence. It stays drawn for that visit; the next visit with the same text shows it plain, so the line always means new.
- Use it for one new thing on a page, never for emphasis that is always there. With reduced motion it appears already drawn.
Annotation marks
Small hand-drawn marks beside a word, like notes in a margin, so a plain piece has a little life.
Rays
Sparkle
Sparkles
Asterisk
Star
Underline
Circle
Arrow
Spiral-arrow
Continuous underline
Spiral draws on scroll
Show details
- Hannah, October 8, after a sheet of doodle marks, kept clean rather than childish: one fine stroke (1.75px, a touch finer than the text button’s line) in the color of the text beside it, so each works in light and dark and on any tint.
- Nine marks. Mostly clean: rays off a corner, a sparkle, an asterisk, a double underline, a loose circle around a word. Playful ones used now and then: a curly arrow, a star, twin sparkles. A long name takes an underline or a circle, which stay inside its box.
- First on Explore’s category tiles (Photo cards, Not in use yet since October 19), now on the summer marketing page’s headings: a cluster of two or three marks of one family per tile (two ray bursts; three asterisks; a circle with rays), at 80%, placed against the word like notes in its margin. Hovering a tile draws them again, one mark after another and each stroke in turn, as a pen would; reduced motion leaves them drawn.
Annotated text
A short heading phrase with a continuous underline or a loose editorial circle.
Summer possibilities
A little easier
One continuous line
A phrase to notice
Show details
- A persistent editorial emphasis, first used on the summer marketing page. The underline crosses back over itself in one pen stroke, and the circle keeps the hero’s uneven loop.
- Use short phrases that fit on one line. The words inherit their heading’s type and color; the mark inherits that color unless markColor selects another role.
- The text is always readable. Reduced motion, unavailable observers, and server-rendered views show the finished annotation.
Decorative motion
A shared slow bob or rotation for editorial illustration, independent of its placement.
Bob
Spin
Independent bob and spin
Paused
Show details
- The summer page’s cutouts use one motion primitive in the hero and both closing sections. Bobbing moves by the smallest space step; a slow turn is reserved for flowers and stars there.
- Nest bob outside an illustration’s placement and spin inside it so the motions cannot overwrite each other. Keep meaningful text and controls outside decorative motion.
- Reduced motion holds still. The host pauses offscreen compositions and hidden tabs through useStageEnvironment; this demo does the same.
Ambient glow
A soft wash of color behind a screen that asks one thing at a time, like signing up or setting up a family.
Full
Behind the onboarding card.
Soft
Behind the desktop sign-up form.
Show details
- From Figma’s onboarding and sign-up frames (Hannah, October 7): cool at the upper left, rose at the right, warm at the foot, matched to School’s Out’s blue, pink, and orange accents.
- Use it behind focused screens with one card or one form: sign-up, log-in, and onboarding. Not behind app pages, business pages, or anything in a business’s colors, and never as the only thing that makes text readable.
- Full sits behind the onboarding card. Soft, at 30%, sits behind the desktop sign-up form, beside the photo panel.
Accent edge
An off-white surface with School’s Out’s colors along one edge, for a business with no brand color yet.
Show details
- Hannah, October 19: an activity page whose business has no brand color yet (or a true gray) shows its title card off-white with this along its top, in place of a gray wave. The colors are the footer’s: School’s Out’s accents as one gradient sliding slowly sideways, fading into the base on the page end’s curve, so the two read as one family.
- At the top edge, so the title and byline at the card’s foot sit on the calm off-white.
Vivid field
Not in use yetRetained for design review. No consumer screen uses this component.
A business’s own color as one soft, slow wave, for the one place a page is filled with its brand: behind an activity’s title.
OMSI
Trackers Earth
Experiment PDX
Cedar Hollow Day Camp
Show details
- Hannah, October 18 and 19 (the activity test’s O, which the client chose): the Brand System’s vivid finish keeps the brand’s own hue and grades how vivid it is, so a muddy olive stays olive and a vivid red stays red. The field draws that palette (the brand, a tint, a shade, and the hues beside it) as one wave that drifts and leans a little toward the pointer.
- Under the words it keeps only tones the ink reads on at 4.6:1 or more, so the title and the verified stamp stay readable on any business’s color. A business with no brand color yet gets the Accent edge instead.
- One per page, behind the title only. Never behind reading text or controls.
- Not in use yet: on October 26 (Hannah) the activity page became Getting there first, which leads with the activity’s own card in place of the title card. The Dot field draws the same palette behind the business page and the activity page’s Hosted by.
Color families
Every business’s brand color is matched to one of nine families, which decide whether it counts as a brand color and set its cards’ texture and fallbacks. The cards keep the brand’s own hue.
redorangeyellowolivegreentealbluevioletpink
pink
#ff8cba
blue
#7ab3ff
orange
#ff9479
yellow
#e9a400
olive
#a7bb00
green
#00ca63
red
#ff9190
violet
#bda1ff
teal
#00c5b4
Show details
redHue 8° to 32°
orangeHue 32° to 66°
yellowHue 66° to 108°
oliveHue 108° to 130°
greenHue 130° to 168°
tealHue 168° to 220°
blueHue 220° to 276°
violetHue 276° to 335°
pinkHue 335° to 8°