Boluo/ design
Sheet 00 / Index

A design system drawn like an engineering sheet.

The tokens, components and fifteen pineapples behind boluo.im. Ink on paper, hairlines instead of shadows, and one spot of yellow per screen.

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

Colour, type, space42

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 tokens27

All components
Follow @boluoim ↗
Button02.23
SHEET01 / HOMEDRAWNBOLUOREV2026.10
TitleBlock02.06
Apr 2026How Crypto Funding Rates Actually Work8 min read
ArticleRow02.12
LiveOffline
Status02.22
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, fifteen drawings15

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.svgWriting
A canned pineapple ring
ring.svgThe loader
A pineapple ring with a bite out
slice.svgThe 404 page
A pineapple chunk
wedge.svgNow bullets
Pineapple candlesticks
candles.svgTrading
Pixel pineapple
pixel.svgBuilding, footer
A dimensioned drawing of the pineapple mark
blueprint.svgFig. 0 of every sheet
The verified seal
seal.svgBeside the name
Boluo stamp
stamp.svgFooter, X cards
The pineapple-skin lattice tile
lattice-tile.svgThe bands
04 / Revisions

Revision block

RevDateChange
C2026-10-17Insert. A plate and a credit line that point back here. First used on boluo.im.
B2026-10-17Figure and FigureKit. Numbered frames and an illustration kit for article diagrams: nine figure types.
A2026-10-17First issue. Tokens, components, fifteen pineapples, the boluo.im page set.
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 fifteen drawings, the avatar and the name Boluo. Shown here as reference, not for reuse. Ask first.