Semantic base

Preview Available in release assets

Provide low-specificity theme-aware defaults for links, code, quotations, rules, focus, hidden content, and readable prose flow.

Semantic base primary example

<article class="thin-prose">
  <h2>Semantic content</h2>
  <p>Links remain <a href="#details">recognizable</a>, keyboard focus remains visible, and inline <code>code</code> uses the mono role.</p>
  <blockquote id="details">Meaning and reading order come from HTML.</blockquote>
  <pre>
    <code>const useful = true;</code>
  </pre>
</article>

Show code

<article class="thin-prose">
  <h2>Semantic content</h2>
  <p>Links remain <a href="#details">recognizable</a>, keyboard focus remains visible, and inline <code>code</code> uses the mono role.</p>
  <blockquote id="details">Meaning and reading order come from HTML.</blockquote>
  <pre>
    <code>const useful = true;</code>
  </pre>
</article>

Anatomy

thin-foundation cascade layer
Semantic element selectors
Visible focus rule
Visually-hidden utility
Optional thin-prose measure and rhythm

Variants and sizes

Semantic HTML defaults
thin-prose measure
thin-visually-hidden utility

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.

Keyboard focus
Hovered link
Overflowing preformatted text
Long prose
Hidden content
Forced colors

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Links, focus navigation, text selection, preformatted overflow, and hidden behavior remain browser-owned.

Accessibility

Use correct elements before utilities. thin-visually-hidden keeps content available to assistive technology; hidden removes it from rendering. Focus-visible supplies a non-color outline using the theme focus role.

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

API

Load /foundation.css and author semantic HTML. Apply class=thin-prose only for measured content and class=thin-visually-hidden only when content should remain in the accessibility tree.

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

Semantic elements preserve meaning and interaction without CSS.

Assets and dependencies

/foundation.css

Dependencies: None

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

Composition

Derived from the examples and style specs, not authored.

Composes

Prose