Live guide: design.put.io
This repo owns the public contract behind it: DTCG token sources, generated CSS/JSON/TypeScript artifacts, brand assets, preview cards, and deployable static guidance.
npm install @putdotio/designToken sources live in tokens, generated artifacts in
dist, and package-safe brand assets in
system/assets.
Import the generated tokens first. Tier-1 web surfaces also import the component recipes:
@import "@putdotio/design/css";
@import "@putdotio/design/components";Component recipes consume semantic aliases such as --field-*, --panel-*,
--primary, --success, and --destructive, not palette tokens.
Package entrypoints, from exports in package.json:
| Subpath | File |
|---|---|
@putdotio/design/css |
dist/css/tokens.css |
@putdotio/design/components |
system/components.css |
@putdotio/design/tokens |
dist/tokens.flat.json |
@putdotio/design/tokens/meta |
dist/tokens.js, typed by dist/tokens.d.ts |
@putdotio/design/tokens/dtcg |
dist/tokens.dtcg.json |
@putdotio/design/tokens/figma |
dist/figma/putio.tokens.json |
@putdotio/design/assets/<file> |
system/assets |
@putdotio/design/design.md |
DESIGN.md |