Back to index

Personal

Minimal
Design System

A multi-brand Design System, built from the ground up in Figma, then translated into a documentation site built from scratch with the help of Claude Code.

TypePersonal project
Brands3, with light and dark
StackReact + Vite
Releasedv1.0.0 — June 2026
View site
00

The project

This project started as a way to display my capabilities to the Figma community by posting a public Design System which any designer could download.

Built as a multi-brand system powered by variables, it contains colour, spacing, radius, and text values for 3 brands which each have different styles. These are enabled through changing modes in Figma. Light and Dark mode integration was also included in the release.

Design System in Figma — image slot Minimal Design System in Figma
W H

The rise of Claude capabilities during my time building the system in Figma made me think about the possibility of taking the project a step further and creating a public documentation site alongside the Figma resource.

I designed the pages for the site in Figma, and worked with Claude to develop my knowledge of hosting my own GitHub repo, publishing the site through CloudFlare. The end product is a fully functional documentation site which was coded by Claude but designed by me.

01

The build

2 views
GitHub repository — image slot MinimalDS documentation site
Light and dark mode — image slot MinimalDS light and dark mode
W H 01 / 2
View site
← Back to index Press G for grid