put.io design

Public design tokens, brand assets, and design-system guidance for put.io.

View

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.

Install

Token sources live in tokens. Generated package artifacts live in dist. Package-safe brand assets live in system/assets.

npm install @putdotio/design

Use

Import the generated tokens first. Tier-1 web surfaces also import the component recipes:

@import "@putdotio/design/css";
@import "@putdotio/design/components";

Component recipes should consume semantic aliases such as --field-*, --panel-*, --primary, --success, and --destructive instead of reaching into palette tokens directly.

Package entrypoints:

• CSS custom properties: dist/css/tokens.css
• Tier-1 component recipes: system/components.css
• DTCG token tree: dist/tokens.dtcg.json
• Flat token metadata: dist/tokens.flat.json
• Figma-safe subset: dist/figma/putio.tokens.json
• Brand assets: system/assets via @putdotio/design/assets/<file>
• Design contract: DESIGN.md

Commands

pnpm install
pnpm dev
pnpm verify
pnpm verify:full

Use pnpm tokens:build after token edits.

Docs

• Design contract
• Design guide structure
• Distribution
• Contributing
• Security
• Agent guide

Contributing

See Contributing for local setup, validation, and pull request expectations.

License

MIT