Design systems collection and component library by Fernando Ghiberti
A monorepo containing multiple design systems and a hybrid React component library built for authorial projects. Multiple visual identities, one component API.
50 components · 551 tests · 9 design systems · EN/PT-BR docs
| Package | Description | Version |
|---|---|---|
@ghiberti85/tokens |
Design tokens in W3C format, powered by Style Dictionary v4 |  |
@ghiberti85/ui |
React component library (hybrid styled + headless) |  |
| App | Description |
|---|---|
apps/docs |
Documentation site — Next.js 15, EN/PT-BR |
apps/storybook |
Component explorer — Storybook 8 + Chromatic |
9 visual identities, all consuming the same component API:
- ds-clean — Technical authority, navy + lime accent. Inter + JetBrains Mono. (default)
- ds-velvet — Warm, approachable, rounded. DM Sans/Nunito + teal accent.
- ds-brutalist — Raw, bold, intentional. Bebas Neue + pure primaries.
- ds-editorial — Warm, typographic, refined. Playfair Display + cream tones.
- ds-onyx — Dark-first, clinical. Inter + cyan accent. Productivity/dense UI.
- ds-aurum — Luxury/premium, dark navy + gold. Cormorant Garamond serif headings.
- ds-neon — Cyberpunk/synthwave, near-black + magenta glow. Full monospace stack.
- ds-nature — Organic/sustainable, warm white + sage green. Lora + DM Sans.
- ds-swiss — Ultra-minimal/Bauhaus, white + black. Inter heavy weights, zero radius.
- Node.js ≥ 20
- pnpm ≥ 9
# Install dependencies
pnpm install
# Build all tokens first
pnpm --filter @ghiberti85/tokens build
# Run all in dev mode
pnpm dev
# Run Storybook only
pnpm --filter @ghiberti85/storybook dev
# Run docs only
pnpm --filter @ghiberti85/docs dev# Unit tests (Vitest + Testing Library)
pnpm test
# Coverage report (lines/functions/statements ≥ 75%, branches ≥ 60%)
pnpm --filter @ghiberti85/ui test -- --coverage
# Bundle size check (single component ≤ 120 kB, full library ≤ 350 kB)
pnpm --filter @ghiberti85/ui size
# Interactive test UI
pnpm test:ui
# Visual regression (requires Chromatic token)
# Set CHROMATIC_PROJECT_TOKEN in your environment| Layer | Choice |
|---|---|
| Monorepo | Turborepo + pnpm workspaces |
| Tokens | Style Dictionary v4 (W3C format) |
| Components | React 19 + TypeScript |
| Styling | CSS Modules + CSS Custom Properties |
| Primitives | Radix UI (accessibility) |
| Docs | Next.js 15 + next-intl (EN/PT-BR) |
| Storybook | Storybook 8 |
| Testing | Vitest + Testing Library |
| Visual regression | Chromatic |
| CI/CD | GitHub Actions |
This is a personal project, but issues and suggestions are welcome.
MIT © Fernando Ghiberti