Boluo/ design
Sheet 02.18 / Components · Figures

FigureKit

The drawing vocabulary for figures. Every SVG uses these classes and nothing else, on a 640-unit viewBox with an 8-unit grid. Ink on paper, one pineapple per figure, and risk is hatched, never red.

CLASSf-*DRAWNCLAUDECHECKEDBOLUOLICENSEMIT
Fig. 1 — figurekitlive, from bundle.css
figure / kit
Kitf-* classes
NODES f-na step, an actor f-n-softa quiet step f-n-palea group, a gain f-n-keythe one answer RISK, LOSS, ZONE risk strip f-neg −2.28% f-zone backdrop LINES f-a flow f-a-soft aside f-c f-base zero f-c2 2nd series MARKS AND TEXT f-k key f-k-off 01f-tag f-t titlef-d noteF-L LABELf-v 9.43%
Anatomy

Parts

PartClassNotes
Nodes.f-n .f-n-soft .f-n-pale .f-n-keyWhite boxes with a 1.2 ink outline; f-n-key is the one pineapple.
Risk.f-risk .f-bar-neg .f-negHatched strips and bars; negative numbers in rind with a true minus.
Lines.f-a .f-a-soft .f-c .f-c2 .f-base .f-gridArrows with open heads; graphite curves; dashed zero line.
Marks.f-k .f-k-off .f-tagDiamonds for points on a timeline; black squares 01… for ordered parts.
Text.f-t .f-d .f-l .f-vTitle, note, mono label, mono number.
Markup

Code

bundle.css
<figure class="b-fig" style="margin:0;max-width:640px">
  <div class="b-fig-frame">
    <div class="b-fig-bar"><span class="b-caption">Kit</span><span class="b-caption">f-* classes</span></div>
    <div class="b-fig-body">
      <svg viewBox="0 0 640 300" role="img" aria-label="The figure drawing kit">
    <defs>
      <pattern id="f-hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line class="f-hatch-line" x1="0" y1="0" x2="0" y2="6"/></pattern>
      <marker id="f-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path class="f-head" d="M1 1.5L9 5L1 8.5"/></marker>
      <marker id="f-arrow-soft" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" markerUnits="userSpaceOnUse" orient="auto-start-reverse"><path class="f-head-soft" d="M1 1.5L9 5L1 8.5"/></marker>
    </defs>
        <text class="f-l" x="20" y="20">NODES</text>
        <rect class="f-n" x="20" y="30" width="130" height="44"/><text class="f-t" x="32" y="50">f-n</text><text class="f-d" x="32" y="66">a step, an actor</text>
        <rect class="f-n-soft" x="165" y="30" width="130" height="44"/><text class="f-t" x="177" y="50">f-n-soft</text><text class="f-d" x="177" y="66">a quiet step</text>
        <rect class="f-n-pale" x="310" y="30" width="130" height="44"/><text class="f-t" x="322" y="50">f-n-pale</text><text class="f-d" x="322" y="66">a group, a gain</text>
        <rect class="f-n-key" x="455" y="30" width="130" height="44"/><text class="f-t" x="467" y="50">f-n-key</text><text class="f-d" x="467" y="66" style="fill:var(--ink)">the one answer</text>
        <text class="f-l" x="20" y="104">RISK, LOSS, ZONE</text>
        <rect class="f-n" x="20" y="114" width="130" height="36"/><rect class="f-risk" x="20" y="114" width="10" height="36"/><text x="40" y="137">risk strip</text>
        <rect class="f-bar-neg" x="165" y="114" width="130" height="36"/><text class="f-v f-neg" x="310" y="137">f-neg −2.28%</text>
        <rect class="f-zone" x="455" y="114" width="130" height="36"/><text class="f-d" x="467" y="137">f-zone backdrop</text>
        <text class="f-l" x="20" y="182">LINES</text>
        <path class="f-a" d="M20 200H120"/><text class="f-d" x="130" y="204">f-a flow</text>
        <path class="f-a-soft" d="M220 200H320"/><text class="f-d" x="330" y="204">f-a-soft aside</text>
        <path class="f-c" d="M440 210L480 190L520 200L560 184"/><text class="f-d" x="570" y="204">f-c</text>
        <line class="f-base" x1="20" y1="230" x2="120" y2="230"/><text class="f-d" x="130" y="234">f-base zero</text>
        <path class="f-c2" d="M220 230H320"/><text class="f-d" x="330" y="234">f-c2 2nd series</text>
        <text class="f-l" x="20" y="262">MARKS AND TEXT</text>
        <polygon class="f-k" points="20,282 27,275 34,282 27,289"/><text class="f-d" x="40" y="286">f-k key</text>
        <polygon class="f-k-off" points="110,282 117,275 124,282 117,289"/><text class="f-d" x="130" y="286">f-k-off</text>
        <rect class="f-tag" x="200" y="273" width="26" height="18"/><text class="f-tag-t" x="213" y="286" text-anchor="middle">01</text><text class="f-d" x="234" y="286">f-tag</text>
        <text class="f-t" x="300" y="286">f-t title</text><text class="f-d" x="370" y="286">f-d note</text><text class="f-l" x="430" y="286">F-L LABEL</text><text class="f-v" x="520" y="286">f-v 9.43%</text>
      </svg>
    </div>
  </div>
</figure>
Do
  • Start every file with the same defs: the f-hatch pattern and the two arrow markers.
  • Pick a figure type first: flow, A/B, stack, timeline, line, bar, loop, hub or range.
Don't
  • Colour-code nodes; meaning comes from position and labels.
  • Draw more than two series on a chart.
© 2026 Boluo · with ClaudePixel pineapple