EscapeVelocityBrand
Brand Kit ↓
Auf dieser Seite
Chrome

5 components

The framing that wraps every page — site nav, the layered docs nav, footer, breadcrumb and the dismissible announcement bar. Behaviour ships in css/components.js alongside the CSS.

Two-band page footer: optional cream CTA band (.footer-cta) + black footer with nav columns, legal links and copyright. CTA reuses .btn-primary; omit the band on legal/standalone pages. .footer .footer-cta .footer-inner .footer-cols .footer-brand .footer-nav .footer-col-title .footer-link .footer-bottom .footer-copyright .footer-legal .divider-footer

Prozess-Review

Wo verliert Ihr Betrieb täglich Zeit?

In zwei Wochen wissen Sie es – mit priorisierter Hebel-Landkarte.

Erstgespräch buchen →
View source 
<section class="footer-cta">
  <div class="footer-cta-inner">
    <p class="eyebrow">Prozess-Review</p>
    <h2>Wo verliert Ihr Betrieb täglich Zeit?</h2>
    <p>In zwei Wochen wissen Sie es – mit priorisierter Hebel-Landkarte.</p>
    <a class="btn-primary" href="#">Erstgespräch buchen →</a>
  </div>
</section>
<footer class="footer">
  <div class="footer-inner">
    <div class="footer-cols">
      <div class="footer-brand">
        <a href="#" class="footer-logo" aria-label="Escape Velocity — Startseite">Escape<span class="v">Velocity</span></a>
        <p>Digitalisierung &amp; Prozessoptimierung für den Mittelstand im DACH-Raum.</p>
        <a class="footer-link" href="#">hallo@escapevelocity.consulting</a>
      </div>
      <nav class="footer-nav" aria-label="Leistungen"><h3 class="footer-col-title">Leistungen</h3><ul><li><a class="footer-link" href="#">KI Workshops</a></li><li><a class="footer-link" href="#">Leistungen</a></li><li><a class="footer-link" href="#">Über mich</a></li></ul></nav>
      <nav class="footer-nav" aria-label="Rechtliches"><h3 class="footer-col-title">Rechtliches</h3><ul><li><a class="footer-link" href="#">Impressum</a></li><li><a class="footer-link" href="#">Datenschutz</a></li></ul></nav>
    </div>
    <hr class="divider-footer">
    <div class="footer-bottom">
      <p class="footer-copyright">© 2026 Thomas Enenkel GmbH</p>
      <div class="footer-legal"><a class="footer-link" href="#">Impressum</a><a class="footer-link" href="#">Datenschutz</a></div>
      <div class="footer-social"><a class="footer-link" href="#" rel="me">LinkedIn</a></div>
    </div>
  </div>
</footer>

Top navigation — light by default, .nav--dark opt-in. Single primary CTA. Mobile hamburger collapses the menu (<768px, or force with .is-mobile for the demo). Auto-initialised by components.js (EVComponents.initNav): toggle, scroll-shadow, Esc-to-close. .nav .nav--dark .nav-inner .nav-logo .nav-logo-accent .nav-menu .nav-links .nav-link .nav-cta .nav-toggle

View source 
<nav class="nav" aria-label="Hauptnavigation">
  <div class="nav-inner container">
    <a href="#" class="nav-logo">Escape<span class="nav-logo-accent">Velocity</span></a>
    <button class="nav-toggle" aria-label="Menü öffnen" aria-controls="nav-menu" aria-expanded="false"><span></span><span></span><span></span></button>
    <div class="nav-menu" id="nav-menu">
      <ul class="nav-links">
        <li><a class="nav-link" href="#">KI Workshops</a></li>
        <li><a class="nav-link is-current" href="#" aria-current="page">Leistungen</a></li>
        <li><a class="nav-link" href="#">Über mich</a></li>
      </ul>
      <a class="btn-primary nav-cta" href="#">Erstgespräch buchen</a>
    </div>
  </div>
</nav>

Site nav — Dark

Add .nav--dark for dark hero pages.

