# Source Design System Source is a personal design system to code and integrate accessible, logical, and consistent web interfaces quickly, especially in AI-assisted workflows. Two npm packages: CSS design tokens and React 18 components with TypeScript. Full reference: /llms-full.txt ## Packages - @pierredelattre/source-tokens :: CSS custom properties, W3C DTCG spec, dark mode, accent themes - @pierredelattre/source-react :: React 18 components with TypeScript types ## Install npm install @pierredelattre/source-react @pierredelattre/source-tokens ## Quick start import '@pierredelattre/source-tokens'; import '@pierredelattre/source-react/styles'; import { Accordion, AccordionItem, Avatar, AvatarGroup, Badge, Breadcrumb, BreadcrumbItem, Button, Checkbox, Chip, FeatureCard, FormGroup, Input, Link, List, ListItem, Modal, Radio, RadioGroup, Select, Spinner, Switch, Tab, TabPanel, Tabs, Tag, Textarea, Toast, ToastProvider, Tooltip, useToast } from '@pierredelattre/source-react'; ## Token naming Pattern: --source-- Examples: --source-color-text, --source-spacing-4, --source-radius-md Two levels: - Primitives: raw values (e.g. --source-neutral-900: #1D1B1A) - Semantic: reference primitives by role (e.g. --source-color-text: var(--source-neutral-900)) Rules: - Semantic tokens reference primitives only, never other semantic tokens - Dark mode overrides semantic tokens via @media (prefers-color-scheme: dark) and the .dark class - Primitives are constant across modes and themes ## Component naming CSS class prefix: source- (e.g. source-tabs, source-tab, source-badge) Data attribute prefix: data-source- (e.g. data-source-palette="accent", data-source-variant="solid") All interactive components accept palette: neutral | accent | success | warning | danger | info Component tokens are CSS custom properties on the root class, overrideable per context without touching globals ## Accent themes Apply data-source-theme on html or body. No JS required. Available: blue (default), green, red, orange, yellow, pink, purple, teal Semantic accent tokens: - --source-color-accent: main interactive color - --source-color-accent-subtle: tinted background - --source-color-accent-text: text on neutral background in accent hue - --source-color-accent-foreground: text on the accent color itself ## Repository https://github.com/pierredelattre/source-design-system ## Full reference Token index: https://github.com/pierredelattre/source-design-system/blob/main/TOKENS.md Component index: https://github.com/pierredelattre/source-design-system/blob/main/COMPONENTS.md Full inline reference: /llms-full.txt