Foundry

Video player

A custom player over a real <video>, with captions, a transcript, speed, volume, full screen and keyboard shortcuts. It never plays by itself. Use it on the page or in a popup. The clip is a short animated tour drawn for this page, so there is nothing third-party in it.

On the page

A tour of Foundry

Transcript

The clip has no speech, so the transcript is what is shown on screen, with the sound noted. It matches the captions exactly.

Transcript of A tour of Foundry
FromWhat is shown
0:00 Foundry is the shared design system behind every app in the family. (Soft ambient music plays.)
0:05 Colour comes from tokens. Change one value and every screen follows.
0:10 Components are built once, then copied, never rebuilt.
0:15 Light, dark and high contrast are all measured, not guessed.
0:20 Accessible by default: every part works by keyboard and screen reader.

Keyboard shortcuts

Keyboard shortcuts for the video player
KeyDoes
Space or KPlay or pause
← →Back or forward 5 seconds
↑ ↓Volume up or down
MMute or unmute
CCaptions on or off
FFull screen

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

This is Foundry, the shared base theme - a component catalogue other apps copy their SCSS partials and Twig components out of. Nothing on this site is real data.


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?