# Boluo Design

> A design system drawn like an engineering sheet. Tokens, components and a family of pineapple drawings for pages drawn like engineering sheets. Ink on paper, hairlines instead of shadows, and one spot of yellow per screen.

Boluo Design is a design system drawn like an engineering sheet, published at https://boluo.design. Boluo means pineapple in Chinese, which is why the mark is a pineapple. It has 42 tokens, 26 components (`b-*` CSS classes) and 13 pineapple drawings. English only, light only, no emoji. Current revision: C (2026.10).

## Pages

- [Home](https://boluo.design/): tokens, components, the pineapple family, revisions, license summary
- [Components](https://boluo.design/components): every component with its classes; each has its own sheet (preview, parts, markup, rules), linked in the index below
- [Insert](https://boluo.design/components/insert): the credit plate and credit line that point back to boluo.design
- [For agents](https://boluo.design/agents): the agent prompt, files, and how the work is credited
- [License](https://boluo.design/license): the three license layers

## Files

- [tokens.json](https://boluo.design/tokens.json): every token as {name, value, usage}
- [tokens.css](https://boluo.design/tokens.css): the tokens as CSS custom properties
- [bundle.css](https://boluo.design/bundle.css): tokens plus all 26 components
- [SKILL.md](https://boluo.design/skill/SKILL.md): a Claude Code skill (boluo-design) with the rules, component index and do/don'ts

## License

- Code (tokens.json, tokens.css, bundle.css, snippets): MIT
- Docs, FigureKit and figures: CC BY-NC 4.0, credit with a link to https://boluo.design
- The pineapple drawings and the name Boluo: all rights reserved

© 2026 Boluo · with Claude