Preview • About • Tasks • Run • Technologies • Author • License
📐 Datum is the design system of rafaelfachinelli.com and its tools. In technical drawing, the datum is the reference every dimension is measured from; here it is the reference for color, space and type, so every page fits.
- Tokens in the W3C Design Tokens Community Group format: palette, dark theme, type, a 4 px spacing scale and a 2 px radius. One build turns them into CSS variables, a Tailwind 4 theme and a typed module.
- Eight seasons: the accent and the logo colors change with the date (Carnival, Halloween, Christmas…), set before the first paint. Layout and contrast never change.
- 14 React components (primitives and general patterns) on Radix and shadcn/ui, with the Blueprint personality on top: Button, Badge, Card, Field, Input, Select, RadioGroup, Sheet, Tooltip, Callout, Stat and more.
- Rules in code: every text and background pair passes WCAG AA (4.5:1) in every season, or the token tests fail the build.
- Storybook in Portuguese at design.rafaelfachinelli.com: foundations, one story per state, accessibility checks with axe, and the release notes (Novidades).
The packages are being prepared for npm as @rafaelfachinelli/datum-tokens and @rafaelfachinelli/datum-ui. How Datum was made: the article (Portuguese and English).
Click to view
| State | Task |
|---|---|
| ✔️ | Tokens in the W3C format, built to CSS, Tailwind 4 and TypeScript |
| ✔️ | Eight seasonal themes with WCAG AA contrast tests |
| ✔️ | 14 accessible React components |
| ✔️ | Storybook with foundations, one story per state and release notes |
| ✔️ | Used by rafaelfachinelli.com and its tools |
| ❌ | Published on npm |
You need Node.js 20+.
# Install the workspace
npm install
# Storybook on http://localhost:6006
npm run dev
# Build the tokens, the components and the Storybook
npm run build
# Token tests (contrast and season dates)
npm testRepository layout
| Path | What it is |
|---|---|
packages/tokens |
Design tokens, seasons and contrast tests |
packages/ui |
React components on the token theme |
apps/storybook |
The documentation site |
docs |
Rules of the design system and the brand principles |
| Tokens | Components | Docs |
|---|---|---|
| W3C DTCG | React 19 | Storybook 10 |
| TypeScript | Tailwind CSS 4 | axe |
| Vitest | Radix UI | Turborepo |
| shadcn/ui |
This project is under the MIT license.
The license covers the code. The name Datum, the RF logo and the Blueprint visual identity (the drafting board and the seasonal themes as a brand) belong to Rafael Fachinelli and are not covered by it: use the components freely, and give your product its own name and look.