Sheet 02.26 / Components · Brand

Insert NEW · REV C

A drawing, one line and a destination. The Insert is how a page credits the system it was drawn with. It comes as a plate (a full row) and a credit (one mono line).

CLASSb-insertSINCEREV CDRAWNCLAUDECHECKEDBOLUOLICENSEMIT
Fig. 2 — creditcolophon and figure captions
every page / colophon
© 2026 Boluo · drawn on a hairline grid with Boluo Design ↗Pixel pineapple
article / figure caption
Fig. 3 — tokens flow into componentsFigureKit
Anatomy

Parts and options

PartClassNotes
Plate.b-insertThe whole row is one link. Stacks to one column under 640px.
Drawing.b-insert-figOne pineapple-family drawing, on Boluo’s own sites only. Other sites use the credit line, not the drawings (see BRAND.md).
Line.b-subtitle + pOne sentence of claim, one of detail. No more.
Destination.b-url + .b-moreThe bare domain in mono, then the action.
Credit.b-creditMono, upper case, dotted underline. Optional 14px mark.
<a class="b-insert" href="https://boluo.design">
  <span class="b-insert-fig"><img src="/brand/blueprint.svg" alt="…"></span>
  <span class="b-insert-body">
    <span class="b-caption">Fig. 0 — the mark, drawn to scale</span>
    <span class="b-subtitle">This site is drawn from a system.</span>
    <p>Tokens, 26 components and 13 pineapples …</p>
    <span class="b-insert-foot">
      <span class="b-url">boluo.design</span><span class="b-more">Open the system</span>
    </span>
  </span>
</a>

<a class="b-credit" href="https://boluo.design"><u>Boluo Design</u> ↗</a>
Do
  • Use one plate per site, at the end of the page, where Fig. 0 already sits.
  • Keep the credit line in the colophon on every page.
  • Let the drawing carry it: no yellow fill, no badge, no animation.
Don't
  • Put an Insert above the fold, in the top bar or inside an article body.
  • Write marketing copy: “Beautiful, modern UI kit”.
  • Stack it with other promos. It is a credit, not an ad slot.
© 2026 Boluo · with ClaudePixel pineapple