For AI

Structured information about Source for language models and AI assistants.

What is Source

Source is a design system providing design tokens and Web Components for prototyping and launching web projects fast. No framework dependency, no build step. Clone or install via npm and import two files.

Key facts

npm package @pierredelattre/source
Repository github.com/pierredelattre/source-design-system
Component type Native Web Components (custom elements)
Token format CSS custom properties, W3C DTCG spec
Token naming --category-name (e.g. --color-text, --spacing-4)
Framework support Any — Vue, React, plain HTML
Custom element prefix src- (e.g. <src-button>)

How to use

npm install @pierredelattre/source
import '@pierredelattre/source/index.css'
import '@pierredelattre/source'

Or clone the repo and link the files directly — no build step needed.

Tokens

Tokens are CSS custom properties defined in tokens/. Two levels: primitives hold raw values, semantic tokens reference primitives by role. Full token index in TOKENS.md. 

/* Primitive */
--color-neutral-900: #1a1a1a;

/* Semantic */
--color-text: var(--color-neutral-900);
--color-background: var(--color-neutral-50);

Components

Each component lives in components/<name>/ with its own JS and CSS. Components use tokens via custom properties. Full component index in COMPONENTS.md. 

/* Import one component */
import '@pierredelattre/source/components/button/button.js'
<src-button variant="primary">Label</src-button>

Project structure

tokens/       Colors, typography, spacing, radius
components/   Web Components, one folder per component
styles/       Reset and base styles
index.css     CSS entry point (imports all tokens and styles)
index.js      JS entry point (registers all components)
TOKENS.md     Full token index
COMPONENTS.md Full component index

More context

TOKENS.md github.com/…/TOKENS.md
COMPONENTS.md github.com/…/COMPONENTS.md
Token spec W3C DTCG format