Scale is a design system that helps individuals and organisations Scale.
It spans three connected products built on one shared foundation of tokens, components, and patterns:
- Lit Web components — open source. Framework-agnostic <sc-*> custom elements with built-in theming and design tokens, free to use and self-host.
- Figma library — paid. A fully variable-driven Figma system mapped 1:1 to the code, so designers and engineers work from the same source of truth.
- Framer system — paid. Production-ready Framer components and styles for shipping marketing sites and prototypes without leaving the canvas.
Find out more and grab a licence for the Figma and Framer versions here: www.scaledesignsystem.com
- 62 web components built with Lit + Shadow DOM
- W3C DTCG design tokens — colors, spacing, typography, borders, shadows
- Form-associated inputs that work in real
<form>submissions - Polymorphic
sc-buttonthat renders a real<a>when given anhref - Shared theme controller with light/dark and brand-token retheming
- MCP server +
components.json/tokens.json/patterns.jsonfor AI agents
npm install @scale-ds/scale-design-systemScaffold a pre-wired Vite + TypeScript app (theming, tokens, and a sample page):
npx degit ScaleDS/scale-design-system/examples/starter my-app
cd my-app && npm install && npm run devOr import a component straight into any page — each file registers its custom element on import:
<script type="module">
import '@scale-ds/scale-design-system/components/sc-button.js'
</script>
<sc-button type="primary" href="/docs">Get Started</sc-button>Scale ships with machine-readable context so AI agents can query component APIs, tokens, and patterns directly — no guessing, no web search.
| File | Purpose |
|---|---|
context/AGENTS.md |
Agent entry point — rules, categories, quick reference |
context/components.json |
Full component catalog — props, slots, events, examples |
context/tokens.json |
W3C DTCG design tokens |
context/patterns.json |
Composition patterns with ready-to-use templates |
An MCP server is bundled for IDE integration (Cursor, Claude Code, Claude Desktop):
{
"mcpServers": {
"scale": {
"command": "npx",
"args": ["@scale-ds/scale-design-system"]
}
}
}Visual properties come from CSS custom properties. The semantic brand
variables resolve to a primitive brand scale (--sc-color-brand-100–900) —
in the light theme:
:root {
--sc-color-background-brand: var(--sc-color-brand-500);
--sc-color-background-brand-hover: var(--sc-color-brand-600);
--sc-color-background-brand-pressed: var(--sc-color-brand-700);
--sc-color-text-brand: var(--sc-color-brand-500);
--sc-color-border-brand: var(--sc-color-brand-500);
}Retheme by overriding the --sc-color-brand-* primitives — sc-logo and every
component follow automatically. The dark theme picks different steps from the
same scale (e.g. --sc-color-background-brand: var(--sc-color-brand-400)), so
both themes retheme at once and honour prefers-color-scheme.
Light/dark is driven by data-theme on <html> and a shared ThemeController.
See the Color foundation for
the full token reference.
A dev-only, in-page editing overlay. Pin comments and make token-aware visual tweaks (colour roles, spacing, radius, typography) directly on a running page — the controls only offer valid tokens, so edits stay on-system. Each change is captured to a small queue that a coding agent reads and applies to your real source.
Add the Vite plugin (a no-op in vite build):
// vite.config.ts
import { scaleEdit } from '@scale-ds/scale-design-system/vite'
export default defineConfig({
plugins: [scaleEdit()],
})The overlay is off by default — opt in per run with SCALE_EDIT:
SCALE_EDIT=1 npm run dev # overlay on for this run
npm run dev # no overlayNon-Vite setups can mount it manually via enableEdit() from
@scale-ds/scale-design-system/edit. See the
Scale Edit docs for
queue options and the agent workflow.
npm run build # Compile TypeScript (components + bundled MCP server)
npm run build:watch # Watch mode
npm run generate:context # Regenerate components.json from sourceThe package builds on install via prepare and ships compiled dist/ (plus
scss/, context/, assets/, mcp/dist/), so github: installs resolve
@scale-ds/scale-design-system/components/* with no manual build step.
Contributions to the open-source Lit components are welcome — bug fixes, accessibility, performance, and tooling improvements can go straight to a PR. The system's fundamentals (design tokens, component APIs, visual design) are maintainer-led and start as issues, so the Figma and Framer versions stay in lockstep with the code. See CONTRIBUTING.md for the full guide, including the ground rules for forks.
Thanks to everyone who has contributed to Scale:
- @JoPixelPoet — npm/ESM packaging and dev tooling, form-control accessibility, component catalog backfill, package export surface, and the Sass
@usemigration.
MIT