Foundry
Guide

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:

  1. Copy the component's stylesheet and template into the app.
  2. Give it the app's own colour, checked against the other apps so no two look alike.
  3. Keep the shared parts identical: spacing, corner radius, shadows and neutral colours are the same across every app.
  4. 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.

Customise

Changes apply as you choose them.

Theme
Colour

Preview the kit in another accent. Fifteen colours, evenly spaced and equally strong, each measured to pass AA in light and dark; high contrast keeps its own.

Skin
Layout

On screens narrower than a laptop every layout uses the slide-out menu.

Content width
Density
Font
Space Grotesk headings, IBM Plex Sans text
Inter throughout
Your device's own font

Saved in two cookies on this device (fo_theme, fo_shell), never sent anywhere else. Privacy notice.

Help

About this page

Guide

How Foundry is organised, how to set it up your way, and how a component gets into an app.


Without a mouse

Every control on this site works from the keyboard, including this panel (Escape closes it). Anything you can drag also has a menu or form that does the same thing.


Still stuck?