Overview of robr0 DS

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: the colour 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

Builds production React from the written specs that live in the repo: design.md for the design language, CLAUDE.md for the rules, and content-design.md for how every word reads.

• 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
• Maintains the system as well as building it: skills audit token usage, prose, and accessibility on demand, and recurring loops run copy experiments and keep the project journal current

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
• The props tables are generated from the component source itself: each prop is described once, next to the code, and a build check fails if any description is missing, so the docs cannot drift from what ships
• Token docs (colors, spacing, typography), icon gallery, logo library
• Auto-deploys on every code push

Public repository storing the entire codebase with full commit history.

• npm-workspace monorepo: the library publishes as @robr0/design-system, and this site installs that same package, so every page dogfoods the exact import surface a consumer gets
• Triggers Vercel deployment on every push to main
• Portfolio visibility at github.com/robritacca-dotcom/design-system

A manual release workflow ships the library to npm as @robr0/design-system. See how to install and customise it.

• Builds the distributable package: per-module JS + type declarations, token CSS, and the icon font
• Before anything reaches the registry, the tarball is installed into a scratch Vite app and built: a real consumer smoke test
• Publishes through a trust link between GitHub and npm, so there is no stored password or token to leak; every release carries provenance, a verifiable record of which code produced it. Dry-run by default

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 in headless Chrome and runs an axe accessibility audit on each: a render error or an accessibility violation fails the build, so a regression is caught on the story that introduced it
• Chromatic visual regression, run on demand: every story snapshotted in light and dark against an accepted baseline, so a token change that shifts pixels anywhere in the system is caught before it ships
• Drift guard fails the build the moment any registry-backed content goes stale: every countable collection on the site has a registry behind it and a check that holds the two together, so the numbers in the rail beside this pipeline come straight from those registries, never typed by hand
• The same checklist runs locally as a single command, so local and CI can never disagree

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

How the site actually reaches you: the domain, the fonts, the icons, and the measurement.

• robertritacca.com is registered at GoDaddy, whose DNS points at the Vercel deployment
• Nunito Sans is self-hosted: next/font fetches it from Google Fonts at build time and serves it from this domain, with no runtime Google request
• Material Symbols icons ship as a self-hosted woff2 inside the npm package itself; on this site, the playground's typeface picker is the one place fonts load from Google at runtime
• Google Analytics (GA4) measures traffic via the standard gtag snippet in the root layout

The chat behind the floating button in the corner of the site. It answers from the published site through Claude Sonnet; the same widget runs in the playground’s Chat view, where it can be resized and re-themed.

• The model's context is generated at build time from the site itself: page prose, data registries, root specs, and the essays. A new page reaches the chat on the next build
• Only published, self-authored content can enter the context; a validator fails the build on anything else. Facts about Rob come only from the site, while general design knowledge is answered freely and kept visibly separate
• Composed from the system's own ai components and mounted once in the root layout, so an answer keeps streaming between pages

Answer quality and spend are held by build gates and measurements.

• A golden set of questions runs through the real chat route; a coverage validator fails the build the moment the context loses a fact the eval depends on
• Layered spend protection: per-visitor rate limits, a daily budget breaker that degrades instead of going dark, and a hard cap behind everything
• Conversations are kept for 30 days, tied to no name or address, then deleted. The playground’s Chat view doubles as the QA surface, with a simulated transport that exercises the streaming without calling the model