# ProductLed brand kit

> ProductLed helps SaaS companies build products that sell themselves. This is the
> public brand kit: logos, color, type, motion, voice, and the design system the site
> runs on. Free to use, no attribution required.

Everything here is written for machines as well as people. If you are an agent building
something ProductLed branded, read productled-design-system.md and you will have the
whole system without needing a screenshot.

## Read in this order

- [The design system, in words](https://cdn.prod.website-files.com/6357526c0b897b08f455b7db/6aad8b6e9da80fa1385b0eef_productled-design-system.md): The complete system. Voice, color, type, spacing, motion, iconography. Start here.
- [brand.json](https://cdn.prod.website-files.com/6357526c0b897b08f455b7db/6aad8f93ba78bac1e2f39b99_brand.json): The same system as structured data. Tokens, naming rules, approved boilerplate, contrast ratios.
- [The brand kit page](https://productled.com/brand): The human version, with specimens.

## Code

- [Color tokens](https://cdn.prod.website-files.com/6357526c0b897b08f455b7db/6aad8f7ef4bf5e08d556b0e9_productled-tokens-colors.css): Every color value the system allows, as CSS custom properties.
- [The logo climb](https://cdn.prod.website-files.com/6357526c0b897b08f455b7db/6aad8b6e2631c2d98f85408d_ascent-logo.css): The hover animation on the logo. Drop-in, no dependencies.

## The rules that matter most

- The name is always ProductLed. Capital P, capital L, one word, no space, no hyphen.
- Yellow is #F3CA07 and it is rationed. One accent per viewport. Never a page fill, never a resting button.
- Text on yellow is always #08090A. Never white.
- Primary buttons are white (#F7F8F8) with #08090A text, and flip to yellow on hover. Never a pill.
- Geist for everything, Geist Mono for labels and numbers. Display never exceeds weight 500.
- Text is #F7F8F8 or #8A8F98. The darker greys (#62666D and below) never carry a label or body copy.
- No em dashes, no emoji, no superlatives. Sentence case everywhere.
- The mark is the Market Ascent pyramid. Its summit is always yellow. Never rotate, recolor, stretch or crop it.

## Contact

- Brand questions: hello@productled.com