Design system
The tokens, the type scale and the real components of progress-foundation.ch.
Source of truth · design-system/tokens.css
Three files answer for everything below.
Is the rebuild the same stylesheet?
Rebuilt from the recovered sources and measured against production.
Colours
Named from Figma, valued from the site.
Typography
Rendered in the site's own fonts.
Icons
One sprite on the site, two libraries in the kit.
The site's sprite · 10
Every icon the site draws comes from here.
Theme icon files · 11
Single files beside the sprite, some referenced from CSS.
Bootstrap Icons, from the kit · 33
Placed in Figma, shipped by no page.
icons8, from the kit · 19
Exported from the file; the site has none of them.
Event type icons live in the media library.
Spacing
Eleven steps carry the site.
Radii
Five, two of them forced.
Shadows
Three in the entire site.
Motion
Two durations and two easings.
Breakpoints and container
Mobile-first, six of them.
Components
Real markup, rendered with the rebuilt stylesheet.
Figma check
Everything the UI Kit declares, beside what the site does.
Palette · Figma against the site
Fourteen colours are defined in the kit.
Type · Figma against the site
Nine text styles are defined in the kit.
What the kit draws
The component matrix as the Figma file declares it.
What diverges from Figma, and what was decided
Code wins on every number; Figma keeps the names.