Modes

Six switches change how the whole system looks: theme, density, corners, shadows, material and lines. Each one is a data attribute on the page or on any section.

How modes work

A mode is a data attribute. On <html> it sets the whole page; on any element it sets that part only, and modes nest. Components read tokens, the attribute swaps the tokens, so nothing else in your markup changes. In Figma the same switches are variable modes with the same names.

<html data-theme="dark" data-density="s" data-radius="rounded">
  …
  <section data-theme="light">a light band on a dark page</section>

Attribute	Values	Changes
`data-theme`	`light`, `dark`	Every colour. Without it, the page follows the system setting.
`data-density`	`s`, `m`, `l`	Control size, padding inside containers, table rows. Touch screens default to `l`.
`data-radius`	`sharp`, `default`, `rounded`, `pill`	All three corner radii.
`data-elevation`	`flat`, `soft`	Shadows under controls and raised surfaces. Overlays always keep theirs.
`data-material`	`solid`, `glass`	Header, top bar and other chrome: opaque, or frosted with background blur.
`data-lines`	`on`, `minimal`, `none`	Container outlines and separators between rows.

Theme

Light and dark use the same palettes at different steps, so contrast holds in both. Without data-theme, the page follows the reader's system setting; set data-theme="light" to opt out. A dark band on a light page is one attribute on the section.

Light

Invoice 2026-114 is due in 14 days.

Dark

Invoice 2026-114 is due in 14 days.

<div class="dsgn-grid" data-cols="1" data-cols-tablet="2">
  <div class="mode-panel" data-theme="light"><article class="dsgn-card"><h3 class="dsgn-card-title">Light</h3><p class="dsgn-card-text">Invoice 2026-114 is due in 14 days.</p><div class="dsgn-card-actions"><button class="dsgn-button" type="button">Pay now</button></div></article></div>
  <div class="mode-panel" data-theme="dark"><article class="dsgn-card"><h3 class="dsgn-card-title">Dark</h3><p class="dsgn-card-text">Invoice 2026-114 is due in 14 days.</p><div class="dsgn-card-actions"><button class="dsgn-button" type="button">Pay now</button></div></article></div>
</div>

Density

S suits data-heavy tools, M is the default, L suits touch and public kiosks. See Spacing and size for every value.

Corners

From square to fully round buttons. See Corner radius for the values and a live comparison.

Shadows

flat (the default) separates surfaces with borders only; soft adds a light shadow under controls and raised surfaces. Dialogs, menus and toasts always keep their shadow, because they float above the page.

Flat

Borders only.

Soft

A light shadow underneath.

<div class="dsgn-grid" data-cols="1" data-cols-tablet="2">
  <div class="mode-panel" data-elevation="flat"><article class="dsgn-card"><h3 class="dsgn-card-title">Flat</h3><p class="dsgn-card-text">Borders only.</p><div class="dsgn-card-actions"><button class="dsgn-button" data-variant="subtle" data-intent="neutral" type="button">Details</button></div></article></div>
  <div class="mode-panel" data-elevation="soft"><article class="dsgn-card"><h3 class="dsgn-card-title">Soft</h3><p class="dsgn-card-text">A light shadow underneath.</p><div class="dsgn-card-actions"><button class="dsgn-button" data-variant="subtle" data-intent="neutral" type="button">Details</button></div></article></div>
</div>

Material

glass makes the page chrome frosted: the header and the app top bar let the content behind show through, blurred. Where the browser has no blur, or the reader asks for less transparency, it falls back to solid. A header can also be frosted on its own with data-surface="glass", as on this site: scroll and watch the content pass under it.

Lines

on draws container outlines and separators. minimal drops the outlines around cards and alerts but keeps separators between rows. none removes both, for layouts that separate by space and surface colour alone.

On

Client: Studio Kolo
Total: CZK 24 200

Minimal

Client: Studio Kolo
Total: CZK 24 200

None

Client: Studio Kolo
Total: CZK 24 200

<div class="dsgn-grid" data-cols="1" data-cols-desktop="3">
  <div class="mode-panel" data-lines="on">
    <article class="dsgn-card">
      <h3 class="dsgn-card-title">On</h3>
      <dl class="dsgn-dl"><div><dt>Client</dt><dd>Studio Kolo</dd></div><div><dt>Total</dt><dd>CZK 24 200</dd></div></dl>
    </article>
  </div>
  <div class="mode-panel" data-lines="minimal">
    <article class="dsgn-card">
      <h3 class="dsgn-card-title">Minimal</h3>
      <dl class="dsgn-dl"><div><dt>Client</dt><dd>Studio Kolo</dd></div><div><dt>Total</dt><dd>CZK 24 200</dd></div></dl>
    </article>
  </div>
  <div class="mode-panel" data-lines="none">
    <article class="dsgn-card">
      <h3 class="dsgn-card-title">None</h3>
      <dl class="dsgn-dl"><div><dt>Client</dt><dd>Studio Kolo</dd></div><div><dt>Total</dt><dd>CZK 24 200</dd></div></dl>
    </article>
  </div>
</div>