View source 
<nav class="nav nav--dark" aria-label="Hauptnavigation">
  <div class="nav-inner container">
    <a href="#" class="nav-logo">Escape<span class="nav-logo-accent">Velocity</span></a>
    <div class="nav-menu" id="nav-menu-d">
      <ul class="nav-links"><li><a class="nav-link" href="#">KI Workshops</a></li><li><a class="nav-link is-current" href="#" aria-current="page">Leistungen</a></li><li><a class="nav-link" href="#">Über mich</a></li></ul>
      <a class="btn-primary nav-cta" href="#">Erstgespräch buchen</a>
    </div>
  </div>
</nav>

Site nav — Mobile (menu open)

.is-mobile forces the mobile layout at any width; .is-open shows the dropdown (live <768px without .is-mobile).

View source 
<nav class="nav is-mobile is-open" aria-label="Hauptnavigation">
  <div class="nav-inner container">
    <a href="#" class="nav-logo">Escape<span class="nav-logo-accent">Velocity</span></a>
    <button class="nav-toggle" aria-label="Menü schließen" aria-controls="nav-menu-m" aria-expanded="true"><span></span><span></span><span></span></button>
    <div class="nav-menu" id="nav-menu-m">
      <ul class="nav-links"><li><a class="nav-link" href="#">KI Workshops</a></li><li><a class="nav-link is-current" href="#" aria-current="page">Leistungen</a></li><li><a class="nav-link" href="#">Über mich</a></li></ul>
      <a class="btn-primary nav-cta btn--block" href="#">Erstgespräch buchen</a>
    </div>
  </div>
</nav>

Site nav — Landing (logo + single CTA)

Landing / offer pages — logo + one CTA, no menu links. Compose with or without .nav--dark.

View source 
<nav class="nav nav--dark" aria-label="Navigation">
  <div class="nav-inner container">
    <a href="#" class="nav-logo">Escape<span class="nav-logo-accent">Velocity</span></a>
    <a class="btn-primary btn--sm nav-cta" href="#">Erstgespräch →</a>
  </div>
</nav>

Site nav — Minimal (logo only)

Distraction-free pages (quiz, checkout): just the logo, which links to the main page. No menu, no CTA.

View source 
<nav class="nav nav--dark" aria-label="Navigation">
  <div class="nav-inner container">
    <a href="#" class="nav-logo">Escape<span class="nav-logo-accent">Velocity</span></a>
  </div>
</nav>

Layered docs nav

Three-tier documentation nav (product · section · in-page anchors) in the "E" layout. MOBILE-FIRST: the base is the collapsed mobile layout — brand + burger, tiers 1 + 2 in a .docnav-drawer (+ .docnav-backdrop), tier 3 as an inline collapsible (.docnav-toc-m). The desktop layout is layered on at min-width: 1024px: a sticky full-bleed bar whose primary menu is CENTERED over the content column (--container-wide), with tiers 2 + 3 in a left sidebar (--rail-width). Decoupling the bar from the inner column stops the menu drifting to the far edge at large widths. .docnav--mobile forces the collapsed layout at ANY width. Cream by default; .docnav-main--dark is the dark opt-in. Auto-initialised by components.js (EVComponents.initDocnav + scroll-spy on [data-toc-spy]). .docnav .docnav-main .docnav-shell .docnav-side .docnav-page .docnav-brand .docnav-main-links .docnav-cta .docnav-toc .docnav-toc-m .docnav-drawer

EscapeVelocityBrand
CTA
Auf dieser Seite
Components · Chrome

Chrome & Navigation

Tier 1 zentriert über der Inhaltsspalte, Tiers 2 + 3 in der linken Sidebar. Voll-randlose Leiste — nichts driftet bei großer Breite an den Rand.

