Foundations

What the foundations layer sets

• Box model: box-sizing: border-box everywhere.
• Page: <html> gets the body type role, text-neutral-primary and surface-default. color-scheme follows data-theme or the OS.
• Headings: h1–h6 use the matching type roles and balanced wrapping. Default margins are removed — spacing comes from compositions (.b-flow).
• Reading width: paragraphs cap at --beam-paragraph-max-width (override with --measure).
• Links: text-brand, hover text-brand-secondary.
• Code: the code role in the kit’s mono family.
• Focus: every :focus-visible gets --beam-ring-brand. Don’t remove it; restyle it with another ring token if you must.
• Media: images, video and SVG are block-level and never overflow their container.
• Form controls inherit font and colour.

<article class="[ b-flow ]">
<h2>Heading level 2</h2>
<p>Plain paragraph with a <a href="#">link</a> and <code>inline code</code>. No classes on these elements.</p>
<button type="button">Tab to me to see the focus ring</button>
</article>

Principles

Colour. Semantic tokens only in product code. Text needs 4.5:1 against its background, icons and control borders 3:1 — the Color page shows the ratio for every pairing in every kit.

Type. Use roles, not sizes. Sizes come from a modular scale that grows and shrinks with density.

Space. Use spacing roles (stack, inline, inset, gutter, region) through compositions. Density is a user and product choice, not a per-component one.

Layout. Prefer intrinsic layouts that respond to their own width; use breakpoints only for page structure.

Motion. Use motion tokens so prefers-reduced-motion is honoured automatically.

Accessibility. Keep the focus ring, keep contrast, and respect reduced motion. These are built in; the only way to lose them is to override Beam with raw values.