A design system built on Base UI with direct Figma-to-code styling.
- Base UI handles behavior, accessibility, and keyboard navigation
- Figma Dev Mode provides tokenized CSS (copy directly)
- Minimal transformation = minimal drift
npm install --legacy-peer-deps
npm run devsrc/
├── components/ # React components
│ └── Icon/ # CentralIcon system
├── tokens/ # Generated SCSS variables
└── app/ # Next.js app
tools/
├── base-ui-lint/ # Figma structure validation plugin
└── figma-styles/ # Internal Figma style sync (requires credentials)
tokens/
└── figma/ # Raw Figma token exports
├── origin/ # Origin tokens
└── baseline/ # Baseline tokens
- Design in Figma with Base UI-compatible frame structure
- Validate with the Base UI Lint Plugin
- Copy CSS from Figma Dev Mode
- Implement with Base UI + SCSS modules
cd tools/base-ui-lint
npm run buildImport in Figma → Plugins → Development → manifest.json
Validates component structure against Base UI's expected anatomy.
import{CentralIcon}from'@/components/Icon';<CentralIconname="IconHome"size={24}/>213 vendored icons from Central Icons. Edit scripts/extract-icons.mjs to add icons, then run npm run icons:extract.
Color and spacing tokens are built from exported Figma variables (npm run tokens:build). Typography mixins (_text-styles.scss) and shadow variables (_effects.scss) are generated from an internal Figma file and committed to the repo — external contributors don't need to regenerate them. Don't edit these generated files by hand.
| Command | Description |
|---|---|
npm run dev | Start development server |
npm run build | Production build |
npm run storybook | Start Storybook |
npm run tokens:build | Build tokens from Figma exports |
npm run icons:extract | Vendor icons and regenerate registry |
npm run test | Playwright component tests |
npm run test:unit | Vitest unit tests |
npm run test:all | Run both test suites |
npm run lint | Run ESLint |
Internal maintainers with Figma credentials also have figma:styles and figma:node for syncing styles from the design file.
npm install @lightsparkdev/origin sassOr for local development:
{ "dependencies": { "@lightsparkdev/origin": "file:../origin" } }// next.config.tsimporttype{NextConfig}from"next";constnextConfig: NextConfig={transpilePackages: ['@lightsparkdev/origin'],};exportdefaultnextConfig;import"@lightsparkdev/origin/styles.css";cp -r node_modules/@lightsparkdev/origin/public/fonts/ public/fonts/import{Button,Input,Field}from'@lightsparkdev/origin';If you need Origin mixins in your app SCSS files, configure Sass package imports:
// next.config.tsimporttype{NextConfig}from"next";import*assassfrom"sass";constnextConfig: NextConfig={transpilePackages: ['@lightsparkdev/origin'],sassOptions: {importers: [newsass.NodePackageImporter()],},};exportdefaultnextConfig;Then use pkg: imports:
@use'pkg:@lightsparkdev/origin/tokens/text-styles'as*;For full setup details, see Using Origin in Your App.
Suisse Intl uses font metric overrides for precise line-height control:
@font-face {
font-family: 'Suisse Intl';
ascent-override: 81%;
descent-override: 19%;
line-gap-override: 0%;
}These values are applied to all weights (Regular, Book, Medium) in _fonts.scss. Consuming apps should import Origin's fonts for correct input rendering. Without the font, the system falls back to system-ui.
docs/using-origin-in-your-app.md— Token/font setup for consuming appsCONTEXT.md— Full project context and history.cursor/rules/— Auto-injected context for AI assistants