Brand guidelines and design tokens for building Tatum-branded UIs with AI tools. No install. No tokens. No setup.
Open PROMPT.md, copy everything below the line, paste it into your AI tool. Done.
Works with: ChatGPT, Claude, Gemini, Cursor, Lovable, Replit, v0, Bolt, Windsurf — anything.
Download just the one file your tool needs into your project root:
| Tool | Command |
|---|---|
| Cursor | curl -O https://raw.githubusercontent.com/tatum-io/tatum-design-system-guidelines/main/.cursorrules |
| Windsurf | curl -O https://raw.githubusercontent.com/tatum-io/tatum-design-system-guidelines/main/.windsurfrules |
| Cline | curl -O https://raw.githubusercontent.com/tatum-io/tatum-design-system-guidelines/main/.clinerules |
| Claude Code | curl -O https://raw.githubusercontent.com/tatum-io/tatum-design-system-guidelines/main/CLAUDE.md |
| GitHub Copilot | mkdir -p .github && curl -o .github/copilot-instructions.md https://raw.githubusercontent.com/tatum-io/tatum-design-system-guidelines/main/.github/copilot-instructions.md |
| Gemini | mkdir -p .gemini && curl -o .gemini/styleguide.md https://raw.githubusercontent.com/tatum-io/tatum-design-system-guidelines/main/.gemini/styleguide.md |
| Any other LLM | Paste contents of PROMPT.md into your system prompt |
Or grab everything at once (no git conflicts — just the files, no .git):
curl -L https://github.com/tatum-io/tatum-design-system-guidelines/archive/main.tar.gz | tar xz --strip-components=1 -C .If you need the actual token values in your codebase:
| Format | File | How to use |
|---|---|---|
| CSS variables | tokens/tokens.css |
<link> or @import it, then use var(--tatum-primary-500) |
| Tailwind | tokens/tailwind.config.js |
Import and spread into your tailwind config |
| JSON | tokens/tokens.json |
Import for any framework or build tool |
| Role | Swatch | Hex | When to use |
|---|---|---|---|
| Primary | #4F37FD |
Buttons, links, active states | |
| Secondary | #1C1E4F |
Headings, dark backgrounds | |
| Accent | #2CCD9A |
Highlights, accents | |
| Error | #F04438 |
Errors, destructive actions | |
| Warning | #F79009 |
Warnings, caution | |
| Success | #17B26A |
Success, confirmations |
Full palette with all shades (25-950): see llms-full.txt
Font: Poppins — always, everywhere, no exceptions.
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">| Use | Size | Weight |
|---|---|---|
| Body | 14-16px | Regular (400) |
| Labels | 12-14px | Medium (500) |
| Buttons | 14-16px | Semibold (600) |
| Headings | 24-72px | Semibold (600) |
Base unit: 4px. Common values: 4 8 12 16 20 24 32 48 64 80 96
8px buttons/inputs | 12px cards/modals | 50% circles
Use outlined-style icons. Recommended free libraries:
- Lucide — lightweight, consistent
- Phosphor — extensive, flexible
- Untitled UI Free — closest match to our design
Default: 24px size, 1.5px stroke.
.cursorrules → Cursor IDE
.clinerules → Cline extension
.windsurfrules → Windsurf IDE
.gemini/styleguide.md → Google Gemini
.github/copilot-instructions.md → GitHub Copilot
CLAUDE.md → Claude Code
PROMPT.md → Copy-paste for any AI tool
llms.txt → Concise AI brand guide
llms-full.txt → Complete token reference
tokens/tokens.css → CSS custom properties
tokens/tokens.json → Machine-readable tokens
tokens/tailwind.config.js → Tailwind CSS config
Open for anyone building with or for Tatum.
