put.io design

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

View

Live guide: design.put.io

Install

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 consume semantic aliases such as --field-*, --panel-*, --primary, --success, and --destructive, not palette tokens.

Tailwind v4 apps add the theme after Tailwind and the tokens. layer(base) keeps the token file's element styles below utilities:

@import "tailwindcss";
@import "@putdotio/design/css" layer(base);
@import "@putdotio/design/tailwind";

Utilities then read the tokens: bg-bg is var(--bg), rounded-sm is var(--radius-sm), text-lg is var(--fs-lg). Theme rules: Tailwind v4 theme.

Every entrypoint is listed under exports in package.json.

Docs

• Design contract
• Design guide
• Contributing
• Security
• Agent guide

License

MIT