JOSUI Design System

Work in progress

Role: Creator and sole contributor
Focus period: January 2026–Present
Outcome: Evolving design system architecture with multi-framework delivery

Overview

JOSUI is a personal design system monorepo created to demonstrate how I approach scalable UI architecture and platform-ready tooling. It is actively evolving as I test ideas, refine patterns, and ship new packages.

The system currently includes tokens, core logic, web utilities, and framework-specific libraries for both React and Vue, with shared tooling to keep consistency across packages.

The goal is to show end-to-end thinking: design tokens as the source of truth, a layered architecture that keeps responsibilities clean, and delivery formats that match how teams actually consume design systems.

The Challenge

I wanted a single system that could scale across multiple frameworks while keeping API surfaces consistent and reducing duplication between packages.

  • Tokens needed to support multiple output formats without manual drift
  • Core logic had to stay framework-agnostic
  • Framework libraries needed consistent APIs and test setups
  • Tooling had to enforce standards across the monorepo

The Approach

I’m building the system as a layered monorepo: tokens → core → web utilities → framework implementations, with separate styling delivery channels. The token pipeline is the single source of truth and feeds every consumer package as the system grows.

  • Defining JSON tokens (aligned with the latest DTCG specs) as the source of truth and generating multiple formats via Terrazzo
  • Isolated core logic in @josui/core and @josui/core-web
  • Implementing React and Vue component libraries with aligned APIs
  • Building Tailwind and SCSS consumption packages for different styling workflows
  • Adding workspace tooling packages for ESLint, TypeScript, and Prettier consistency

Implementation Highlights

Token pipeline
Tokens live as JSON files and are compiled into JS, CSS variables, Tailwind tokens, and SCSS outputs using Terrazzo. The pipeline is evolving as new formats and naming conventions are tested.

Core and web utilities
Core behavior is centralized in @josui/core, with web-specific helpers in @josui/core-web. Framework packages build on top, so React and Vue can ship the same behaviors with idiomatic bindings as the APIs stabilize.

Framework packages and tooling
React and Vue libraries are published separately, each with Storybook, Vitest, and Testing Library setup. The monorepo includes internal linting, TypeScript, and Prettier config packages to enforce consistency. It also includes `AGENTS.md` guidance and scoped skills to support agentic coding workflows across packages.

Results

This system is in active development, so the outcomes below reflect the current state rather than a final destination.

  • A token pipeline that drives multiple delivery formats
  • Early API parity across React and Vue implementations
  • Package boundaries designed to scale with new additions
  • Tooling foundations to keep the workspace aligned

Learnings

Tokens are the real product.
The more reliable and automated the tokens become, the more composable and repeatable the system gets.

Framework parity must be designed, not assumed.
The only way to keep APIs consistent over time is to intentionally design the layers that sit between core logic and framework bindings.

Technical Summary

Stack: pnpm, Turborepo, TypeScript, Vite, tsup, Terrazzo, React, Vue, Storybook, Vitest, Testing Library

Scope: Multi-package design system with tokens, core utilities, framework libraries, and tooling packages (in progress)

Repository: github.com/joakimstrandell/josui

Lets connect if you want to talk design systems or token pipelines.