Design system stats
Figma ↔ code coverage for every entry below
| Component | In Figma | In code | Match | Figma link |
|---|---|---|---|---|
Design system stats Overview | — | ✅ | — | — |
Colour primitives Foundations | ✅ | ✅ | ✅ Verified | Figma |
Semantic tokens Foundations | ✅ | ✅ | — | Figma |
Instrument Sans Foundations | — | ✅ | ✅ Verified | — |
Sometype Mono Foundations | — | ✅ | ✅ Verified | — |
Buttons Components | ✅ | ✅ | — | Figma |
Badges & tags Components | ✅ | ✅ | — | Figma |
Tabs Components | — | ✅ | — | — |
Collapsible Components | — | ✅ | — | — |
Project card Components | ✅ | ✅ | ✅ Verified | Figma |
Achievement card Components | ✅ | ✅ | — | Figma |
Testimonial card Components | ✅ | ✅ | — | Figma |
Nav Page Blocks | ✅ | ✅ | ✅ Verified | Figma |
Hero Page Blocks | ✅ | ✅ | — | Figma |
Experience Page Blocks | ✅ | ✅ | ✅ Verified | Figma |
Testimonials Page Blocks | ✅ | ✅ | — | Figma |
Contact / Footer Page Blocks | ✅ | ✅ | — | Figma |
Surf Runner intro Page Blocks | — | ✅ | — | — |
Surf scoreboard Page Blocks | — | ✅ | — | — |
Corner widget Page Blocks | — | ✅ | — | — |
Secrets Page Blocks | — | ✅ | — | — |
Case study: Section Page Blocks | — | ✅ | — | — |
Case study: Paragraphs Page Blocks | — | ✅ | — | — |
Case study: Figure Page Blocks | — | ✅ | — | — |
Case study: Video Page Blocks | — | ✅ | — | — |
Case study: Gallery Page Blocks | — | ✅ | — | — |
Case study: Lightbox Page Blocks | — | ✅ | — | — |
Case study: Video pair Page Blocks | — | ✅ | — | — |
Case study: Section nav Page Blocks | — | ✅ | — | — |
Case study: Quote Page Blocks | — | ✅ | — | — |
Case study: Meta badges Page Blocks | — | ✅ | — | — |
Case study: Next project Page Blocks | — | ✅ | — | — |
"Verified" means values were spot-checked against Figma, July 2026. "—" means the Figma component exists and is linked, but hasn't been compared pixel-for-pixel against the code yet.
Back to portfolio
these tokens also work out there — try pressing t on any page. grid people: g.