Design kits
A design kit is a complete brand system, not a color palette. It carries everything a coding agent needs to build a product that looks designed: tokens, typography, motifs, constraints, and explicit agent instructions.
What a kit contains
| Layer | What it defines |
|---|---|
| Color tokens | 28 semantic roles (background, foreground, primary, card, muted, border, etc.) with light and dark variants |
| Typography | Heading and body font pairing, type scale, heading transform (uppercase, normal, etc.) |
| Layout | Container width, spacing scale, content density |
| Elevation | Shadow definitions for layered surfaces |
| Shapes | Border radius for cards, buttons, inputs, badges |
| Motifs | Distinctive visual patterns that make the design recognizable (gradient accents, geometric overlays, textured backgrounds) |
| Do's and don'ts | Explicit constraints: what to do and what to avoid to keep the design coherent |
| Iconography | Icon style guidance (outlined, filled, duotone, etc.) |
| Imagery | Photography and illustration direction |
| Agent rules | Instructions the coding agent follows when using this kit |
Browsing kits
The kit gallery shows every available kit with live previews. You can filter by:
- Style (minimal, bold, playful, corporate, editorial, etc.)
- Mood (warm, cool, neutral, vibrant, muted)
- Use case (SaaS, portfolio, e-commerce, agency, dashboard)
From the CLI:
npx identityforge@latest kits list
npx identityforge@latest kits search --style minimal --mood warm
From the MCP server, your agent can call search_kits with the same filters.
Free vs Pro kits
69 kits are free. 10 additional kits are Pro-only ($9/month or $149 lifetime). All export formats work on both tiers. Free kits include the full token set, typography, motifs, and agent rules.
Export formats
Every kit exports in six formats:
- CSS variables: drop into any project
- Tailwind config: extends your
tailwind.configwith the kit's design tokens - DESIGN.md: the agent-readable format. A structured markdown document your coding agent consumes to understand the entire visual system
- JSON tokens: raw token data for custom tooling
- Style dictionary: for design systems that use Amazon's style-dictionary
- shadcn/ui registry: one-command install that maps kit tokens to shadcn's CSS variable system
Kit structure in DESIGN.md
The DESIGN.md export is the primary agent-facing format. It has sections for:
# Brand identity
## Color system (light + dark tokens)
## Typography (fonts, scale, heading treatment)
## Layout and spacing
## Elevation and shadows
## Shapes and radii
## Motifs and signature elements
## Do's and don'ts
## Iconography
## Imagery direction
## Agent rules
Your coding agent reads this document and applies it across the entire project. The tokens are explicit values, the motifs are described in enough detail to reproduce, and the do's/don'ts are constraints the agent treats as hard rules.