https://github.com/putdotio/putio-design
Design system and specs
https://github.com/putdotio/putio-design
design-system frontend product-design prototypes putio
Last synced: about 1 month ago
JSON representation
Design system and specs
- Host: GitHub
- URL: https://github.com/putdotio/putio-design
- Owner: putdotio
- License: mit
- Created: 2026-03-17T23:16:26.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-06-10T14:02:41.000Z (about 2 months ago)
- Last Synced: 2026-06-10T15:24:17.758Z (about 2 months ago)
- Topics: design-system, frontend, product-design, prototypes, putio
- Language: HTML
- Homepage: https://design.put.io
- Size: 436 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
## View
Live guide: [design.put.io](https://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`](tokens). Generated package artifacts live in
[`dist`](dist). Package-safe brand assets live in [`system/assets`](system/assets).
```bash
npm install @putdotio/design
```
## Use
Import the generated CSS when a web surface needs put.io custom properties:
```css
@import "@putdotio/design/css";
```
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`](dist/css/tokens.css)
- DTCG token tree: [`dist/tokens.dtcg.json`](dist/tokens.dtcg.json)
- Flat token metadata: [`dist/tokens.flat.json`](dist/tokens.flat.json)
- Figma-safe subset: [`dist/figma/putio.tokens.json`](dist/figma/putio.tokens.json)
- Brand assets: [`system/assets`](system/assets) via `@putdotio/design/assets/`
- Design contract: [`DESIGN.md`](DESIGN.md)
## Commands
```bash
pnpm install
pnpm dev
pnpm verify
pnpm verify:full
```
Use `pnpm tokens:build` after token edits.
## Docs
- [Design contract](DESIGN.md)
- [Design guide structure](system/README.md)
- [Distribution](docs/DISTRIBUTION.md)
- [Contributing](CONTRIBUTING.md)
- [Security](SECURITY.md)
- [Agent guide](AGENTS.md)
## Contributing
See [Contributing](CONTRIBUTING.md) for local setup, validation, and pull
request expectations.
## License
[MIT](LICENSE)
