SCSS - 7-1 architecture

Recommended for teams. Your tokens drive everything - change a custom property and the whole system re-themes.

cd my-design-system
npm install          # sass + utopia-core-scss
npm run build:css    # → dist/my-design-system.min.css
npm run watch:css    # rebuild on save

# Or import into existing SCSS
@use 'my-design-system/main' as *;

Abstracts hold tokens: _colours.scss (HSL + dark), _typography.scss (clamp scales), _spacing.scss, _effects.scss, _fonts.scss. See Tokens and inside the ZIP.

Next: CSS for plain usage · Next.js wiring