Skip to content

Foundations · updated 7 November 2026

Every component I've shipped, in one place.

129 components from 5 production websites. Previews are screenshots of the live sites, so what you see is what ships. This is the groundwork for an open-source library.

components
129components
live previews
73live previews
websites
5websites
stacks
3stacks

Component catalog

129 of 129 components

Design tokens

Colour and type, site by site.

zShuck

zshuck.com
  • #0e0d0c--ink
  • #161412--ink-2
  • #24201d--ink-3
  • #3a342f--ink-4
  • #f2ece4--bone
  • #e6ddd2--bone-2
  • #d4c8ba--bone-3
  • #a39a90--smoke
  • #5f564d--dust
  • #ff5a1f--orange
  • #ff8a5c--orange-soft
  • #b3360a--orange-deep
  • #3d4bff--ultra
Bricolage GrotesqueInstrument SerifJetBrains MonoNext 16, React 19, Tailwind 4, next-intl 4

Cecilia Llorca

cecillorsan.es
  • #ece8ef--cielo
  • #17121c--tinta
  • #06a7ce--turquesa
  • #0b279f--cobalto
  • #ee6b82--coral
  • #b91f1a--rojo
  • #f28a1e--naranja
  • #ffd23c--amarillo
AntonBricolage GrotesqueReenie BeanieNext 15, React 19, Tailwind 4

Jon Soto

jonsotott-web.vercel.app
  • #ece3d0--washi
  • #f6f0e3--washi-hi
  • #dccdb0--kraft
  • #15120f--sumi
  • #221e1a--sumi-2
  • #4a433a--ink-soft
  • #c33a22--shu
  • #a82f1a--shu-ink
  • #e0533a--shu-glow
GloockIBM Plex MonoYuji BokuAstro 7, static

Andrea Marsé

andreamarse-web.vercel.app
  • #c8102e--carmin
  • #f4b6c2--rosa
  • #ff4d7d--rosa-vivo
  • #6b1b1d--burdeos
  • #fbf1e4--crema
  • #f4e3c2--crema-teatre
  • #e9b86a--ambar
  • #1c0f12--tinta
  • #2a171b--tinta-2
  • #fffaf4--blanco
GeistGeist MonoInstrument SerifNext 16, React 19, CSS Modules

3457 Studio

3457studio.com
  • #ffffff--bg
  • #f5f5f5--surface
  • #f0f0f0--surface-alt
  • #ebebeb--surface-hover
  • #e8e8e8--border
  • #0a0a0a--text-primary
  • #6b6b6b--text-secondary
  • #aaaaaa--text-muted
  • #cccccc--crosshair
  • #e4e4e4--deliverable-icon
  • #d0d0d0--coming-soon-border
  • #161616--invert-bg
  • #0c0c0c--btn-color
  • #1a1a1a--process-num
InterSyneVite 8, React 19, Tailwind 4, client-rendered SPA