Get started

For engineers

Where the system lives in code and how to build with it.

1
Use the tokens
Read the --schools-out-* and --v2-* variables from @schoolsout/tokens: schools-out.css is generated from Tokens Studio, roles.css holds the live roles, and layout.css the page grid. Never write a raw color, a typeface, or an off-grid size.
Color and type →
2
Pass the brand in
Components take the Brand System’s emit output and never hold a brand color. A test checks this.
How brands work →
3
Add a component
A piece that needs only React, the icons, and other primitives goes in packages/react/src with its subpath in the package’s exports; one that reads the Brand System or the catalog goes in its tier’s schools-out folder. Then add a Section to its group’s file and its entry to DESIGN_SYSTEM_INDEX.
Components →
4
Check your work
Run npm test, npm run build, npm run typecheck:react, and npm run lint:ui. Build every screen from these pieces, as they are; nothing is styled by hand.

Where the code lives

packages/reactThe primitives, @schoolsout/react: import each by its subpath (@schoolsout/react/button)

packages/iconsThe Amicons glyphs, @schoolsout/icons

elements/schools-outPieces that read product data (topics, child colors, the vivid field)

components/schools-outPieces that read the Brand System or the catalog

patterns/schools-outPage sections

modules/brand-systemTurns a listing into a brand (README.md is the spec)

runtime/schools-outHooks for brands, appearance, and glass

packages/tokensColors, type, grid, and radii, @schoolsout/tokens