View source 
<div class="docnav">
  <div class="docnav-main">
    <div class="docnav-inner">
      <div class="docnav-brand-cell">
        <a href="#" class="docnav-brand">Escape<span class="v">Velocity</span><span class="docnav-brand-tag">Brand</span></a>
        <button class="docnav-toggle" aria-label="Menü öffnen" aria-expanded="false" aria-controls="docnav-demo-drawer"><span></span><span></span><span></span></button>
      </div>
      <div class="docnav-main-cell">
        <nav class="docnav-primary" aria-label="Hauptnavigation"><ul class="docnav-main-links"><li><a href="#">Overview</a></li><li><a href="#">Foundations</a></li><li><a href="#" class="is-current" aria-current="page">Library</a></li><li><a href="#">Templates</a></li></ul></nav>
        <div class="docnav-util"><a class="docnav-cta" href="#">CTA</a></div>
      </div>
    </div>
    <div class="docnav-drawer" id="docnav-demo-drawer">
      <div class="docnav-drawer-group"><span class="docnav-drawer-title">Bereiche</span><a href="#">Overview</a><a href="#" class="is-current">Library</a><a href="#">Templates</a></div>
      <div class="docnav-drawer-group docnav-drawer-group--sub"><span class="docnav-drawer-title">Library</span><a href="#" class="is-current">Chrome</a><a href="#">Elements</a><a href="#">Patterns</a></div>
      <a class="docnav-cta" href="#">CTA</a>
    </div>
  </div>
  <div class="docnav-backdrop"></div>
  <div class="docnav-shell">
    <aside class="docnav-side" aria-label="Bereichsnavigation">
      <div class="docnav-side-group"><span class="docnav-side-title">Library</span><ul><li><a href="#" class="is-current" aria-current="page">Chrome</a></li><li><a href="#">Elements</a></li><li><a href="#">Patterns</a></li></ul></div>
      <nav class="docnav-toc docnav-side-group" aria-label="Auf dieser Seite"><span class="docnav-toc-title">Auf dieser Seite</span><ul><li><a href="#" class="is-current">Anatomy</a><ul class="docnav-toc-sub"><li><a href="#">The bar</a></li><li><a href="#">The inner</a></li></ul></li><li><a href="#">Tiers</a></li><li><a href="#">States</a></li></ul></nav>
    </aside>
    <main class="docnav-page">
      <details class="docnav-toc-m"><summary>Auf dieser Seite</summary><ul><li><a href="#" class="is-current">Anatomy</a><ul class="docnav-toc-sub"><li><a href="#">The bar</a></li><li><a href="#">The inner</a></li></ul></li><li><a href="#">Tiers</a></li></ul></details>
      <div class="docnav-content">
        <span class="eyebrow">Components · Chrome</span>
        <h1>Chrome &amp; Navigation</h1>
        <p>Tier 1 zentriert über der Inhaltsspalte, Tiers 2 + 3 in der linken Sidebar. Voll-randlose Leiste — nichts driftet bei großer Breite an den Rand.</p>
      </div>
    </main>
  </div>
</div>

Layered docs nav — Dark product tier

Add .docnav-main--dark to the bar for the dark brand-site header (cream is the default).

EscapeVelocityBrand
CTA
View source 
<div class="docnav">
  <div class="docnav-main docnav-main--dark">
    <div class="docnav-inner">
      <div class="docnav-brand-cell"><a href="#" class="docnav-brand">Escape<span class="v">Velocity</span><span class="docnav-brand-tag">Brand</span></a></div>
      <div class="docnav-main-cell">
        <nav class="docnav-primary" aria-label="Hauptnavigation"><ul class="docnav-main-links"><li><a href="#">Overview</a></li><li><a href="#" class="is-current">Library</a></li><li><a href="#">Templates</a></li></ul></nav>
        <div class="docnav-util"><a class="docnav-cta" href="#">CTA</a></div>
      </div>
    </div>
  </div>
</div>

Layered docs nav — Mobile (burger drawer)

Add .docnav--mobile to force the collapsed mobile layout at any width (it out-specifies the min-width: 1024px desktop rules): brand + burger, the menu folds into .docnav-drawer (tiers 1 + 2), tier 3 becomes the inline .docnav-toc-m.

EscapeVelocityBrand
BereicheOverviewLibraryTemplates
CTA
Auf dieser Seite
Components · Chrome

Chrome

Tippe ☰ für das Menü.

View source 
<div class="docnav docnav--mobile">
  <div class="docnav-main">
    <div class="docnav-inner">
      <div class="docnav-brand-cell"><a href="#" class="docnav-brand">Escape<span class="v">Velocity</span><span class="docnav-brand-tag">Brand</span></a></div>
      <button class="docnav-toggle" aria-label="Menü öffnen" aria-expanded="false"><span></span><span></span><span></span></button>
    </div>
    <div class="docnav-drawer">
      <div class="docnav-drawer-group"><span class="docnav-drawer-title">Bereiche</span><a href="#">Overview</a><a href="#" class="is-current">Library</a><a href="#">Templates</a></div>
      <a class="docnav-cta" href="#">CTA</a>
    </div>
  </div>
  <div class="docnav-shell">
    <main class="docnav-page">
      <details class="docnav-toc-m"><summary>Auf dieser Seite</summary><ul><li><a href="#" class="is-current">Anatomy</a><ul class="docnav-toc-sub"><li><a href="#">The bar</a></li></ul></li><li><a href="#">Tiers</a></li></ul></details>
      <div class="docnav-content"><span class="eyebrow">Components · Chrome</span><h1>Chrome</h1><p>Tippe ☰ für das Menü.</p></div>
    </main>
  </div>
