Footer · the other 95 percent of sites

A footer you can build in one file

The canal scene above is for conduction.nl. It needs a canvas, two scripts and a set of SVG templates, and it exists because the company site can afford a signature moment. Every other surface, an app, a docs site, a client portal, a print-adjacent page, needs a footer that is just a footer.

This is that footer. No JavaScript, no images, no canvas. Every colour reads from a published token, so it inherits the brand without hardcoding a single hex, and it follows a theme change on its own.

Rendered

The tokens it reads

Four tokens carry the whole thing. Point them somewhere else and the footer follows, including into dark mode, where they are already mapped.

--conduction-color-footer-background   the ground
--conduction-color-footer-title        column headings
--conduction-color-footer-link         link labels and the wordmark
--conduction-color-footer-text         body copy and the legal bar

Markup

One <footer>, a grid of columns, a legal bar. Add or drop columns freely; the grid reflows.

<footer class="plain-footer">
  <div class="inner">
    <div>
      <p class="wm">Conduction</p>
      <p class="blurb">Open source software voor de publieke sector.</p>
    </div>
    <div>
      <h4>Apps</h4>
      <ul><li><a href="/apps/opencatalogi">OpenCatalogi</a></li></ul>
    </div>
    <!-- more columns -->
  </div>
  <div class="legal">
    <span>Conduction B.V. &middot; KvK 76741850 &middot; &copy; 2026</span>
    <span><a href="/privacy">Privacy</a></span>
  </div>
</footer>

Styles

Import tokens.css first, then this. Nothing else is needed.

.plain-footer {
  background: var(--conduction-color-footer-background);
  color: var(--conduction-color-footer-text);
  font-family: var(--conduction-typography-font-family-body);
  padding: var(--space-12) var(--space-16) var(--space-8);
}
.plain-footer .inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-10);
}
.plain-footer h4 {
  font-family: var(--conduction-typography-font-family-code);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--conduction-color-footer-title); font-weight: 500;
}
.plain-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.plain-footer ul a { color: var(--conduction-color-footer-link); text-decoration: none; font-size: 14px; }
.plain-footer ul a:hover { color: var(--c-orange-knvb); }
.plain-footer .legal {
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; flex-wrap: wrap;
}

@media (max-width: 860px) {
  .plain-footer .inner { grid-template-columns: 1fr 1fr; }
}

Rules that travel with it

Column headings are nouns, not sentences. Four columns at most, or the grid stops being scannable. The legal bar carries the entity name, KvK number and the year, because that is a legal requirement rather than a design choice. Orange is the hover colour and nothing else: one accent per component still applies, and here the accent is spent on hover.