Preset — mica

This paragraph and everything around it is unstyled flow content. Rhythm, heading margins, media behavior, focus rings, and reduced-motion guards come from @layer mica.preset — zero-specificity, trivially overridable.

A following heading gets breathing room

Because it isn't a first child. Inside a stack, rhythm yields to gap — the stack owns spacing. Tab to this link or any control to see the tokenized focus ring.

Scrollbars

Scroll in either direction. The thumb follows the theme.

Native scrolling, with a quieter appearance.

Use the arrow keys when this region has focus.

Override the scrollbar tokens for one region or the whole app.

The browser still controls scrollbar visibility and shape.

Scrollbar styling and opt-out

The preset uses a thin scrollbar with a muted thumb and transparent track. Standard CSS properties preserve native scrolling; browsers and operating systems still control the exact shape and when overlay scrollbars appear. Browsers without support retain native styling. Forced-colors mode uses native colors and width.

/* App layer declared after Mica’s layers, or ordinary unlayered CSS. */
@layer app {
  :root {
    --scrollbar-color: var(--color-text-muted) transparent;
    --scrollbar-width: thin;
  }

  /* Native scrollbars throughout this subtree. */
  .native-scrollbars {
    --scrollbar-color: auto;
    --scrollbar-width: auto;
  }
}

Set both tokens to auto on :root to opt out globally. The color token accepts auto or a thumb/track color pair. Width accepts the standard CSS values; prefer auto when a wider drag target is useful. Component-specific rules, such as tabs hiding a scrollbar when overflow controls are available, remain independent.

/* Override every scrollbar, including component-specific widths. */
@layer app {
  :where(*) {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }
}

Declare the app layer after mica.layout, or use unlayered CSS, which takes precedence over all Mica layers. Standard scrollbar colors and widths are documented by MDN.