● Case study
Superbloom.
A small design system built to make this portfolio more consistent, easier to extend, and less dependent on one-off decisions. It brings foundations, reusable patterns, Storybook, and route-level documentation into one working system.
Scope
Foundations, patterns, docs
Stack
SvelteKit, Tailwind, Storybook
Role
Design and engineering
Outcome
A clearer system for building the site
Live artifacts
- Storybook → Interactive component playground
- System docs → Foundations, components, patterns
Context
This portfolio started to accumulate repeatable system work before it had a name for it. Section framing, metadata treatments, project listings, and the documentation itself all needed more structure than page-by-page styling could support.
The goal was not to build a large component platform. It was to build a small, real system that could support the portfolio directly and make future decisions easier to repeat.
Why this mattered
Once layout, hierarchy, and interaction patterns show up across multiple pages, they need to be treated as system concerns. Naming and documenting them makes the work easier to reuse, maintain.
Goals
- Create a small but real token and pattern layer instead of styling every page from scratch.
- Use the system to build the portfolio itself so the work stays grounded in real constraints.
- Document decisions close to implementation instead of treating docs as a separate artifact.
- Keep the system lightweight enough to grow without becoming process for its own sake.
Working principle
Every decision had to prove itself in the portfolio, not just in isolation. If a token, pattern, or doc page did not make the site easier to build, it did not belong.
What I built
The system is intentionally compact. It covers the core foundations and the structural patterns that appear repeatedly across the portfolio and the docs site.
Foundations for colors, typography, and spacing.
Patterns for MetadataLabel, AccentBlock, SectionHeader, ProjectCard, and Breadcrumb.
A route-level documentation site for browsing the system in context.
A Storybook surface for isolated review and iteration.
Key decisions
The most important part of this work was not the number of artifacts. It was choosing a small set of rules that could make the rest of the portfolio feel coherent.
Use semantic tokens, not raw values
Color, spacing, and typography are defined by role first. That keeps components stable even when values or theme tuning change.
Prioritize a pattern layer over a large component catalog
The portfolio benefits more from a handful of strong structural patterns than from a long list of low-value UI variants.
Keep documentation inside the product
The system docs live in the same app as the portfolio, which makes the rules easier to test against real use instead of abstract examples.
Lean into an editorial visual language
The system favors restrained accents, serif display moments, and quiet metadata instead of dense app-style chrome.
Implementation
The system is built in SvelteKit and styled through shared tokens and utilities. Storybook is used as an isolated playground, while the route-level docs in the portfolio act as the readable reference for how the system behaves in context.
That combination is the point: the docs are not detached from the product, and the product is not relying on undocumented decisions.
Stack
SvelteKit, Tailwind, shadcn-svelte primitives, Bits UI, Storybook, and a small public system API that keeps tokens and patterns accessible from one place.
Outcome
The system already changes how the site is built. New pages can be assembled from a clearer set of tokens and patterns, visual hierarchy is more consistent, and the documentation makes the reasoning behind the interface easier to inspect.
It is still small, and that is intentional. The value comes from being real, integrated, and useful now rather than broad in theory.
Next steps
- Expand the documented surface from patterns into more reusable components.
- Keep turning implementation decisions into explicit design-system guidance.
- Add more review and testing depth around interaction and visual regressions.