Sheet 02 / Components
Components26
Every component is a set of b-* classes in bundle.css, built only from the tokens. Each row names the classes; open a component for its sheet: a live preview, the parts, the markup and the rules.
SHEET02DRAWNCLAUDECHECKEDBOLUOLICENSEMIT
Layout
Layout7
| No. | Component | Classes | Notes |
|---|---|---|---|
| 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. |
| 02.02 | Band | .b-band | The pineapple-skin lattice between sections. |
| 02.03 | TopBar | .b-topbar .b-brand .b-nav | The mark, the handwritten name and the nav. |
| 02.04 | PageHead | .b-page-head .b-figure-art | Page header for index pages: caption, display title, one paragraph, a page figure. |
| 02.05 | SectionHead | .b-section-head .b-count | A sheet label, a title with a count and an optional more link. |
| 02.06 | TitleBlock | .b-titleblock | The engineering-drawing stamp in a corner. |
| 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. |
Content
Content9
| No. | Component | Classes | Notes |
|---|---|---|---|
| 02.08 | Identity | .b-identity .b-avatar .b-who .b-seal .b-role .b-caret | Portrait cell, name and role line. |
| 02.09 | Facts | .b-facts .b-fact | Icon and label list in two columns. |
| 02.10 | Tracks | .b-tracks .b-track | Three columns, each with its own drawing. |
| 02.11 | NowPanel | .b-now .b-live | What is happening now, with wedge bullets and a live dot. |
| 02.12 | ArticleRow | .b-list .b-article-row .b-read | Date, title and summary in a hairline list. |
| 02.13 | ArticleHeader | .b-crumbs .b-article-title .b-byline .b-toc | Breadcrumbs, serif title, byline and contents. |
| 02.14 | Prose | .b-prose | Article body: serif H2s, dotted links, the diamond blockquote. |
| 02.15 | EndMark | .b-endmark | The mark that closes an article. |
| 02.16 | EmptyState | .b-ways | The 404 page's ways out. |
Figures
Figures2
| No. | Component | Classes | Notes |
|---|---|---|---|
| 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. |
| 02.18 | FigureKit | .f-* | Drawing primitives inside a figure's SVG: nodes, arrows, curves, hatching, one pineapple fill. |
Data
Data3
| No. | Component | Classes | Notes |
|---|---|---|---|
| 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. |
| 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. |
| 02.21 | Status | .b-status | Live or offline, as a dot and a mono label. |
Controls
Controls4
Brand
Brand1
| No. | Component | Classes | Notes |
|---|---|---|---|
| 02.26 | Insert | .b-insert .b-credit .b-url | The credit that points to boluo.design: a plate and a credit line. |
© 2026 Boluo · with Claude