# How to use this brand kit with Claude

Drop these files into a Claude conversation (or attach them as project knowledge) and Claude will generate on-brand carousels, infographics, and thumbnails for you.

## Files to include

1. **colors_and_type.css** - All your color tokens, type scale, and component primitives. This is the source of truth for every visual.
2. **DESIGN_SYSTEM.md** - The rules: what to do, what not to do, layout templates, spacing, radius, shadows. Claude reads this and follows it.
3. **templates/** folder (from the brand kit) - Four reference HTML files. Tell Claude to clone these instead of starting from scratch.

## Quick start

Paste this into Claude along with the files above:

---

I'm Austin Hughes, co-founder of Unify. I need you to create LinkedIn creative using the attached design system.

Rules:
- Clone the closest template from the templates/ folder. Do not start from a blank file.
- Use colors_and_type.css for all tokens. The accent is white (#ffffff), not lavender.
- Dark canvas (#222) is the default. Paper (#fff) is for cheatsheets only.
- PP Neue Montreal is the only font. JetBrains Mono for eyebrows and code. Caveat for rare handwritten annotations.
- No gradients. No icons unless absolutely necessary (use Lucide outline if needed). No emoji.
- Keep it short. Headlines 3-8 words. List items: a title plus one sentence.
- My photo goes in the footer (48px circle) and optionally as a half-frame on thumbnails.

What I need: [describe the carousel/infographic/thumbnail you want]

---

## Template reference

| Template | Size | Use for |
|---|---|---|
| carousel-cover.html | 1080x1350 | Carousel cover slides |
| carousel-numbered.html | 1080x1350 | Numbered play slides |
| cheatsheet-framework.html | 1200x1630 | Numbered framework lists |
| thumbnail-bignumber.html | 1200x1200 | Big-number thumbnails with face |

## Tips

- Always tell Claude the exact dimensions you need
- For carousels, generate all slides in one conversation so the visual language stays consistent
- If Claude adds purple/lavender, tell it to re-read the design system. The accent is white.
- For YouTube thumbnails, the brief already has 5 working HTML thumbnails you can screenshot at 1280x720