Steph Huynh

● Superbloom

Overview

Superbloom

Building a design system in the open.

Superbloom is the component library powering this site. It's built from scratch, documented in Storybook, and used across every page.

AI (Microsoft Copilot & Claude Code) as a collaborator throughout. New patterns are added using a custom agent skill (new-pattern) that knows the rules: Svelte 5 runes only, design tokens for colors and spacing instead of typing in raw values, and always ship three things together: the component itself, a Storybook story so it's documented, and an export so the rest of the site can actually use it.

Why

  • I like this kind of work. Designing the system, choosing how to build it, getting the details right - all of it.
  • 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.
  • I wanted to build with AI on purpose. It handled scaffolding, iteration, and the slow parts. The decisions were mine.

How it works

Superbloom is structured in three layers: tokens, primitives, and patterns.

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: the raw material for composing patterns. Thin wrappers that carry token-based styles.

Patterns

Opinionated, multi-primitive compositions: SectionHeader, ProjectCard, CaseStudyNav, and more.

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

In other words: pages don't reach past pre-built pieces to grab a raw color directly — everything flows through the system in order.

What ships with it

The full set of patterns is documented in Storybook. Every pattern has a story, a controls panel, and an accessibility check.

SectionHeaderProjectCardMetadataLabelAccentBlockBreadcrumbCaseStudyNavTestimonial