Open demo

CSS code

HTML 
<footer class="fdk">
  <div class="inner">
    <div class="top">
      <div class="brand">
        <p class="logo"><span aria-hidden="true">▲</span> Meridian</p>
        <p>The analytics platform your finance team and your engineers both actually like.</p>
        <a class="status" href="#">All systems operational</a>
      </div>
      <div class="grp">
        <nav aria-labelledby="fdk-product"><h2 id="fdk-product">Product</h2>
          <ul><li><a href="#">Overview</a></li><li><a href="#">Integrations</a></li><li><a href="#">Pricing</a></li></ul></nav>
        <nav aria-labelledby="fdk-dev"><h2 id="fdk-dev">Developers</h2>
          <ul><li><a href="#">Documentation</a></li><li><a href="#">API reference</a></li><li><a href="#">Open source</a></li></ul></nav>
        <nav aria-labelledby="fdk-company"><h2 id="fdk-company">Company</h2>
          <ul><li><a href="#">About</a></li><li><a href="#">Customers</a></li><li><a href="#">Careers</a></li></ul></nav>
      </div>
    </div>
    <div class="base">
      <p>© Meridian Systems Inc.</p>
      <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Security</a></li><li><a href="#">Cookies</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
/* Dark SaaS footer: brand, a status link with a glowing dot, three link groups and a legal row. */
.fdk{--fdk-bg:#0d1117;--fdk-text:#e7ebf4;--fdk-link:#9aa6c0;--fdk-muted:#737f99;--fdk-soft:#77839c;--fdk-line:#1d2635;--fdk-ok:#3fd68f;
  background:var(--fdk-bg);color:var(--fdk-text);padding:48px 32px 26px;line-height:normal}
