Overview of robr0 DS

A personal design system, built to make this site

robr0 DS is the system I built — by myself — to make every page you see here. The foundation was designed in Figma. The system itself lives in the repo: a written spec, tokens as layered CSS, components in React. Claude Code builds from the spec, so a design change reaches production in under a minute. None of it is theoretical: the buttons, the colours, the type, the layout — they're all running on the same system this page describes.

I'm putting all of it on display because I think the system is the work. The pipeline below shows how the pieces fit. The tools rail lists what makes it run. And if you want to lift any of it for your own project, everything is open — the artifacts at the bottom of this page are ready to drop in.

Pipeline

  1. Figma

    Design foundation

    Where the system's foundation was designed — the token architecture, the colour ramps, the component vocabulary. Today it's the sketchpad for visual exploration; the source of truth has moved into the repo.

    • Designed the token architecture as variables: 7 color ramps + spatial tokens (gap, padding, radius, border)
    • Designed the original components with variants and light/dark semantic mappings
    • Still where bigger visual changes get explored before they land in the written spec
  2. Claude Code

    AI component generator

    Builds production React from the written spec that lives in the repo — design.md for the design language, CLAUDE.md for the rules.

    • Maintains the layered CSS token architecture (primitives → semantics → components)
    • Generates React components with TypeScript and token-based CSS from the spec
    • Builds Storybook documentation automatically for every component
  3. Storybook

    Live documentation site

    Interactive component library at design-system-iota-one.vercel.app showing every piece of robr0 DS.

    • Component playground with live controls for all props and states
    • Token docs (colors, spacing, typography), icon gallery, logo library
    • Auto-deploys on every code push
  4. GitHub

    Version control

    Public repository storing the entire codebase with full commit history.

    • Tracks all changes to design system and website (monorepo)
    • Triggers Vercel deployment on every push to main
    • Portfolio visibility at github.com/robritacca-dotcom/design-system

    Continuous integration

    Every push and PR runs an automated quality gate before anything is trusted.

    • Lints the codebase and builds the library, Storybook, and the website on every change
    • Renders every Storybook story as an automated smoke test in headless Chrome — every variant, every run
    • Drift guard fails the build if generated docs (component counts, skills, blueprints) go stale
    • The same checklist runs locally as a single command, so local and CI can never disagree
  5. Vercel

    Auto-deployment

    Watches GitHub and deploys both sites automatically on every push.

    • Builds and deploys Storybook → design-system-iota-one.vercel.app
    • Builds and deploys website → robr0-ds.vercel.app
    • Live in under 60 seconds with SSL and global CDN

Take it with you

The whole system is open. If you want to apply this approach to your own project, these artifacts make it easy — drop them into your codebase or AI tooling and you have a working starting point.

Claude MD

The codebase context file Claude Code reads on every session. Project structure, token architecture, component anatomy, and the conventions a builder needs to extend the system without exploring. Hand it to any AI agent and it knows the rules.

Read Claude MD

Design MD

The design language in a single markdown reference — tokens, typography, colours, and every component spec. The source of truth for how the system looks and behaves, written so a human or a model can pick it up cold.

Read Design MD

Skills

Reusable Claude Code skills — scaffold a new component, audit token usage, run a heuristic review, ship a pre-deploy check. Each one is a markdown file you can download and drop into .claude/skills/ on your own project.

Browse Skills

Loops

Skills that run themselves. Scheduled agents that do real work against real data — the first one reads this site's analytics every week and proposes copy experiments — with guardrails that keep a human approving every change.

See the Loops