Resources

Get started

Two stylesheets and a few class names give you on-system UI with no other CSS. Beam v0.1.0.

Link beam.css and one kit
Order matters: beam.css first, then the kit. Both declare the same cascade layers, so nothing else in your CSS can accidentally outrank the tokens.
HTML <head>
```
<link rel="stylesheet" href="beam.css">
<link rel="stylesheet" href="kits/brandkit.abl.css">
```
Set data attributes (optional)
With one kit, you're done. Load several kits to switch between them with data-brand. Modes can be overridden on <html>: data-theme (light · dark; default follows the OS), data-density, data-shape, data-depth, data-gray, data-accent, data-typeface.
```

<html lang="en">


<html lang="en" data-brand="abl" data-theme="dark" data-density="compact">
```
Set them on <html>. On a nested element they don't yet re-theme semantic tokens — that's an open decision (scoped theming).

Write compositions, then utilities

Lay out with compositions, adjust with utilities, use Cantina for controls.

Page

<body>
  <div class="[ b-app-shell ]">
    <header data-area="header" class="[ b-wrapper b-repel ]" data-max="full">…</header>
    <nav data-area="nav">…</nav>
    <main data-area="main">
      <div class="[ b-wrapper b-region b-flow ]">
        <h1>Devices</h1>
        <div class="[ b-grid ]" data-min="sm">
          <article class="[ b-flow ] [ u-surface-raised u-radius-rounded u-p-xl u-depth-low ]" data-space="sm">
            <h2 class="[ u-type-h5 ]">Card</h2>
            <p class="[ u-type-body-sm u-text-neutral-secondary ]">On-system with no custom CSS.</p>
          </article>
        </div>
      </div>
    </main>
    <footer data-area="footer">…</footer>
  </div>
</body>

If you need your own CSS, use tokens only

Never a raw hex or px value. If no token fits, ask AXD rather than inventing one.

CSS

/* Your own block CSS: tokens only, in the blocks layer */
@layer beam.blocks {
  .device-tile {
    background: var(--beam-surface-raised);
    border: var(--beam-border-width-2) solid var(--beam-border-neutral-secondary);
    border-radius: var(--beam-radius-rounded);
    padding: var(--beam-inset-md);
  }
}

Downloads

beam.css
Tokens, foundations, compositions, utilities. Brand-agnostic.
brandkit.abl.css
Acuity Brands Lighting kit
brandkit.base.css
Beam Base (unbranded) kit
beam.manifest.json
Every token with per-mode values and aliases — for tools and agents.
beam.skill
Agent skill: point Claude, Cursor or Copilot at it and it composes on-system UI from beam.css and a kit — no extra CSS.
beam.skill
Instructions for coding agents (Claude, Cursor, Copilot). Coming next — not published yet.

npm package: not published yet.

Link beam.css and one kit

Set data attributes (optional)

Write compositions, then utilities

If you need your own CSS, use tokens only

Downloads