.fdk,.fdk *{box-sizing:border-box}
.fdk h2,.fdk p,.fdk ul{margin:0;padding:0}
.fdk ul{list-style:none}
.fdk a{text-decoration:none;border-radius:4px}
.fdk a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fdk .inner{max-width:1000px;margin:0 auto}
.fdk .top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding-bottom:34px;border-bottom:1px solid var(--fdk-line)}
.fdk .brand{max-width:300px}
.fdk .logo{font-size:1.1rem;font-weight:700}
.fdk .brand .logo~p{font-size:.85rem;color:var(--fdk-soft);line-height:1.65;margin-top:10px}
.fdk .status{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 13px;font-size:.78rem;font-weight:700;color:var(--fdk-ok);
  background:#0d2b1e;border:1px solid #17452f;border-radius:999px}
.fdk .status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fdk-ok);box-shadow:0 0 8px var(--fdk-ok)}
.fdk .status:focus-visible{outline-color:var(--fdk-ok)}
.fdk .grp{display:flex;flex-wrap:wrap;gap:30px 56px}
.fdk h2{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fdk-muted);margin-bottom:13px}
.fdk .grp a{display:block;padding:4px 0;font-size:.86rem;color:var(--fdk-link)}
.fdk .grp a:hover,.fdk .base a:hover{color:#fff}
.fdk .base{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:22px;font-size:.78rem;color:var(--fdk-muted)}
.fdk .base ul{display:flex;flex-wrap:wrap;gap:8px 18px}
.fdk .base a{color:var(--fdk-soft)}
@media (max-width:639.98px){.fdk{padding:40px 20px 24px}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fdk">
  <div class="inner">
    <div class="top">
      <div class="row justify-content-between">
        <div class="brand col-12 col-md-auto">
          <p class="logo"><span aria-hidden="true">▲</span> Meridian</p>
          <p>The analytics platform your finance team and your engineers both actually like.</p>
          <a class="status badge" href="#">All systems operational</a>
        </div>
        <div class="grp col-12 col-md-auto d-flex flex-wrap">
          <nav aria-labelledby="fdk-product"><h2 id="fdk-product">Product</h2>
            <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Overview</a></li><li class="nav-item"><a class="nav-link" href="#">Integrations</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li></ul></nav>
          <nav aria-labelledby="fdk-dev"><h2 id="fdk-dev">Developers</h2>
            <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Documentation</a></li><li class="nav-item"><a class="nav-link" href="#">API reference</a></li><li class="nav-item"><a class="nav-link" href="#">Open source</a></li></ul></nav>
          <nav aria-labelledby="fdk-company"><h2 id="fdk-company">Company</h2>
            <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Customers</a></li><li class="nav-item"><a class="nav-link" href="#">Careers</a></li></ul></nav>
        </div>
      </div>
    </div>
    <div class="base d-flex flex-wrap align-items-center justify-content-between">
      <p class="mb-0">© Meridian Systems Inc.</p>
      <nav aria-label="Legal"><ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li><li class="nav-item"><a class="nav-link" href="#">Terms</a></li><li class="nav-item"><a class="nav-link" href="#">Security</a></li><li class="nav-item"><a class="nav-link" href="#">Cookies</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
/* Bootstrap .row with auto-width columns, .nav.flex-column links and a .badge-style status pill. */
.fdk{--fdk-bg:#0d1117;--fdk-text:#e7ebf4;--fdk-link:#9aa6c0;--fdk-muted:#737f99;--fdk-soft:#77839c;--fdk-line:#1d2635;--fdk-ok:#3fd68f;
  background:var(--fdk-bg);color:var(--fdk-text);padding:48px 32px 26px;line-height:normal}
.fdk .inner{max-width:1000px;margin:0 auto}
.fdk .top{padding-bottom:34px;border-bottom:1px solid var(--fdk-line)}
.fdk .top>.row{--bs-gutter-x:30px;--bs-gutter-y:30px}
.fdk .grp{gap:30px 56px}
.fdk .brand{max-width:330px} /* 300px of text plus the column gutter */
.fdk .logo{font-size:1.1rem;font-weight:700;margin:0}
.fdk .brand p:not(.logo){font-size:.85rem;color:var(--fdk-soft);line-height:1.65;margin:10px 0 0}
.fdk .status{--bs-badge-padding-x:13px;--bs-badge-padding-y:6px;--bs-badge-font-size:.78rem;--bs-badge-font-weight:700;--bs-badge-color:var(--fdk-ok);--bs-badge-border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:#0d2b1e;border:1px solid #17452f;text-decoration:none;line-height:normal}
.fdk .status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fdk-ok);box-shadow:0 0 8px var(--fdk-ok)}
.fdk h2{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:normal;color:var(--fdk-muted);margin-bottom:13px}
.fdk .nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:4px;--bs-nav-link-font-size:.86rem;--bs-nav-link-font-weight:400;
  --bs-nav-link-color:var(--fdk-link);--bs-nav-link-hover-color:#fff}
.fdk .nav-link{align-self:flex-start;border-radius:4px}
.fdk .base{padding-top:22px;gap:10px;font-size:.78rem;color:var(--fdk-muted)}
.fdk .base .nav{--bs-nav-link-padding-y:0;--bs-nav-link-font-size:.78rem;--bs-nav-link-color:var(--fdk-soft);gap:8px 18px}
.fdk a:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none}
.fdk .status:focus-visible{outline-color:var(--fdk-ok)}
@media (max-width:639.98px){.fdk{padding:40px 20px 24px}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="bg-[#0d1117] px-5 pt-10 pb-6 leading-[normal] text-[#e7ebf4] sm:px-8 sm:pt-12 sm:pb-[26px] [&_a]:rounded [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-white">
  <div class="mx-auto max-w-[1000px]">
    <div class="flex flex-wrap justify-between gap-[30px] border-b border-[#1d2635] pb-[34px]">
      <div class="max-w-[300px]">
        <p class="text-[1.1rem] font-bold"><span aria-hidden="true">▲</span> Meridian</p>
        <p class="mt-2.5 text-[.85rem] leading-[1.65] text-[#77839c]">The analytics platform your finance team and your engineers both actually like.</p>
        <a class="mt-4 inline-flex items-center gap-2 rounded-full! border border-[#17452f] bg-[#0d2b1e] px-[13px] py-1.5 text-[.78rem] font-bold text-[#3fd68f] before:size-2 before:rounded-full before:bg-[#3fd68f] before:shadow-[0_0_8px_#3fd68f] before:content-[''] focus-visible:outline-[#3fd68f]!" href="#">All systems operational</a>
      </div>
      <div class="flex flex-wrap gap-x-14 gap-y-[30px] [&_h2]:mb-[13px] [&_h2]:text-[.72rem] [&_h2]:font-extrabold [&_h2]:tracking-[.1em] [&_h2]:text-[#737f99] [&_h2]:uppercase [&_ul_a]:block [&_ul_a]:py-1 [&_ul_a]:text-[.86rem] [&_ul_a]:text-[#9aa6c0] [&_ul_a:hover]:text-white">
        <nav aria-labelledby="fdk-product"><h2 id="fdk-product">Product</h2>
          <ul><li><a href="#">Overview</a></li><li><a href="#">Integrations</a></li><li><a href="#">Pricing</a></li></ul></nav>
        <nav aria-labelledby="fdk-dev"><h2 id="fdk-dev">Developers</h2>
          <ul><li><a href="#">Documentation</a></li><li><a href="#">API reference</a></li><li><a href="#">Open source</a></li></ul></nav>
        <nav aria-labelledby="fdk-company"><h2 id="fdk-company">Company</h2>
          <ul><li><a href="#">About</a></li><li><a href="#">Customers</a></li><li><a href="#">Careers</a></li></ul></nav>
      </div>
    </div>
    <div class="flex flex-wrap items-center justify-between gap-2.5 pt-[22px] text-[.78rem] text-[#737f99]">
      <p>© Meridian Systems Inc.</p>
      <nav aria-label="Legal"><ul class="flex flex-wrap gap-x-[18px] gap-y-2 [&_a]:text-[#77839c] [&_a:hover]:text-white"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Security</a></li><li><a href="#">Cookies</a></li></ul></nav>
    </div>
  </div>
</footer>

About this set

A near-black footer for software products. On the left sits the brand with a one-line pitch and a green pill link reading All systems operational, with a small glowing dot drawn by a pseudo-element; point it at your status page. On the right are three link groups, Product, Developers and Company, and underneath a divider runs a legal row with the company name and Privacy, Terms, Security and Cookies links. The brand block and the link groups sit at opposite ends of a wrapping row, so on a phone the groups simply flow under the brand in two columns and the legal links wrap under the copyright. Link text is a cool grey that turns white on hover, and the small uppercase headings were lifted to a lighter grey so they keep 4.5:1 contrast on the dark background. Use it for SaaS marketing sites, developer tools and dashboards with a dark theme. The Bootstrap version uses a .row with auto-width columns, .nav.flex-column link lists and a .badge for the status pill.

What’s included

  • Status pill link with a glowing dot, no images
  • Three labelled link groups plus a legal nav
  • Dark palette with every text colour at 4.5:1 or better
  • Wrapping layout that needs no breakpoints for the columns
  • No JavaScript

Accessibility

Each link group is a nav labelled by its h2 heading and the legal links sit in a nav labelled Legal. The decorative triangle in the logo is hidden from screen readers. Links show a 2px white focus outline, green on the status pill, and nothing animates.

Customise it

Set --fdk-bg, --fdk-link, --fdk-muted and --fdk-ok on .fdk in the plain CSS and Bootstrap versions; Bootstrap also reads --bs-nav-link-* and --bs-badge-* there. In Tailwind change bg-[#0d1117], text-[#9aa6c0] and the #3fd68f status colours.