Sheet 02.07 / Components · Layout

Footer

A drawing in place of a logo, the links and one button, then a colophon with the pixel pineapple. The colophon credits the system with the Insert credit line.

CLASSb-footerDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — footerlive, on a 768 rail

every page / bottom

Anatomy

Parts

Part	Class	Notes
Footer	`.b-footer`	Drawing and links on the left, the button on the right.
Stamp	`.b-stamp`	A 72px drawing in place of a logo.
Socials	`.b-socials`	20px icons in ink.
Colophon	`.b-colophon`	One caption line and the pixel pineapple.

Markup

Code

bundle.css

<div class="b-sheet">
  <div class="b-row">
    <div class="b-rail b-pad b-footer">
      <div class="b-footer-left">
        <img class="b-stamp" src="/brand/rosette.svg" alt="">
        <div class="b-socials">
          <a href="#x" aria-label="X"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
        </div>
      </div>
      <a class="b-btn" href="#x">Follow ↗</a>
    </div>
  </div>
  <div class="b-row">
    <div class="b-rail b-pad b-colophon">
      <span class="b-caption">© 2026 Boluo · with Claude · <a class="b-credit" href="https://boluo.design" style="display:inline"><u>Boluo Design</u> ↗</a></span>
      <img src="/brand/pixel.svg" alt="Pixel pineapple">
    </div>
  </div>
</div>

Keep the colophon line the same on every page.
Let the pixel pineapple link to the source repo, if anywhere.

Don't

Add a sitemap of links to the footer.
Swap the drawing for the mark.