Pattern

App shell — Standalone

The ABL frame for standalone (customer-facing) apps: a branded app bar, a navigation + search row, page content and a legal footer.

.b-repel.b-cluster.b-flow

Use for standalone and customer-facing ABL apps with a few top-level sections and a prominent product search. Avoid it for internal tools with deep navigation — use the Contained shell. Source: Figma Beam › App shells › Standalone.

Preview

Acuity Brands Lighting

Each kit renders in its own frame and follows the theme and density set in the header. Open full-size ↗

HTML

Layout uses Beam compositions and utilities only. Buttons, inputs, toggles, badges and tables here are stand-ins so the preview renders — in product, use the Cantina components below.

<div class="[ b-shell-standalone ]" data-shell>
  <header class="[ b-shell-appbar ]">
    <a class="[ b-shell-app-logo ]" href="#">
      <span class="[ b-brand-logo ]" data-mark role="img" aria-label="Acuity"></span>
      <span class="[ b-shell-app-name ]">App name</span>
    </a>
    <div class="[ b-shell-global ]">
      <a class="[ b-shell-menu-item ]" href="#" aria-label="Cart, 0 items"><span class="[ b-shell-icon-box ]"><i class="fa-duotone fa-light fa-bag-shopping" aria-hidden="true"></i></span><span class="[ b-shell-badge ]" data-tone="brand">0</span></a>
      <a class="[ b-shell-menu-item ]" href="#" aria-label="Notifications, 5 unread"><span class="[ b-shell-icon-box ]"><i class="fa-duotone fa-light fa-bell" aria-hidden="true"></i></span><span class="[ b-shell-badge ]" data-tone="error" data-dot>5</span></a>
      <a class="[ b-shell-menu-item b-shell-apps ]" href="#"><span class="[ b-shell-icon-box ]"><i class="fa-duotone fa-light fa-grid" aria-hidden="true"></i></span><span>Apps</span></a>
      <button class="[ b-shell-user ]" type="button" aria-haspopup="menu"><span class="[ b-shell-avatar ]">JP</span><span>Jennifer</span><span class="[ b-shell-chevron ]"><i class="fa-duotone fa-light fa-chevron-down" aria-hidden="true"></i></span></button>
      <button class="[ b-shell-icon-box ]" type="button" aria-label="Menu" data-shell-menu><i class="fa-duotone fa-light fa-bars" aria-hidden="true"></i></button>
    </div>
  </header>
  <div class="[ b-shell-subbar ]">
    <nav class="[ b-shell-tabs ]" aria-label="Primary">
      <a href="#">Home</a>
      <a href="#" aria-current="page">Nav Item</a>
    </nav>
    <form class="[ b-shell-product-search ]" role="search">
      <label class="[ b-shell-search-input ]"><input type="search" value="4 ft LED strip light 4000K 120–277V" aria-label="Search products"><i class="fa-duotone fa-light fa-search" aria-hidden="true"></i></label>
      <button class="[ b-shell-go ]" type="submit">Go</button>
    </form>
    <div class="[ b-shell-subbar-end ]"><span class="[ b-shell-util ]"></span><span class="[ b-shell-util ]"></span></div>
  </div>
  <main class="[ b-shell-content ]">
    <ol class="[ b-shell-breadcrumb ]" role="list"><li><a href="#">Home</a></li><li aria-hidden="true">/</li><li aria-current="page">breadcrumb</li></ol>
    <header class="[ b-shell-intro ]">
      <h1>Page Title</h1>
      <p>Choose a category, then a product type.</p>
    </header>
    <hr class="[ b-shell-divider ]">
  </main>
  <footer class="[ b-shell-legal ]">
    <div class="[ b-shell-legal-start ]">
      <span class="[ b-brand-logo ]" role="img" aria-label="Acuity"></span>
      <span>© 2026 Acuity Inc. All Rights Reserved.</span>
      <ul class="[ b-shell-legal-links ]" role="list">
        <li><a href="#">Terms</a></li><li><a href="#">Exercise My Rights</a></li><li><a href="#">Privacy Policy</a></li><li><a href="#">Do Not Sell My Personal Information</a></li>
      </ul>
    </div>
    <div class="[ b-shell-legal-end ]">
      <a class="[ b-shell-site-links ]" href="#">Site Links <i class="fa-duotone fa-light fa-circle-chevron-up" aria-hidden="true"></i></a>
      <span class="[ b-shell-vdivider ]" aria-hidden="true"></span>
      <ul class="[ b-shell-social ]" role="list" aria-label="Social">
        <li><a href="#" aria-label="Facebook"><i class="fa-brands fa-facebook-f" aria-hidden="true"></i></a></li>
        <li><a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram" aria-hidden="true"></i></a></li>
        <li><a href="#" aria-label="YouTube"><i class="fa-brands fa-youtube" aria-hidden="true"></i></a></li>
        <li><a href="#" aria-label="X (Twitter)"><i class="fa-brands fa-twitter" aria-hidden="true"></i></a></li>
        <li><a href="#" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in" aria-hidden="true"></i></a></li>
      </ul>
    </div>
  </footer>
</div>

Cantina components

header
tab-bar
input
button
badge
breadcrumb

Open Cantina ↗

Recipe

The rules an agent follows to build this pattern. This is what goes into beam.skill.

App bar: surface-default with a brand-coloured bottom rule (border-brand) and depth-low; .b-repel — app mark + app name (uppercase label-lg, bold) left, global menu right (cart, notifications, Apps, user, menu).
Sub bar: border-neutral-separator bottom; primary tabs left (current tab = border-brand underline, semibold), product search centred (input + solid Go button), utility slots right.
Content: breadcrumb, then intro (h1 at type-h3 + one-line description in text-neutral-secondary), then a separator before the page body.
Legal footer: logo, copyright and legal links left; Site links + social links right, separated by a vertical divider. Use type-caption.
Below md the sub bar stacks: tabs, then search full width; utility slots hide.

beam.skill recipe (Markdown)

## Pattern: App shell — Standalone
The ABL frame for standalone (customer-facing) apps: a branded app bar, a navigation + search row, page content and a legal footer.

Compositions: .b-repel, .b-cluster, .b-flow
Cantina: header, tab-bar, input, button, badge, breadcrumb

1. App bar: surface-default with a brand-coloured bottom rule (border-brand) and depth-low; .b-repel — app mark + app name (uppercase label-lg, bold) left, global menu right (cart, notifications, Apps, user, menu).
2. Sub bar: border-neutral-separator bottom; primary tabs left (current tab = border-brand underline, semibold), product search centred (input + solid Go button), utility slots right.
3. Content: breadcrumb, then intro (h1 at type-h3 + one-line description in text-neutral-secondary), then a separator before the page body.
4. Legal footer: logo, copyright and legal links left; Site links + social links right, separated by a vertical divider. Use type-caption.
5. Below md the sub bar stacks: tabs, then search full width; utility slots hide.