amaca-design
v5.2.0
Published
Amaca, a design system: tokens, components and the contract an AI agent builds from.
Downloads
305
Maintainers
Readme
amaca-design
Amaca is a design system: tokens, components and the contract an AI agent builds from. Version 5.2.0.
Install
npm install amaca-designLoad the tokens first, then the components:
@import "amaca-design/tokens.css";
@import "amaca-design/components.css";Or from a CDN, with no install:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/components.css">What is inside
| File | What it is |
|---|---|
| tokens.css | Every token as a CSS custom property: colour, type, space, radius, shadow, motion |
| components.css | The components, built only from the tokens |
| theme.css | The tokens as a Tailwind v4 @theme |
| tokens.dtcg.json | The tokens in the W3C Design Tokens format |
| DESIGN.md | The contract: every component, its parts, rules, variants and states |
The Satoshi typeface loads from www.amaca.design: its files are licensed by the Indian Type Foundry through Fontshare and are not in this package.
One component at a time
Every component is also a shadcn registry item:
npx shadcn add https://www.amaca.design/r/button.jsonDocumentation and live examples: https://www.amaca.design
