Foundry

Overlays

Modal and popover - the two overlay components the rest of the catalogue didn't demonstrate yet. Both are real and working, not a static mock-up.

Confirming a destructive action

`brand-guide`'s pattern: the destructive control opens a modal that names exactly what will be deleted, carries its own small danger zone, and never doubles as a save button. Confirming actually submits a genuinely CSRF-protected POST - nothing is stored, but the request is real.

Popover

Click-triggered, unlike the tooltip elsewhere in this catalogue (hover/focus, for a one-line hint). A popover holds more than a hint, so it stays open until dismissed - Esc, a click on the trigger again, or a click anywhere else on the page.

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

Overlays

Modals, a confirmation before a destructive action, tooltips and popovers. Escape closes any of them, and focus returns to the button that opened it.


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?