Steph Huynh

● Superbloom

Live

Superbloom.

Superbloom is the component library behind this site: tokens, patterns, Storybook, and docs in the same repo. Built in the open and shipping with the portfolio today.

AI is part of the workflow. New patterns ship through a custom skill (new-pattern) that enforces Svelte 5 runes, token-based styling, and three deliverables every time: the component, a Storybook story, and an export from $lib/system.

Why

  • I like this kind of work: designing the system, choosing how to build it, and getting the details right.
  • A design system is a real test of range. It needs design judgment and engineering discipline, and I wanted to show I can do both.
  • The portfolio dogfoods the system. Every page is built from the same tokens and patterns, so breakages show up in real layouts, not just in Storybook.

How it works

Superbloom is structured in three layers in Storybook and documentation: tokens, primitives, and patterns. Route pages may also use small site helpers documented under Guidelines.

Tokens

TypeScript objects and CSS custom properties for color, typography, and spacing. Colors use OKLCH with separate light and dark values.

Primitives

Low-level building blocks: Button, Tag, StatusIndicator, ExternalLink, and shadcn-backed Separator and Sheet. Custom atoms live in system/primitives; CLI-managed ui files are wrapped, not hand-edited.

Patterns

Opinionated compositions: SectionHeader, ProjectCard, CaseStudyNav, and more.

Route files compose patterns. Patterns compose primitives. Primitives consume tokens. Nothing skips a layer.

Pages do not reach past pre-built pieces to grab raw color values. Everything flows through the system in order.

What ships with it

Primitives and patterns each have Storybook stories. Patterns also have dedicated documentation pages with usage notes.

In progress · Figma

A strict-sync plugin regenerates color variables, primitives, and patterns from the same repo manifest. Read the build post .

Primitives

ButtonExternalLinkLiveBadgeSeparatorSheetStatusIndicatorTag

Patterns

AccentBlockBreadcrumbCaseStudyNavMetadataLabelProjectCardSectionHeaderTestimonial

Guidelines

Site compositionVisual testing