Philosophy
The principles behind Source as an AI-ready system for fast, accessible, and consistent implementation.
Token-first
Design decisions live in tokens, not in components. A button references --source-color-text instead of hardcoding a value. Change the palette and everything updates. Tokens can be swapped per project without touching component code.
React-first
Source ships two packages. @pierredelattre/source-tokens is plain CSS and works in any project. @pierredelattre/source-react builds on top of it with typed, composable React components. You can use the tokens without the components, but not the other way around.
Simple over clever
Two packages, one install. The components follow standard React patterns: controlled and uncontrolled props, compound component API, no magic. The goal is a system you can drop in and use without reading documentation first.
Figma parity
Figma Variables map directly to CSS custom properties with the same token names and values. Designing with color/text in Figma and writing --source-color-text in CSS should feel like the same act.
Deliberate defaults
Nothing in Source is accidental. The warm neutral palette and the 4px spacing scale were each chosen for a specific reason. Good defaults mean less time overriding things later.