</div>

Announcement bar

A slim full-width strip for a timely notice (new offer, event) — sits above the nav. Dismissible and auto-initialised by components.js (EVComponents.initAnnounce); add data-announce-id="…" to persist the dismissal in localStorage. .announce--dark / --cream / --accent surfaces. .announce .announce--dark .announce--cream .announce--accent .announce-inner .announce-text .announce-link .announce-dismiss

Neu: KI-Readiness in 4 Wochen — jetzt Platz sichern. Erstgespräch buchen →
View source 
<div class="announce announce--dark" role="status" aria-live="polite">
  <div class="announce-inner">
    <span class="announce-text"><strong>Neu:</strong> KI-Readiness in 4 Wochen — jetzt Platz sichern.</span>
    <a class="announce-link" href="#kontakt">Erstgespräch buchen →</a>
    <button class="announce-dismiss" type="button" aria-label="Hinweis schließen">×</button>
  </div>
</div>

Announcement bar — Cream

Add .announce--cream for light pages.

Vortrag: Prozesse, die mitwachsen — 12. Juni, Wien. Anmelden →
View source 
<div class="announce announce--cream" role="status" aria-live="polite">
  <div class="announce-inner">
    <span class="announce-text"><strong>Vortrag:</strong> Prozesse, die mitwachsen — 12. Juni, Wien.</span>
    <a class="announce-link" href="#">Anmelden →</a>
    <button class="announce-dismiss" type="button" aria-label="Hinweis schließen">×</button>
  </div>
</div>

Announcement bar — Accent

Add .announce--accent for an urgent/promo strip — terracotta fill. Use sparingly.

Nur diesen Monat: Prozess-Review zum Pilotpreis. Jetzt sichern →
View source 
<div class="announce announce--accent" role="status" aria-live="assertive">
  <div class="announce-inner">
    <span class="announce-text"><strong>Nur diesen Monat:</strong> Prozess-Review zum Pilotpreis.</span>
    <a class="announce-link" href="#kontakt">Jetzt sichern →</a>
    <button class="announce-dismiss" type="button" aria-label="Hinweis schließen">×</button>
  </div>
</div>

A hierarchical wayfinding trail (Home › Section › Page). Calm and minimal — no box, separators are aria-hidden, the leaf node is non-linked and emphasized by weight. .breadcrumb--on-dark for dark hero sections. .breadcrumb .breadcrumb--on-dark .breadcrumb-list .breadcrumb-item .breadcrumb-link .breadcrumb-current .breadcrumb-sep

View source 
<nav class="breadcrumb" aria-label="Seitenpfad">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Home</a><span class="breadcrumb-sep" aria-hidden="true">&nbsp;&rsaquo;</span></li>
    <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Identity</a><span class="breadcrumb-sep" aria-hidden="true">&nbsp;&rsaquo;</span></li>
    <li class="breadcrumb-item"><span class="breadcrumb-current" aria-current="page">Voice &amp; Press</span></li>
  </ol>
</nav>

Breadcrumb — On dark

Add .breadcrumb--on-dark for placement on a dark hero.

View source 
<div style="background:var(--bg-dark);padding:20px 24px;border-radius:var(--radius-card)">
  <nav class="breadcrumb breadcrumb--on-dark" aria-label="Seitenpfad">
    <ol class="breadcrumb-list">
      <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Home</a><span class="breadcrumb-sep" aria-hidden="true">&nbsp;&rsaquo;</span></li>
      <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Angebot</a><span class="breadcrumb-sep" aria-hidden="true">&nbsp;&rsaquo;</span></li>
      <li class="breadcrumb-item"><span class="breadcrumb-current" aria-current="page">Back-Office Upgrade</span></li>
    </ol>
  </nav>
</div>