Getting the most out of Foundry
Foundry is the design system behind a family of web apps. Every component here is real, working code, shown with invented data.
Finding your way round
- Dashboards show how the pieces fit together for different jobs: a general overview, sales and learning.
- Components lists every piece on its own page: forms, tables, charts, a kanban board, a calendar and more. Each one works, so try it.
- Pages are whole screens most products need: account settings, a profile, users and roles, pricing and checkout, a help centre and a product page.
- Shells are the page layouts the apps share: the signed-in app, the sign-in page, notice pages such as the privacy notice, and error pages.
- The ? button in the corner of every page explains the page you're on.
Anything you change in a demo is remembered until you close your browser, and only you see it.
Setting it up your way
- Customise in the top bar sets the theme (light, dark, high contrast, or follow your device), a colour, how panels look, where the menu sits, the page width and how tightly it's spaced. Changes apply as you choose them.
- The side menu button at the left of the top bar opens and closes the menu. It stays the way you leave it.
- Reset to defaults, at the foot of the Customise panel, puts everything back.
How a component gets into an app
Foundry isn't a package you install. Each app copies what it needs and makes it its own:
- Copy the component's stylesheet and template into the app.
- Give it the app's own colour, checked against the other apps so no two look alike.
- Keep the shared parts identical: spacing, corner radius, shadows and neutral colours are the same across every app.
- Re-measure every colour pair for contrast before it ships.
Copying rather than installing means each app can change a component without breaking the others, and nothing ships that the app hasn't read.
For developers
There's a small read-only API over the component catalogue, with its own API reference and a Try it button on every endpoint. What changed and when is in What's new.
Something not working?
Use the support page. If it's an accessibility problem, the accessibility statement says how to report it.