---
name: boluo-design
description: Design pages and components in Boluo Design (boluo.design), the ink-on-paper engineering-sheet system.
---

# Boluo Design

Use this skill when building or reviewing a page drawn in Boluo Design. Read https://boluo.design/llms.txt and https://boluo.design/tokens.json first. Link the stylesheet from https://boluo.design/bundle.css or copy it (MIT).

## The brief

```
You are designing in Boluo Design (https://boluo.design).
Read https://boluo.design/llms.txt, then tokens.json, before you write anything.

The rules:
1. The page is a drawing sheet. Content sits in a 768px rail framed by vertical
   hairlines; full-width hairlines separate rows; a lattice band separates sections.
2. Ink on paper. Use tokens only. `pineapple` is a fill, once per screen, never
   text; yellow-family text uses `rind`.
3. Borders, not shadows. radius-0 on the grid; radius-md only for chart windows.
4. Geist for UI, Geist Mono for numbers, dates and labels. Labels are mono and
   upper case: FIG. 1, 02 / WRITING. Body is sentence case.
5. Real numbers or none. English only, light only, no emoji.
6. Compose from the b-* components. If you need one that doesn't exist,
   say so and draw it from the tokens.
7. The pineapple drawings and the name Boluo are not yours to use.
   Code is MIT; credit docs and figures with a link to boluo.design.

Before you write code, list the components you will use and where each sits.
```

## Components

Every component is a set of `b-*` classes in bundle.css, built only from the tokens. Wrap the page in `.b-sheet`; put content in `.b-row` > `.b-rail.b-pad`.

### Layout
- 02.01 SheetRow (`.b-sheet`, `.b-row`, `.b-rail`, `.b-pad`): The page ground, full-width hairline rows and the centred 768px rail framed by vertical hairlines. Sheet: https://boluo.design/components/sheet-row
- 02.02 Band (`.b-band`): The pineapple-skin lattice between sections. Sheet: https://boluo.design/components/band
- 02.03 TopBar (`.b-topbar`, `.b-brand`, `.b-nav`): The mark, the handwritten name and the nav. Sheet: https://boluo.design/components/top-bar
- 02.04 PageHead (`.b-page-head`, `.b-figure-art`): Page header for index pages: caption, display title, one paragraph, a page figure. Sheet: https://boluo.design/components/page-head
- 02.05 SectionHead (`.b-section-head`, `.b-count`): A sheet label, a title with a count and an optional more link. Sheet: https://boluo.design/components/section-head
- 02.06 TitleBlock (`.b-titleblock`): The engineering-drawing stamp in a corner. Sheet: https://boluo.design/components/title-block
- 02.07 Footer (`.b-footer`, `.b-stamp`, `.b-socials`, `.b-colophon`): A drawing in place of a logo, the links and one button, then a colophon with the pixel pineapple. Sheet: https://boluo.design/components/footer

### Content
- 02.08 Identity (`.b-identity`, `.b-avatar`, `.b-who`, `.b-seal`, `.b-role`, `.b-caret`): Portrait cell, name and role line. Sheet: https://boluo.design/components/identity
- 02.09 Facts (`.b-facts`, `.b-fact`): Icon and label list in two columns. Sheet: https://boluo.design/components/facts
- 02.10 Tracks (`.b-tracks`, `.b-track`): Three columns, each with its own drawing. Sheet: https://boluo.design/components/tracks
- 02.11 NowPanel (`.b-now`, `.b-live`): What is happening now, with wedge bullets and a live dot. Sheet: https://boluo.design/components/now-panel
- 02.12 ArticleRow (`.b-list`, `.b-article-row`, `.b-read`): Date, title and summary in a hairline list. Sheet: https://boluo.design/components/article-row
- 02.13 ArticleHeader (`.b-crumbs`, `.b-article-title`, `.b-byline`, `.b-toc`): Breadcrumbs, serif title, byline and contents. Sheet: https://boluo.design/components/article-header
- 02.14 Prose (`.b-prose`): Article body: serif H2s, dotted links, the diamond blockquote. Sheet: https://boluo.design/components/prose
- 02.15 EndMark (`.b-endmark`): The mark that closes an article. Sheet: https://boluo.design/components/end-mark
- 02.16 EmptyState (`.b-ways`): The 404 page's ways out. Sheet: https://boluo.design/components/empty-state

### Figures
- 02.17 Figure (`.b-fig`, `.b-fig-frame`, `.b-fig-bar`, `.b-fig-body`, `.b-fig-cap`, `.b-figcap`): A drawing on its own sheet: hairline frame, registration ticks, a mono bar, the caption below. Sheet: https://boluo.design/components/figure
- 02.18 FigureKit (`.f-*`): Drawing primitives inside a figure's SVG: nodes, arrows, curves, hatching, one pineapple fill. Sheet: https://boluo.design/components/figure-kit

### Data
- 02.19 CurveWindow (`.b-window`, `.b-window-bar`, `.b-window-body`, `.b-curve`, `.b-baseline`, `.b-point`): The only framed object: a chart window with a curve and its last point. Sheet: https://boluo.design/components/curve-window
- 02.20 Heatmap (`.b-heat`, `.b-tabs`, `.b-heat-foot`, `.b-heat-legend`): A year of days as lattice diamonds; the best day is the one pineapple cell. Sheet: https://boluo.design/components/heatmap
- 02.21 Status (`.b-status`): Live or offline, as a dot and a mono label. Sheet: https://boluo.design/components/status

### Controls
- 02.22 Button (`.b-btn`): Square, outlined, inverts on hover. Sheet: https://boluo.design/components/button
- 02.23 Link (`.b-link`, `.b-more`): Dotted underline in ink; the more link with an arrow. Sheet: https://boluo.design/components/link
- 02.24 Tag (`.b-tag`): A small mono label in a hairline box. Sheet: https://boluo.design/components/tag
- 02.25 Loader (`.b-loader`): The ring turns. Sheet: https://boluo.design/components/loader

### Brand
- 02.26 Insert (`.b-insert`, `.b-credit`, `.b-url`): The credit that points to boluo.design: a plate and a credit line. Sheet: https://boluo.design/components/insert

## Do

- Use tokens only: `paper` ground, `ink` headings and links, `text` body, `text-muted` captions and metadata, `line` for every hairline.
- Use `pineapple` as a fill once per screen (the mark, a curve's last point, a live dot). Yellow-family text uses `rind`.
- Separate rows with full-width hairlines and sections with a `.b-band`.
- Set labels in Geist Mono, upper case: `FIG. 1`, `02 / WRITING`. Number figures and label sections like sheets.
- Show real numbers, or say a chart is illustrative.
- Credit with the Insert: one plate at the end of the home page, the credit line in the colophon on every page.
- In title blocks, credit the work: DRAWN: CLAUDE, CHECKED: BOLUO (APPROVED: BOLUO where there is room).

## Don't

- No shadows, no gradients, no radius on the grid (`radius-md` only for chart windows and code blocks).
- No text in `pineapple`; no `text-faint` for text.
- No dark mode, no emoji, no languages other than English.
- No Insert above the fold, in the top bar or inside article prose; no yellow, badge or animation on it.
- No marketing copy ("Beautiful, modern UI kit"). Voice is first person, plain, a little dry.
- Do not use the pineapple drawings or the name Boluo in your own work: all rights reserved. Draw your own mark from the tokens.
- Do not invent a component silently: say it does not exist, then draw it from the tokens.

## License

Code is MIT. Docs, FigureKit and figures are CC BY-NC 4.0 with a credit link to https://boluo.design. The drawings and the name are all rights reserved. Details: https://boluo.design/license