Philosophy
The principles behind Source.
Token-first
Design decisions live in tokens, not in components. A button references --color-text instead of hardcoding a value. Change the palette and everything updates. Tokens can be swapped per project without touching component code.
Works anywhere
Source uses native Web Components. They work in Vue, React, plain HTML, whatever. No build step, no adapter, no wrapper. If the browser supports it, Source runs.
Simple over clever
Two files to import, no build pipeline needed. The goal is a system you can drop into any project in under a minute and start using 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 --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.