Components

Footer

The only hard cut on the page: after the long grey wash everything flips to black. An isometric logo object, one sentence, one button — and the legal lines in mono underneath.

Default

<footer class="cf-footer" data-theme="inverse">
  <div class="container">
    <div class="cf-footer__cta">
      <img class="cf-footer__mark" src="…/cf-footer-mark.svg" alt="">
      <div>
        <p class="cf-footer__title text-foil">Jetzt Projekt starten!</p>
        <a class="cf-btn cf-btn--primary cf-btn--xwide" href="/kontakt">…</a>
      </div>
    </div>
    <div class="cf-footer__meta">…</div>
  </div>
</footer>
The title carries the page's foil.

.cf-footer__title is set in .text-foil — the cool half of the spectrum, clipped into the letterforms. The footer is the right place for it: it is black, where the foil clears 11.9:1 at its worst sample, and the lime on this screen has already been spent on the button beside it. It is the only light-on-dark foil headline in the system; the shadow half, .text-foil--ink, carries the same material on light surfaces, and the rule is one foil moment per screen rather than per page.

The designer's mockup paints this line solid near-white, so this is a documented deviation rather than a transcription — see the README. It is also exactly what the unenhanced fallback renders, because .cf-footer__title sets no colour of its own and inherits white from data-theme="inverse". A browser that cannot clip a background into text therefore lands on the mockup's own value.

The footer mark

Three isometric planes with the CF symbol on the top one. The planes use exactly the three line types of the shape language — solid, 2-1, 1-4 — and fade downwards. The image says in one graphic what the company does: several layers of data become one answer at the top.

The mark is purely decorative (alt="") — the wordmark sits underneath it in the meta row.

Structure

ZoneContentStyle
CTAmark + sentence + exactly one buttonPublica Sans Bold 32–40 px, the pair centred on the page rather than aligned to the container
Meta — leftwordmarkwhite, no plate
Meta — centrepage links, privacy, imprint, cookie settingsmono 11 px, separated by · (U+00B7, the system's dot everywhere else) at --space-3 on both sides, with empty alt text so it is not announced
Meta — rightcopyright, address, emailmono 11 px, --text-inverse-dim
Imprint and privacy policy are legally required and must be reachable in one click from every page (§ 5 DDG, Art. 13 GDPR). That is why they live in the footer rather than the main navigation — but they are there on every page. Cookie-Einstellungen sits in the same row for the same reason: withdrawing consent has to be as easy as giving it (Art. 7(3) GDPR), so it reopens the settings dialog from wherever the visitor happens to be. It is a <button> dressed as a link, because it opens a dialog rather than navigating — see Consent.

Rules

Do

  • Exactly one CTA. The footer is a closing, not a second menu.
  • Set data-theme="inverse" — contours and the focus ring flip with it.
  • The sentence above the button is a prompt, not a heading.

Don't

  • No four-column sitemap.
  • No newsletter form beside the CTA — one or the other.
  • No social icon gallery; text links are enough.