Preset
Accent

Foundation

Foundation is where tokens, dark mode, presets, theme axes, reset rules, and raw element styling live. If you are asking about h1-h6, code blocks, root theme attributes, or the spacing scale, start here.

Theme axes on <html>

The shipped theme system stores state on the root element. `WBTheme` supports mode, preset, accent, radius, density, shadow, and font. Border is a real CSS axis, but it is not part of the shipped `WBTheme` JS API.

<html
  data-mode="auto"
  data-preset="corporate"
  data-accent="royal"
  data-radius="soft"
  data-density="compact"
  data-shadow="soft"
  data-font="editorial"
  data-border="subtle">
AxisValuesWhat it changes
data-modelight, dark, autoLight/dark token set and color-scheme.
data-presetmodern, minimal, editorial, playful, corporateBundle of accent, radius, density, shadow, and font defaults.
data-accentocean, forest, sunset, royal, mint, amber, rose, slate-fireAccent token family.
data-radiussharp, softCorner radius tokens.
data-densitycompact, comfortableSpacing scale.
data-shadowflat, softShadow depth.
data-fontsystem, modern, editorialBody and heading font stacks.
data-bordernone, subtle, medium, strong, accent, dashedGlobal border appearance.

Token groups

Surface and text

--wb-bg, --wb-surface, --wb-surface-2, --wb-text, --wb-muted, --wb-border

Accent and semantic

--wb-accent*, --wb-success*, --wb-warning*, --wb-danger*, --wb-info*

Typography

--wb-font, --wb-font-heading, --wb-font-mono, --wb-font-size-*

Spacing and shape

--wb-s1 through --wb-s20, plus --wb-r-sm through --wb-r-full

Token rule New package code should use tokens, not hardcoded colors, radii, or spacing values.

Spacing scale

The base token scale starts in tokens.css and can be tightened or expanded by the density axis.

--wb-s1

4px default

--wb-s4

16px default

--wb-s8

32px default

--wb-s20

80px default

Compact

Use data-density="compact" for tighter admin and data-heavy UIs.

Comfortable

Use data-density="comfortable" for calmer editorial or marketing flows.

Base element styling

Raw HTML already has package styling before you add any primitives. This is where h1-h6, paragraphs, links, code, blockquotes, tables, and focus rings are defined.

Paragraph width is no longer globally constrained. Use .wb-prose or the docs alias .wb-docs-prose when a content block needs a calmer reading measure.

Heading Level 1

Heading Level 2

Heading Level 3

A paragraph uses the base body font and line-height. Apply .wb-prose when you want a readable max-width for docs, policies, and other text-first surfaces. Inline code and links are already styled at the element layer.

Foundation handles the default reading feel before any page-level primitive is introduced.
<h1>Heading Level 1</h1>
<div class="wb-prose">
  <p>Paragraph copy with <code>inline code</code>.</p>
</div>

Theme controls the package already ships

<button data-wb-mode-set="dark">Dark</button>
<button data-wb-preset-set="minimal">Minimal</button>
<button data-wb-accent-set="forest">Forest</button>
<button data-wb-radius-set="soft">Soft radius</button>
<button data-wb-density-set="compact">Compact</button>
<button data-wb-shadow-set="soft">Soft shadow</button>
<button data-wb-font-set="editorial">Editorial font</button>