Boluo/ design
Sheet 00 / Index

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 /bō·luó/ n. Pineapple, in Chinese. Hence the mark, the one spot of yellow and the 13 drawings.

Browse components →Download tokens.json
26 components · 13 drawings · 4 typefaces · light only
A dimensioned drawing of the pineapple mark
Fig. 0 — the mark, drawn to scale
SHEET00 / INDEXDRAWNCLAUDECHECKEDBOLUOREVE · 2026.10LICENSESEE 05
01 / Tokens

Colour, type, space51

All tokens
paper#fcfcfd
surface#ffffff
ink#09090b
text#52525b
text-muted#6b6b73
linezinc 9%
pineapple#f5b800 · fill only
rind#8a5300
UI · GeistAaDisplay 48/500 · Body 15/1.65
Data · Geist Mono+5.89Numbers, dates, labels
Articles · HedvigAgTitles and H2 only
Signature · CaveatBoluoThe top-bar name, nowhere else
02 / Components

Built from the tokens26

All components
Open the sheet ↗
Button02.22
SHEET01 / HOMEDRAWNBOLUOREV2026.10
TitleBlock02.06
Apr 2026Hairlines Instead of Shadows8 min read
ArticleRow02.12
LiveOffline
Status02.21
Heatmap02.20
FIG. 1
CurveWindow02.19
03 / WritingWriting11
SectionHead02.05
Fig. DDrawn with Boluo Designboluo.design →
InsertNEW · REV C
03 / The pineapple family

One grammar, 13 drawings13

48 grid · 2.4 outline · 1.6 lattice at 45°
The pineapple mark
mark.svgTop bar, favicon, share cards
The pineapple mark for ink grounds
mark-dark.svgInk grounds: X banner
The single-ink pineapple mark
mark-mono.svgPrint, watermarks
The pineapple crown
crown.svgX thread sign-off
The crown seen from above
rosette.svgArticle ornament
A pineapple cut lengthwise
half.svgSection cuts, index pages
A canned pineapple ring
ring.svgThe loader
A pineapple ring with a bite out
slice.svgThe 404 page
A pineapple chunk
wedge.svgNow bullets
Pixel pineapple
pixel.svgThe colophon
A dimensioned drawing of the pineapple mark
blueprint.svgFig. 0 of every sheet
The verified seal
seal.svgBeside the name
The pineapple-skin lattice tile
lattice-tile.svgThe bands
04 / Revisions

Revision block

RevDateChange
E2026-10-17Code. Boluo Light, a code theme for HTML, CSS, JS, TS and JSX: seven roles, seven code tokens, an editor theme and a stylesheet for Prism and highlight.js. Every code block on the site uses it.
D2026-10-17Principles. Seven rules with their reasons, a computed contrast table, the places yellow may go, a tolerance check on spacing and colour, one focus ring for every control.
C2026-10-17Insert. A plate and a credit line that point back here.
B2026-10-17Figure and FigureKit. Numbered frames and an illustration kit for article diagrams: nine figure types.
A2026-10-17First issue. Tokens, components, the pineapple family and the first set of sheets.
05 / License

Three layers, three licenses

Full text
Layer 1 / CodeMIT

tokens.json, tokens.css, bundle.css and the snippets. Copy them into anything, keep the notice.

Layer 2 / Docs and figuresCC BY-NC 4.0

These pages, the FigureKit and the diagrams. Remix for personal and non-commercial work, with a credit link to boluo.design.

Layer 3 / The pineapplesAll rights reserved

The 13 drawings and the name Boluo. Shown here as reference, not for reuse. Ask first.