Skip to content
All work
Design System2025

Prism

The design system that keeps every product in tune

Category
Design System
Focus
Systems · Frontend architecture
Year
2025

Overview

A token-driven design system and component library — the single source of truth behind every interface in this portfolio.

Design systems rot when design and code drift apart. Prism is the system underneath everything I ship: tokens, components, and a motion language, all fully themeable across dark and light.

Design direction

The decisions that give Prism its own personality — and keep it from looking like anything else on this page.

  1. 1

    A semantic, OKLCH-based token layer so theming is a data change, not a rewrite.

  2. 2

    Composable, accessible primitives with sensible defaults and full keyboard support.

  3. 3

    A codified motion language — easings, durations, stagger — so every product moves the same way.

  4. 4

    A living style guide that doubles as a test surface.

What's inside

Semantic OKLCH token architecture

Accessible, composable primitives

Shared motion language

Living, self-documenting style guide

Built with

ReactTypeScriptTailwind v4Framer MotionFigma

Next up

Maison

An online flagship that feels like walking into the boutique

Want something built like this?