Reset

Preview Available in release assets

Apply a small, layered reset for predictable sizing, document margins, inherited form typography, responsive replaced media, and semantic content defaults.

Reset primary example

<article>
  <h2>Browser-aware reset</h2>
  <p>Text, media, tables, and native form controls retain their semantics while inheriting the theme.</p>
  <img src="/icons/svg/image.svg" alt="" width="96" height="64">
  <button type="button">Native button</button>
</article>

Show code

<article>
  <h2>Browser-aware reset</h2>
  <p>Text, media, tables, and native form controls retain their semantics while inheriting the theme.</p>
  <img src="/icons/svg/image.svg" alt="" width="96" height="64">
  <button type="button">Native button</button>
</article>

Anatomy

thin-reset cascade layer
Universal border-box sizing
Document and body defaults
Native form inheritance
Responsive replaced media
Conservative content normalization

Variants and sizes

Global foundation asset

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Long content
Narrow viewport
Zoomed text
Native controls
Images with intrinsic dimensions
Bidirectional documents

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The reset adds no interaction and does not replace native control, selection, scrolling, or form behavior.

Accessibility

The reset preserves native semantics, visible content, user font scaling, control affordances, and source order. List markers are removed only when the author explicitly supplies role=list.

Contract: PLATFORM
Basis: Native CSS layout and document defaults over semantic HTML; no APG widget

API

Load /foundation.css once. The thin-reset layer is intentionally low-specificity and can be ordered with application layers. Author width and height on content images when layout stability matters; use srcset and sizes for responsive images; prefer loading=lazy for below-the-fold media and fetchpriority=high only for truly critical hero images.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Browser defaults and semantic HTML remain usable without the reset.

Assets and dependencies

/foundation.css

Dependencies: None

Source: packages/ui/src/style/foundation.ts