AvoidTreat every header as the page banner, use it as a styling wrapper, or nest header/footer inside it.

## Header
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header (checked 2026-07-23)
Deprecated: no
Purpose: Introductory or navigational content for page or nearest section.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use for a page or section introduction; let the nearest semantic owner determine landmark behavior.
Avoid: Treat every header as the page banner, use it as a styling wrapper, or nest header/footer inside it.
Constraints: Keep header ownership clear from document structure. Do not add a redundant banner role or force global header layout.
Accessibility: Preserve descriptive heading hierarchy and avoid duplicate unnamed banner landmarks.
Semantic HTML: <header><h2>Section introduction</h2></header>

AvoidWrap every small link group in nav or add a redundant navigation role.

## Navigation
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav (checked 2026-07-23)
Deprecated: no
Purpose: Major navigation block.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use for major menus, tables of contents, or indexes; label navigation landmarks by their content and purpose.
Avoid: Wrap every small link group in nav or add a redundant navigation role.
Constraints: Keep landmark names concise; distinguish different navigation purposes, but reuse the same name for repeated navigation with identical links and purpose. Do not force lists, flex, grid, or page positioning from Element CSS.
Accessibility: Ensure keyboard users can reach every link and landmark names accurately communicate whether navigation regions are the same or different.
Semantic HTML: <nav aria-label="Example"><a href="/overview">Overview</a></nav>

AvoidNest main elements, place repeated site chrome inside, or use main only as a layout hook.

## Main
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main (checked 2026-07-23)
Deprecated: no
Purpose: Unique dominant page content.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Render one visible main per ordinary document for its unique central content.
Avoid: Nest main elements, place repeated site chrome inside, or use main only as a layout hook.
Constraints: Keep main as a direct semantic region of the document body rather than a descendant of article, aside, footer, header, or nav. Do not force width, centering, padding, or section gaps from Element CSS.
Accessibility: Keep a single discoverable main landmark and provide a skip link when repeated navigation precedes it.
Semantic HTML: <main><h1>Unique page content</h1></main>

AvoidUse section as a styling-only wrapper or choose it merely to create vertical spacing.

## Section
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section (checked 2026-07-23)
Deprecated: no
Purpose: Standalone thematic section.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use for a named document theme with a meaningful heading.
Avoid: Use section as a styling-only wrapper or choose it merely to create vertical spacing.
Constraints: Keep sections aligned with document hierarchy and prefer a more specific semantic element when available. Do not force gaps, padding, grids, or boundaries from Element CSS.
Accessibility: Use a descriptive heading so the section is understandable in heading and landmark navigation.
Semantic HTML: <section aria-labelledby="topic"><h2 id="topic">A named theme</h2></section>

AvoidUse for content that depends entirely on surrounding context or merely needs a card appearance.

## Article
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article (checked 2026-07-23)
Deprecated: no
Purpose: Self-contained reusable or distributable composition.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use for independently reusable or distributable content and identify it with a heading.
Avoid: Use for content that depends entirely on surrounding context or merely needs a card appearance.
Constraints: Keep nested articles meaningfully related to the owning article and independently identifiable. Do not force a card surface, border, width, or layout from Element CSS.
Accessibility: Use descriptive headings so article boundaries remain understandable in document navigation.
Semantic HTML: <article><h2>Reusable story</h2><p>Self-contained content.</p></article>

AvoidUse only because content is visually offset or force it into a sidebar from Element CSS.

## Aside
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside (checked 2026-07-23)
Deprecated: no
Purpose: Tangential content related to nearby or page content.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use for genuinely complementary information that can be separated from the primary flow.
Avoid: Use only because content is visually offset or force it into a sidebar from Element CSS.
Constraints: Keep the relationship to nearby or page content clear. Do not force float, grid placement, width, padding, or a callout surface.
Accessibility: Give repeated or ambiguous complementary landmarks distinct accessible names.
Semantic HTML: <aside aria-labelledby="related"><h2 id="related">Related note</h2></aside>

AvoidAssume every footer is page-level contentinfo or use it as a generic bottom-aligned container.

## Footer
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/footer (checked 2026-07-23)
Deprecated: no
Purpose: Footer for nearest sectioning ancestor or page.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Keep footer content scoped to its nearest sectioning ancestor or page.
Avoid: Assume every footer is page-level contentinfo or use it as a generic bottom-aligned container.
Constraints: Keep footer ownership clear from document structure. Do not add redundant contentinfo roles or force bottom positioning, grids, padding, or separators.
Accessibility: Avoid duplicate unnamed contentinfo landmarks and keep footer links descriptively labeled.
Semantic HTML: <article><footer>Article ownership</footer></article>

Default treatmentUse token-backed contact typography and logical block rhythm while preserving address ownership and contents.

AvoidUse for arbitrary postal text, publication dates, or contact information unrelated to the nearest article or page owner.

## Address
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/address (checked 2026-07-23)
Deprecated: no
Purpose: Contact information for nearest article or page owner.
Default: Use token-backed contact typography and logical block rhythm while preserving address ownership and contents.
Use: Include the referenced person or organization with contact details for the nearest article or page owner.
Avoid: Use for arbitrary postal text, publication dates, or contact information unrelated to the nearest article or page owner.
Constraints: Keep content limited to relevant contact information and its owner. Do not nest address, headings, sectioning content, header, or footer inside address.
Accessibility: Keep contact links descriptive and preserve native link focus and activation.
Semantic HTML: <address>Techies Tools<br><a href="mailto:hello@example.test">hello@example.test</a></address>

AvoidPut results inside search, duplicate role=search, or use search for unrelated form controls.

## Search
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search (checked 2026-07-23)
Deprecated: no
Purpose: Search or filtering controls and related suggestions.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use the native search landmark around search or filter controls and related suggestions.
Avoid: Put results inside search, duplicate role=search, or use search for unrelated form controls.
Constraints: Keep result content outside search and associate every control with a visible label. Do not force form layout, gaps, width, or positioning from Element CSS.
Accessibility: Label multiple search landmarks distinctly and preserve native form-control keyboard, focus, validation, and submission behavior.
Semantic HTML: <search><form><label for="query">Search</label><input id="query" type="search"></form></search>

Default treatmentKeep native h1 semantics; style with Framework tokens without removing browser fallback behavior.

AvoidChoose heading level for visual size.

## Heading 1
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements (checked 2026-07-23)
Deprecated: no
Purpose: Top-level page heading.
Default: Keep native h1 semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use one clear page-level h1 in most documents.
Avoid: Choose heading level for visual size.
Constraints: Use one page-level heading in most documents; choose level from document hierarchy, not visual size.
Accessibility: Keep heading text descriptive; preserve zoom, wrapping, and heading navigation.
Semantic HTML: <h1>Page heading</h1>

Default treatmentKeep native h2 semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse for size alone.

## Heading 2
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements (checked 2026-07-23)
Deprecated: no
Purpose: Second-level section heading.
Default: Keep native h2 semantics; style with Framework tokens without removing browser fallback behavior.
Use: Follow document hierarchy without skipped levels.
Avoid: Use for size alone.
Constraints: Follow document hierarchy; do not choose level for visual size. Do not skip heading levels without structural reason.
Accessibility: Keep heading text descriptive and unique enough for heading navigation.
Semantic HTML: <h2>Section heading</h2>

Default treatmentKeep native h3 semantics; style with Framework tokens without removing browser fallback behavior.

AvoidSkip hierarchy for appearance.

## Heading 3
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements (checked 2026-07-23)
Deprecated: no
Purpose: Third-level section heading.
Default: Keep native h3 semantics; style with Framework tokens without removing browser fallback behavior.
Use: Nest beneath an h2-owned section.
Avoid: Skip hierarchy for appearance.
Constraints: Nest beneath an h2-owned section; choose level from structure, not visual size.
Accessibility: Keep heading text descriptive; preserve zoom, wrapping, and heading navigation.
Semantic HTML: <h3>Subsection heading</h3>

Default treatmentKeep native h4 semantics; style with Framework tokens without removing browser fallback behavior.

AvoidCreate deep hierarchy without content need.

## Heading 4
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements (checked 2026-07-23)
Deprecated: no
Purpose: Fourth-level section heading.
Default: Keep native h4 semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use only when document depth requires it.
Avoid: Create deep hierarchy without content need.
Constraints: Use only at the matching document depth; choose level from structure, not visual size.
Accessibility: Keep heading text descriptive; preserve zoom, wrapping, and heading navigation.
Semantic HTML: <h4>Nested section heading</h4>

Default treatmentKeep native h5 semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse as styled label.

## Heading 5
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements (checked 2026-07-23)
Deprecated: no
Purpose: Fifth-level section heading.
Default: Keep native h5 semantics; style with Framework tokens without removing browser fallback behavior.
Use: Keep heading order logical.
Avoid: Use as styled label.
Constraints: Use only at the matching document depth; do not substitute it for a styled label.
Accessibility: Keep heading text descriptive; preserve zoom, wrapping, and heading navigation.
Semantic HTML: <h5>Deep section heading</h5>

Default treatmentKeep native h6 semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse as small bold text.

## Heading 6
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements (checked 2026-07-23)
Deprecated: no
Purpose: Sixth-level section heading.
Default: Keep native h6 semantics; style with Framework tokens without removing browser fallback behavior.
Use: Reserve for genuinely deep structures.
Avoid: Use as small bold text.
Constraints: Reserve for genuinely deep structures; do not use as generic small bold text.
Accessibility: Keep heading text descriptive; preserve zoom, wrapping, and heading navigation.
Semantic HTML: <h6>Deepest section heading</h6>

Default treatmentKeep native p semantics; style with Framework tokens without removing browser fallback behavior.

AvoidInsert empty paragraphs for layout.

## Paragraph
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p (checked 2026-07-23)
Deprecated: no
Purpose: Related block of prose.
Default: Keep native p semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use for regular text and let CSS control spacing.
Avoid: Insert empty paragraphs for layout.
Constraints: Contain phrasing content; use CSS rather than empty paragraphs for spacing.
Accessibility: Keep regular prose at readable measure and text-m scale.
Semantic HTML: <p>One related paragraph of regular text.</p>

Default treatmentKeep native strong semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse only to make text bold.

## Strong importance
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/strong (checked 2026-07-23)
Deprecated: no
Purpose: Text with strong importance, seriousness, or urgency.
Default: Keep native strong semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use when importance changes meaning.
Avoid: Use only to make text bold.
Constraints: Use only when importance, seriousness, or urgency changes meaning.
Accessibility: Keep importance understandable without relying on weight alone.
Semantic HTML: <strong>Important text</strong>

Default treatmentKeep native em semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse only to make text italic.

## Stress emphasis
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/em (checked 2026-07-23)
Deprecated: no
Purpose: Stress that changes spoken meaning.
Default: Keep native em semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use for semantic emphasis; nesting increases emphasis.
Avoid: Use only to make text italic.
Constraints: Use only for stress emphasis that changes spoken meaning.
Accessibility: Keep emphasis understandable from wording and semantics, not styling alone.
Semantic HTML: <em>Stressed emphasis</em>

Default treatmentKeep native small semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse as generic font-size utility.

## Side comment
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/small (checked 2026-07-23)
Deprecated: no
Purpose: Side comments, legal text, or small print.
Default: Keep native small semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use when content is semantically secondary.
Avoid: Use as generic font-size utility.
Constraints: Use for side comments, legal text, or small print; never as a generic size utility.
Accessibility: Retain readable size, contrast, wrapping, and zoom behavior.
Semantic HTML: <small>Terms and supporting detail.</small>

Default treatmentKeep native mark semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse as importance or syntax-highlighting marker.

## Marked relevance
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/mark (checked 2026-07-23)
Deprecated: no
Purpose: Text highlighted as relevant in current context.
Default: Keep native mark semantics; style with Framework tokens without removing browser fallback behavior.
Use: Ensure meaning survives without color or announcement.
Avoid: Use as importance or syntax-highlighting marker.
Constraints: Use only for relevance in the current context, not importance or syntax highlighting.
Accessibility: Ensure marked relevance remains understandable without color; maintain AA text contrast.
Semantic HTML: <p>Search result with <mark>matching text</mark>.</p>

Default treatmentKeep native abbr semantics; style with Framework tokens without removing browser fallback behavior.

AvoidRely on hover tooltip as sole explanation.

## Abbreviation
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/abbr (checked 2026-07-23)
Deprecated: no
Purpose: Abbreviation or acronym with an available expansion.
Default: Keep native abbr semantics; style with Framework tokens without removing browser fallback behavior.
Use: Expand visibly on first use; title is secondary help only.
Avoid: Rely on hover tooltip as sole explanation.
Constraints: Expand visibly on first use; treat title as secondary help only.
Accessibility: Do not rely on a hover-only title tooltip; keep the abbreviation visually identifiable.
Semantic HTML: <abbr title="Web Content Accessibility Guidelines">WCAG</abbr>

AvoidEncode ambiguous or invalid date strings.

## Time
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time (checked 2026-07-23)
Deprecated: no
Purpose: Machine-readable date, time, or duration.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Provide valid datetime value.
Avoid: Encode ambiguous or invalid date strings.
Constraints: Provide a valid datetime value that represents the visible date, time, or duration.
Accessibility: Keep the visible value understandable without machine parsing.
Semantic HTML: <time datetime="2026-07-23">23 July 2026</time>

Default treatmentKeep native blockquote semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse for indentation alone or hide attribution in cite attribute.

## Block quotation
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote (checked 2026-07-23)
Deprecated: no
Purpose: Extended quotation from another source.
Default: Keep native blockquote semantics; style with Framework tokens without removing browser fallback behavior.
Use: Provide visible attribution or source link when relevant.
Avoid: Use for indentation alone or hide attribution in cite attribute.
Constraints: Use only for extended quotations, never indentation. Provide visible attribution or source link when relevant.
Accessibility: Do not rely on the cite attribute as user-visible attribution.
Semantic HTML: <blockquote><p>Quoted material.</p><footer>— <a href="/source">Visible source</a></footer></blockquote>

AvoidType duplicate quotation marks around q.

## Inline quotation
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q (checked 2026-07-23)
Deprecated: no
Purpose: Short inline quotation.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Let browser supply quotation marks.
Avoid: Type duplicate quotation marks around q.
Constraints: Do not type duplicate quotation marks around the element.
Accessibility: Preserve browser-generated quotation marks and language-aware quotation behavior.
Semantic HTML: <p>The review called it <q>clear and reusable</q>.</p>

Default treatmentKeep native cite semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse as author attribution merely for italics.

## Citation title
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/cite (checked 2026-07-23)
Deprecated: no
Purpose: Title of a cited creative work.
Default: Keep native cite semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use for work title, not generic author name.
Avoid: Use as author attribution merely for italics.
Constraints: Use for the title of a cited creative work, not a generic author name.
Accessibility: Keep the work title identifiable without depending on italics alone.
Semantic HTML: <cite>The Design of Everyday Things</cite>

Default treatmentKeep native code semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse for generic monospace styling.

## Code
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/code (checked 2026-07-23)
Deprecated: no
Purpose: Short computer-code fragment.
Default: Keep native code semantics; style with Framework tokens without removing browser fallback behavior.
Use: Escape HTML-sensitive characters; combine with pre for blocks.
Avoid: Use for generic monospace styling.
Constraints: Use for computer-code fragments; escape HTML-sensitive characters.
Accessibility: Keep code readable at zoom and allow inline fragments to wrap with surrounding prose.
Semantic HTML: <p>Run <code>npm test</code> before export.</p>

Default treatmentKeep native pre semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse for layout alignment.

## Preformatted text
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/pre (checked 2026-07-23)
Deprecated: no
Purpose: Whitespace-preserved text.
Default: Keep native pre semantics; style with Framework tokens without removing browser fallback behavior.
Use: Control overflow and provide alternatives for ASCII art.
Avoid: Use for layout alignment.
Constraints: Preserve authored whitespace; never use preformatted text for page layout.
Accessibility: Provide alternatives for ASCII art; preserve horizontal overflow without clipping or page-wide overflow.
Semantic HTML: <pre><code>const ready = true;</code></pre>

Default treatmentKeep native kbd semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse for arbitrary monospace labels.

## Keyboard input
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd (checked 2026-07-23)
Deprecated: no
Purpose: User input from keyboard, voice, or another device.
Default: Keep native kbd semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use for actual commands or keys.
Avoid: Use for arbitrary monospace labels.
Constraints: Use for actual user input or keys, not arbitrary monospace labels.
Accessibility: Keep commands understandable as text and readable at zoom.
Semantic HTML: <p>Press <kbd>Ctrl</kbd> + <kbd>K</kbd>.</p>

Default treatmentKeep native hr semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse as decorative line; use CSS instead.

## Thematic break
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr (checked 2026-07-23)
Deprecated: no
Purpose: Thematic break or topic shift.
Default: Keep native hr semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use when content meaning changes.
Avoid: Use as decorative line; use CSS instead.
Constraints: Use only for a thematic break or topic shift, never as a decorative line.
Accessibility: Keep the content transition understandable from document structure and surrounding text.
Semantic HTML: <p>First topic.</p><hr><p>New topic.</p>

Default treatmentUse token-backed block rhythm and marker indentation while preserving native bullets, nesting, and list semantics.

AvoidUse only for indentation.

## Unordered list
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul (checked 2026-07-23)
Deprecated: no
Purpose: Items whose order has no meaning.
Default: Use token-backed block rhythm and marker indentation while preserving native bullets, nesting, and list semantics.
Use: Keep li as direct semantic children; nest lists inside owning li.
Avoid: Use only for indentation.
Constraints: Keep li as semantic children and place a nested list inside its owning li. Do not remove markers or change display solely to achieve visual layout.
Accessibility: Preserve the native list role and visible markers at zoom and narrow reflow.
Semantic HTML: <ul><li>Semantic structure</li><li>Nested guidance<ul><li>Preserve the marker</li></ul></li></ul>

Default treatmentUse token-backed block rhythm and marker indentation while preserving native numbering, nesting, and authored start, reversed, and value behavior.

AvoidUse when order is irrelevant.

## Ordered list
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol (checked 2026-07-23)
Deprecated: no
Purpose: Items whose sequence or rank matters.
Default: Use token-backed block rhythm and marker indentation while preserving native numbering, nesting, and authored start, reversed, and value behavior.
Use: Preserve meaningful order; use start/reversed/value only when needed.
Avoid: Use when order is irrelevant.
Constraints: Keep li as semantic children and use start, reversed, or li value only when the authored sequence requires it. Do not replace numbering with generated text or visual-only counters.
Accessibility: Preserve the native list role, sequence, and visible markers at zoom and narrow reflow.
Semantic HTML: <ol start="3"><li>Third step</li><li value="5">Fifth step</li><li>Sixth step</li></ol>

Default treatmentUse token-backed item rhythm while preserving the parent list's marker, numbering, and nesting behavior.

AvoidUse outside a valid list parent.

## List item
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li (checked 2026-07-23)
Deprecated: no
Purpose: Item within ul, ol, or menu.
Default: Use token-backed item rhythm while preserving the parent list's marker, numbering, and nesting behavior.
Use: Place inside ul, ol, or menu.
Avoid: Use outside a valid list parent.
Constraints: Place inside ul, ol, or menu and nest child lists inside their owning li. Do not change display or generated content in ways that remove the marker or list-item role.
Accessibility: Preserve marker and list-item semantics at zoom and narrow reflow.
Semantic HTML: <ul><li>One list item in its required parent</li></ul>

Default treatmentUse token-backed block rhythm while preserving native term-description grouping and source order.

AvoidUse for visual indentation.

## Description list
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl (checked 2026-07-23)
Deprecated: no
Purpose: Term-description or name-value groups.
Default: Use token-backed block rhythm while preserving native term-description grouping and source order.
Use: Order one or more dt then one or more dd.
Avoid: Use for visual indentation.
Constraints: Keep each dt group immediately associated with its following dd group. Do not use dl solely for two-column visual layout.
Accessibility: Preserve source-order term-description relationships at zoom and narrow reflow.
Semantic HTML: <dl><dt>Status</dt><dd>Active</dd><dt>Source</dt><dd>MDN and Framework evidence</dd></dl>

Default treatmentUse token-backed term emphasis and group rhythm while preserving the relationship to following dd descriptions.

AvoidUse outside dl.

## Description term
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dt (checked 2026-07-23)
Deprecated: no
Purpose: Term or name within a description list.
Default: Use token-backed term emphasis and group rhythm while preserving the relationship to following dd descriptions.
Use: Place inside dl before associated dd.
Avoid: Use outside dl.
Constraints: Place inside dl before its associated dd group; consecutive dt elements may share the following description. Do not use dt as a generic bold label.
Accessibility: Preserve source-order association with following descriptions at zoom and reflow.
Semantic HTML: <dl><dt>Token</dt><dd>A named design decision.</dd></dl>

Default treatmentUse token-backed description indentation and rhythm while preserving the relationship to preceding dt terms.

AvoidUse outside dl or before its term.

## Description details
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dd (checked 2026-07-23)
Deprecated: no
Purpose: Description or value for preceding term group.
Default: Use token-backed description indentation and rhythm while preserving the relationship to preceding dt terms.
Use: Place inside dl after associated dt.
Avoid: Use outside dl or before its term.
Constraints: Place inside dl after its associated dt group; consecutive dd elements may describe the same term group. Keep indentation logical so right-to-left direction and reflow remain correct.
Accessibility: Preserve source-order association and readable reflow; do not rely on indentation alone to communicate meaning.
Semantic HTML: <dl><dt>Framework</dt><dd>Portable UI preference context.</dd></dl>

Default treatmentKeep native a semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse # or javascript URLs for actions; nest interactive controls.

## Link
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a (checked 2026-07-16)
Deprecated: no
Purpose: Navigation to a real URL or destination.
Default: Keep native a semantics; style with Framework tokens without removing browser fallback behavior.
Use: Provide real href and label destination clearly out of context.
Avoid: Use # or javascript URLs for actions; nest interactive controls.
Constraints: Use a real href destination; no nested interactive content. Link label must describe destination out of context.
Accessibility: Preserve native focus and Enter activation. Announce new-tab or download behavior before activation.
Default variant: default
Variant quiet: Use for lower-emphasis supporting links.
Semantic HTML: <a href="/elements">Browse element guidance</a>

Default treatmentKeep native button semantics; style with Framework tokens without removing browser fallback behavior.

AvoidUse for navigation or omit type inside form.

## Button
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button (checked 2026-07-16)
Deprecated: no
Purpose: Submit or execute an action in current interface.
Default: Keep native button semantics; style with Framework tokens without removing browser fallback behavior.
Use: Set explicit type and accessible name; preserve visible focus.
Avoid: Use for navigation or omit type inside form.
Constraints: Set an explicit type; button submits by default inside forms. Use for actions, not navigation.
Accessibility: Provide an accessible name, including icon-only buttons. Preserve visible focus and native keyboard activation.
Default variant: default
Variant secondary: Use for a valid lower-priority action beside one primary action.
Semantic HTML: <button type="button">Save preference</button>

Default treatmentUse a responsive maximum and token-backed corner radius while preserving intrinsic dimensions and image semantics.

AvoidUse a filename as alt text, omit alt, or omit known intrinsic dimensions.

## Image
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img (checked 2026-07-23)
Deprecated: no
Purpose: Image with meaningful alternative contract.
Default: Use a responsive maximum and token-backed corner radius while preserving intrinsic dimensions and image semantics.
Use: Write purpose-based alt text, use empty alt only for truly decorative images, and provide intrinsic width and height.
Avoid: Use a filename as alt text, omit alt, or omit known intrinsic dimensions.
Constraints: Provide src or srcset and an alt attribute appropriate to the image purpose. Provide width and height when known to reserve aspect ratio and reduce layout shift.
Accessibility: Keep essential information available in text and avoid embedding important text only inside the image.
Semantic HTML: <img width="480" height="240" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Crect width='480' height='240' fill='%232563eb'/%3E%3Ccircle cx='240' cy='120' r='72' fill='%23dbeafe'/%3E%3C/svg%3E" alt="Blue geometric placeholder showing image proportions">

AvoidUse without a final img or place alt text on source.

## Responsive picture
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture (checked 2026-07-23)
Deprecated: no
Purpose: Art direction or format alternatives around one img.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use for art direction or format alternatives with a final img fallback.
Avoid: Use without a final img or place alt text on source.
Constraints: Place zero or more source elements before exactly one final img. Keep media and type conditions truthful and avoid downloading decorative variants without benefit.
Accessibility: Keep equivalent meaning across selected sources; the final img alt contract applies to every visual candidate.
Semantic HTML: <picture><source media="(min-width: 40rem)" srcset="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Crect width='480' height='240' fill='%232563eb'/%3E%3Ccircle cx='240' cy='120' r='72' fill='%23dbeafe'/%3E%3C/svg%3E"><img width="480" height="240" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Crect width='480' height='240' fill='%232563eb'/%3E%3Ccircle cx='240' cy='120' r='72' fill='%23dbeafe'/%3E%3C/svg%3E" alt="Responsive blue geometric placeholder"></picture>

AvoidUse standalone, add alt to source, or omit the final img from picture.

## Media source
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source (checked 2026-07-23)
Deprecated: no
Purpose: Alternative resource for picture, audio, or video.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Place inside a supported media parent and order compatible candidates intentionally.
Avoid: Use standalone, add alt to source, or omit the final img from picture.
Constraints: Use srcset for picture sources and src for audio/video sources. Supply MIME type when it helps the browser skip unsupported resources.
Accessibility: Keep alternatives and fallback content on the owning img, audio, or video element.
Semantic HTML: <picture><source type="image/avif" srcset="image.avif"><img width="480" height="240" src="image.jpg" alt="Product overview"></picture>

Default treatmentUse token-backed logical block rhythm and remove user-agent inline indentation while preserving figure grouping.

AvoidWrap every image regardless of its relationship to surrounding prose.

## Figure
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure (checked 2026-07-23)
Deprecated: no
Purpose: Self-contained media or illustration referenced as one unit.
Default: Use token-backed logical block rhythm and remove user-agent inline indentation while preserving figure grouping.
Use: Use when content and its optional caption form a self-contained unit that can move independently.
Avoid: Wrap every image regardless of its relationship to surrounding prose.
Constraints: Include no more than one figcaption, as the first or last child. Keep media-specific alternatives on the embedded media; figure grouping does not replace them.
Accessibility: Give embedded media its required alternative and keep the figure meaningful as one unit at zoom and reflow.
Semantic HTML: <figure><img width="480" height="240" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Crect width='480' height='240' fill='%23dbeafe'/%3E%3Cpath d='M40 200 L160 140 L280 155 L440 40' stroke='%232563eb' stroke-width='12' fill='none'/%3E%3C/svg%3E" alt="Line chart showing quarterly trend rising overall"><figcaption>Quarterly trend.</figcaption></figure>

Default treatmentUse token-backed caption typography and separation while preserving its figure association.

AvoidAssume figcaption replaces img alt text or other media alternatives.

## Figure caption
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figcaption (checked 2026-07-23)
Deprecated: no
Purpose: Visible caption for its parent figure.
Default: Use token-backed caption typography and separation while preserving its figure association.
Use: Place as the first or last child of figure and describe the figure concisely.
Avoid: Assume figcaption replaces img alt text or other media alternatives.
Constraints: Use no more than one figcaption per figure. Describe the figure as a unit; keep purpose-based alternative text on embedded media.
Accessibility: Keep the caption visible and meaningful without duplicating alternative text mechanically.
Semantic HTML: <figure><img width="480" height="240" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Crect width='480' height='240' fill='%23dbeafe'/%3E%3Cpath d='M40 200 L160 140 L280 155 L440 40' stroke='%232563eb' stroke-width='12' fill='none'/%3E%3C/svg%3E" alt="Line chart showing quarterly trend rising overall"><figcaption>Quarterly trend.</figcaption></figure>

AvoidAutoplay audible media, hide controls without an equivalent, or omit alternative content.

## Audio
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio (checked 2026-07-23)
Deprecated: no
Purpose: Embedded audio playback.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Provide controls, fallback download text, and a transcript for spoken content.
Avoid: Autoplay audible media, hide controls without an equivalent, or omit alternative content.
Constraints: Keep native keyboard, touch, volume, seek, speed, and playback behavior. Do not rely on fallback child content as the transcript for browsers that support audio; provide a separate transcript link.
Accessibility: Keep controls keyboard and touch operable and provide an accurate transcript for speech and meaningful sounds.
Semantic HTML: <audio controls src="interview.mp3">Download the <a href="interview.mp3">audio interview</a>.</audio><a href="transcript.html">Read the transcript</a>

AvoidAutoplay with sound, hide controls without an equivalent, or rely on visuals or audio alone.

## Video
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video (checked 2026-07-23)
Deprecated: no
Purpose: Embedded video playback.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Provide controls, captions, transcript, and audio description when the content requires them.
Avoid: Autoplay with sound, hide controls without an equivalent, or rely on visuals or audio alone.
Constraints: Keep native keyboard, touch, seek, volume, speed, full-screen, and picture-in-picture behavior. Provide width and height to reserve aspect ratio when known.
Accessibility: Provide reviewed synchronized captions, audio description for otherwise unavailable visuals, and a transcript for durable access.
Semantic HTML: <video controls width="480" height="270" poster="preview.jpg" src="overview.mp4"><track default kind="captions" srclang="en" label="English" src="captions.vtt">Download the <a href="overview.mp4">video overview</a>.</video><a href="transcript.html">Read the transcript</a>

AvoidTreat auto-generated captions as unreviewed final copy or mark multiple tracks default.

## Timed text track
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/track (checked 2026-07-23)
Deprecated: no
Purpose: Captions, subtitles, descriptions, chapters, or metadata for media.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Declare kind, src, language, and label accurately; provide reviewed captions for spoken video.
Avoid: Treat auto-generated captions as unreviewed final copy or mark multiple tracks default.
Constraints: Use valid WebVTT and at most one default track per media element. Distinguish captions from subtitles and descriptions according to their actual content.
Accessibility: Synchronize captions, include meaningful non-speech audio, and verify selection and display in target browsers.
Semantic HTML: <video controls src="overview.mp4"><track default kind="captions" srclang="en" label="English" src="captions.vtt">Download the <a href="overview.mp4">video overview</a>.</video>

Default treatmentUse token-backed table typography and logical block rhythm while preserving native table layout and relationships.

AvoidUse table for page layout or convert table descendants to generic display boxes for small screens.

## Table
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table (checked 2026-07-23)
Deprecated: no
Purpose: Two-dimensional data with row and column relationships.
Default: Use token-backed table typography and logical block rhythm while preserving native table layout and relationships.
Use: Use for real two-dimensional data with a concise caption and structural header cells.
Avoid: Use table for page layout or convert table descendants to generic display boxes for small screens.
Constraints: Provide caption, real header cells, and meaningful row groups. Place wide tables in an authored overflow wrapper or higher-layer responsive composition; Element CSS does not own that wrapper.
Accessibility: Preserve table semantics, reading order, caption, scope, and headers relationships at zoom and narrow reflow.
Semantic HTML: <table><caption>Token status</caption><thead><tr><th scope="col">Token</th><th scope="col">Status</th></tr></thead><tbody><tr><td>Color</td><td>Supported</td></tr></tbody></table>

Default treatmentUse token-backed caption type emphasis and block padding while preserving its native table association.

AvoidReplace with visually nearby text that lacks the programmatic table association.

## Table caption
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/caption (checked 2026-07-23)
Deprecated: no
Purpose: Accessible title or description for a table.
Default: Use token-backed caption type emphasis and block padding while preserving its native table association.
Use: Place as the first child of table and describe the table's purpose concisely.
Avoid: Replace with visually nearby text that lacks the programmatic table association.
Constraints: Use one caption per table and keep it specific enough to help a reader decide whether to inspect the data.
Accessibility: Keep the caption visible and meaningful; do not hide the table's accessible name in surrounding prose.
Semantic HTML: <table><caption>Framework tokens</caption><tbody><tr><th scope="row">Color</th><td>OKLCH</td></tr></tbody></table>

AvoidUse only as a styling hook or place ordinary data rows in the head group.

## Table head
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/thead (checked 2026-07-23)
Deprecated: no
Purpose: Group of table header rows.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Group rows that contain the table's column headings.
Avoid: Use only as a styling hook or place ordinary data rows in the head group.
Constraints: Place after caption and colgroup and before body or foot row groups. Keep each row composed of th and td cells with truthful header relationships.
Accessibility: Use th cells and appropriate scope or headers relationships; thead alone does not create headers.
Semantic HTML: <table><thead><tr><th scope="col">Element</th><th scope="col">Status</th></tr></thead><tbody><tr><td>button</td><td>Supported</td></tr></tbody></table>

AvoidSplit rows arbitrarily for appearance or rely on table > tr selectors.

## Table body
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tbody (checked 2026-07-23)
Deprecated: no
Purpose: Primary row group in a table.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Group related primary data rows, using consecutive groups when the data has meaningful sections.
Avoid: Split rows arbitrarily for appearance or rely on table > tr selectors.
Constraints: Place after caption, colgroup, and thead and before tfoot. Keep rows and cell spans structurally valid.
Accessibility: Preserve source order and header relationships across every body group.
Semantic HTML: <table><tbody><tr><th scope="row">button</th><td>Supported</td></tr></tbody></table>

AvoidUse for unrelated notes or generic footer content.

## Table foot
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tfoot (checked 2026-07-23)
Deprecated: no
Purpose: Summary or footer row group.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use for totals or stable column summaries after the table body.
Avoid: Use for unrelated notes or generic footer content.
Constraints: Place after caption, colgroup, thead, and tbody groups. Keep summary cells associated with the correct row or column headers.
Accessibility: Use th and scope where a summary label heads related values; preserve relationships in print and reflow.
Semantic HTML: <table><tbody><tr><td>Reviewed</td><td>15</td></tr></tbody><tfoot><tr><th scope="row">Total</th><td>15</td></tr></tfoot></table>

AvoidPlace outside table structure, mix direct rows with an authored tbody, or use as a flex or grid layout row.

## Table row
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tr (checked 2026-07-23)
Deprecated: no
Purpose: Row of cells in a table.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Prefer an explicit row group; use direct table rows only in the valid no-tbody sequence.
Avoid: Place outside table structure, mix direct rows with an authored tbody, or use as a flex or grid layout row.
Constraints: Keep cell count and spans compatible with the table structure. Account for the browser-inserted tbody when selecting direct authored rows; do not replace native table-row display.
Accessibility: Preserve cell source order and header associations across every row.
Semantic HTML: <table><tbody><tr><th scope="row">Status</th><td>Supported</td></tr></tbody></table>

Default treatmentUse token-backed header emphasis and cell padding while preserving native table-cell relationships.

AvoidUse a bold td as a semantic substitute or use th for ordinary data.

## Table header cell
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/th (checked 2026-07-23)
Deprecated: no
Purpose: Header for a row, column, or group of cells.
Default: Use token-backed header emphasis and cell padding while preserving native table-cell relationships.
Use: Use for a row, column, row-group, or column-group header and set scope when the relationship benefits from explicitness.
Avoid: Use a bold td as a semantic substitute or use th for ordinary data.
Constraints: Set scope for row, col, rowgroup, or colgroup relationships when useful. Use id and headers for complex tables where scope cannot express the relationship.
Accessibility: Keep header text concise and ensure each related data cell has an unambiguous programmatic association.
Semantic HTML: <table><tbody><tr><th scope="row">Color</th><td>Supported</td></tr></tbody></table>

Default treatmentUse token-backed cell padding while preserving native table layout and header relationships.

AvoidUse outside tr or use td for row and column headers.

## Table data cell
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/td (checked 2026-07-23)
Deprecated: no
Purpose: Data cell within a table row.
Default: Use token-backed cell padding while preserving native table layout and header relationships.
Use: Use for ordinary data inside tr and keep its header relationship clear.
Avoid: Use outside tr or use td for row and column headers.
Constraints: Keep colspan and rowspan structurally valid and non-overlapping. Use headers when a complex table cannot express associations through scope.
Accessibility: Ensure every data cell remains associated with its relevant headers at zoom and narrow reflow.
Semantic HTML: <table><tbody><tr><th scope="row">Status</th><td>Draft</td></tr></tbody></table>

AvoidUse for dates, times, or durations; use time instead.

## Machine-readable data
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/data (checked 2026-07-23)
Deprecated: no
Purpose: Visible value paired with machine-readable value.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Provide a value attribute that accurately translates the visible content.
Avoid: Use for dates, times, or durations; use time instead.
Constraints: Keep the machine value stable and meaningful to the consuming system. Do not reveal identifiers with generated content as the only human explanation.
Accessibility: Keep visible content understandable without machine parsing.
Semantic HTML: <data value="sku-1042">Framework starter</data>

AvoidUse as a task progress indicator or decorative rating bar.

## Scalar measurement
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter (checked 2026-07-23)
Deprecated: no
Purpose: Known scalar value within a bounded range.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use for a bounded measurement with a visible label and truthful thresholds.
Avoid: Use as a task progress indicator or decorative rating bar.
Constraints: Keep min ≤ low ≤ high ≤ max, keep optimum within min and max, and place optimum in the domain's genuinely preferred range; lower, middle, or higher values may be best. Do not replace the native gauge without equivalent semantics, high-contrast behavior, and value-state communication.
Accessibility: Associate a visible label, keep fallback text meaningful, and never rely on color alone for low, high, or optimum state.
Semantic HTML: <label for="review-meter">Accessibility review</label><meter id="review-meter" min="0" max="100" low="60" high="85" optimum="100" value="82">82%</meter>

AvoidUse as a generic meter, rating, decorative bar, or fake indeterminate state with value=0.

## Progress
Treatment version: 0.1.0
Reference state: Draft
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress (checked 2026-07-23)
Deprecated: no
Visual treatment: Native Fallback; excluded from ordinary CSS and visual Context guidance.
Purpose: Completion progress for a task.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use for task completion with a visible label; omit value for an indeterminate state.
Avoid: Use as a generic meter, rating, decorative bar, or fake indeterminate state with value=0.
Constraints: Keep max greater than zero and determinate value within range. Remove the value attribute, rather than setting an empty or zero value, to switch to indeterminate.
Accessibility: Associate a visible label and describe important progress updates without relying on the bar alone.
Semantic HTML: <label for="export-progress">Export progress</label><progress id="export-progress" max="100" value="68">68%</progress>

AvoidNest forms, disable native validation without an equivalent, or use form as a styling wrapper.

## Form
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form (checked 2026-07-23)
Deprecated: no
Purpose: Controls that submit or process related user data.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use meaningful action and method values with logical control grouping.
Avoid: Nest forms, disable native validation without an equivalent, or use form as a styling wrapper.
Constraints: Do not nest form elements. Use GET for retrieval and POST for state-changing submission unless the target protocol requires otherwise. Keep form layout outside Element Treatment CSS.
Accessibility: Give every control an accessible name and preserve native validation and submission behavior. Ensure errors are associated with their controls and remain perceivable without color alone.
Semantic HTML: <form action="/subscribe" method="post"><label for="subscriber-email">Email address</label><input id="subscriber-email" name="email" type="email" autocomplete="email" required><button type="submit">Subscribe</button></form>

Default treatmentUse the body family at the small type token with semibold emphasis and comfortable line height. Preserve native inline behavior so layout remains contextual.

AvoidUse placeholder text as a label or place unrelated interactive content inside.

## Label
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label (checked 2026-07-23)
Deprecated: no
Purpose: Accessible label for a form control.
Default: Use the body family at the small type token with semibold emphasis and comfortable line height. Preserve native inline behavior so layout remains contextual.
Use: Associate explicitly with matching for/id values or wrap one labelable control.
Avoid: Use placeholder text as a label or place unrelated interactive content inside.
Constraints: Associate label explicitly with a unique control id or wrap the control. Do not use placeholder text as the label.
Accessibility: Keep labels visible and descriptive; avoid unrelated interactive content inside.
Semantic HTML: <label for="email">Email address</label><input id="email" type="email">

Default treatmentFor an input with no type attribute, use the shared text-field surface, readable body type, padded minimum touch size, semantic boundary, and token-backed focus outline. Leave invalid, disabled, and read-only states native.

AvoidUse text for every input or remove native focus.

## Input
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input (checked 2026-07-23)
Deprecated: no
Purpose: Native single-value form control selected by type.
Default: For an input with no type attribute, use the shared text-field surface, readable body type, padded minimum touch size, semantic boundary, and token-backed focus outline. Leave invalid, disabled, and read-only states native.
Use: Choose an explicit type, name, autocomplete value, and programmatic label; omitted type is treated as text.
Avoid: Use text for every input or remove native focus.
Constraints: Choose a type matching the data; provide name and autocomplete where meaningful. Validation must also run on the server.
Accessibility: Every visible input needs a programmatic label and associated error/help text when needed. Preserve native invalid, disabled, and read-only presentation, focus, keyboard editing, zoom, and reflow.
Semantic HTML: <label for="default-name">Name</label><input id="default-name" name="name" autocomplete="name">

Default treatmentUse the shared text-field surface with an eight-rem minimum block size and a token-backed focus outline. Leave invalid, disabled, and read-only states native; preserve multi-line editing, wrapping, scrolling, and resizing.

AvoidUse a value attribute for initial content, disable resizing without need, or replace native editing.

## Textarea
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea (checked 2026-07-23)
Deprecated: no
Purpose: Multi-line plain-text input.
Default: Use the shared text-field surface with an eight-rem minimum block size and a token-backed focus outline. Leave invalid, disabled, and read-only states native; preserve multi-line editing, wrapping, scrolling, and resizing.
Use: Provide a label, name, rows, and expected format or length guidance.
Avoid: Use a value attribute for initial content, disable resizing without need, or replace native editing.
Constraints: Initial content belongs between the opening and closing tags. Use rows and cols as intrinsic hints; allow the field to reflow within its container. Preserve disabled, readonly, maxlength, and required behavior.
Accessibility: Associate a visible label and error/help text. Preserve keyboard selection, scrolling, zoom, and native resize behavior.
Semantic HTML: <label for="message">Message</label><textarea id="message" name="message" rows="5"></textarea>

Default treatmentFor a collapsed single-select without size or multiple, use the shared form-control surface, body type, padded touch size, semantic boundary, and inset focus outline. Keep the native picker arrow and menu; disabled, invalid, listbox, and multi-select states remain native.

AvoidRemove native appearance or replace the picker without equivalent keyboard, touch, and assistive-technology behavior.

## Select
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select (checked 2026-07-23)
Deprecated: no
Purpose: Native single-choice or multi-choice option control.
Default: For a collapsed single-select without size or multiple, use the shared form-control surface, body type, padded touch size, semantic boundary, and inset focus outline. Keep the native picker arrow and menu; disabled, invalid, listbox, and multi-select states remain native.
Use: Provide a visible label; group long option sets with labeled optgroup entries when useful.
Avoid: Remove native appearance or replace the picker without equivalent keyboard, touch, and assistive-technology behavior.
Constraints: Use for constrained choices with concise labels and truthful values. Keep multiple or size-based listboxes native; their interaction and layout differ materially from a collapsed select.
Accessibility: Associate a visible label and specific validation message. Preserve selected value, disabled and invalid states, native keyboard navigation, picker behavior, zoom, and reflow.
Semantic HTML: <label for="intent">Intent</label><select id="intent" name="intent"><option value="">Choose an intent</option><option value="browse">Browse</option><option value="act">Act</option></select>

AvoidNest optgroup or make it selectable.

## Option group
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup (checked 2026-07-23)
Deprecated: no
Purpose: Labeled group of related options.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use label and place within select.
Avoid: Nest optgroup or make it selectable.
Constraints: Use a required concise label and place only option children inside a traditional select. Never nest optgroup elements or treat the group label as a selectable value.
Accessibility: Preserve the native group relationship and disabled-group behavior; do not add a redundant or conflicting ARIA role.
Semantic HTML: <select aria-label="Element"><optgroup label="Actions"><option value="link">Link</option><option value="button">Button</option></optgroup></select>

AvoidPut arbitrary interactive content inside.

## Option
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option (checked 2026-07-23)
Deprecated: no
Purpose: Selectable choice within select, optgroup, or datalist.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use clear concise label and value.
Avoid: Put arbitrary interactive content inside.
Constraints: Use a truthful value and concise text label; only one initial selected option belongs in a single-select. Do not put nested interactive controls or presentation-only markup in a traditional option.
Accessibility: Preserve native selected and disabled state announcements and the owning control's keyboard navigation.
Semantic HTML: <select aria-label="Status"><option value="draft">Draft</option><option value="active">Active</option></select>

Default treatmentUse a one-pixel semantic border, medium radius, and balanced logical padding and block margins to make related controls visibly coherent without defining their internal layout.

AvoidUse only for a decorative border or replace grouping semantics with a generic container.

## Fieldset
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset (checked 2026-07-23)
Deprecated: no
Purpose: Group of related form controls.
Default: Use a one-pixel semantic border, medium radius, and balanced logical padding and block margins to make related controls visibly coherent without defining their internal layout.
Use: Group related controls and place a descriptive legend first.
Avoid: Use only for a decorative border or replace grouping semantics with a generic container.
Constraints: Use the first legend as the group caption. Keep internal control arrangement in component composition. Preserve the disabled attribute's native group behavior.
Accessibility: Keep the legend meaningful so assistive technology announces shared context. Do not override disabled descendants or remove their native behavior.
Semantic HTML: <fieldset><legend>Preferred format</legend><label><input type="radio" name="format" value="html"> HTML</label><label><input type="radio" name="format" value="react"> React</label></fieldset>

Default treatmentUse the body family at the base size with bold emphasis, compact line height, and small logical inline padding.

AvoidUse outside a fieldset or as a decorative heading without grouped controls.

## Legend
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/legend (checked 2026-07-23)
Deprecated: no
Purpose: Caption for a fieldset group.
Default: Use the body family at the base size with bold emphasis, compact line height, and small logical inline padding.
Use: Make the first child of fieldset and describe the shared question or group.
Avoid: Use outside a fieldset or as a decorative heading without grouped controls.
Constraints: Keep the caption concise and specific to every control in the fieldset. Do not replace the legend with visual text outside the fieldset.
Accessibility: Preserve the legend as the programmatic group name. Keep text readable at zoom without clipping or forced single-line layout.
Semantic HTML: <fieldset><legend>Notification method</legend><label><input type="checkbox" name="email"> Email</label></fieldset>

AvoidUse as required select replacement; support remains limited.

## Datalist
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: limited-availability via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist (checked 2026-07-23)
Deprecated: no
Purpose: Suggested values for a compatible input.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Treat as enhancement with typed-input fallback; test browser/AT support.
Avoid: Use as required select replacement; support remains limited.
Constraints: Match the input list attribute to a unique datalist id and provide option values as suggestions. Do not imply that suggestions constrain the submitted value; validate the associated input separately.
Accessibility: Retain a labeled editable input and test zoom, high contrast, keyboard selection, and screen-reader announcements in the target support matrix.
Semantic HTML: <label for="browser">Browser</label><input id="browser" name="browser" list="browser-options"><datalist id="browser-options"><option value="Firefox"></option><option value="Vivaldi"></option></datalist>

Default treatmentUse the body family at the base size with bold emphasis and readable line height so a calculated result is distinct without changing its native status semantics.

AvoidUse for static text, assume its value is submitted, or add an unnecessary competing live region.

## Output
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/output (checked 2026-07-23)
Deprecated: no
Purpose: Result of a calculation or user action.
Default: Use the body family at the base size with bold emphasis and readable line height so a calculated result is distinct without changing its native status semantics.
Use: Use for the result of a calculation or user action and associate contributing controls with for.
Avoid: Use for static text, assume its value is submitted, or add an unnecessary competing live region.
Constraints: The for attribute lists the ids of contributing controls when applicable. Do not rely on output content as submitted form data. Update only when the represented result changes.
Accessibility: Preserve the native status semantics and avoid forcing focus to routine updates. Use an explicit accessible name when surrounding context does not identify the result.
Semantic HTML: <form><label for="quantity">Quantity</label><input id="quantity" type="number" value="2"> <output name="total" for="quantity">€24.00</output></form>

Default treatmentUse a semantic surface, one-pixel boundary, token radius, logical padding, and block rhythm without changing native disclosure state or marker behavior.

AvoidAdd custom keyboard handlers or scripted state already supplied by the native element.

## Details
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details (checked 2026-07-23)
Deprecated: no
Purpose: Expandable disclosure with a visible native summary and browser-owned open state.
Default: Use a semantic surface, one-pixel boundary, token radius, logical padding, and block rhythm without changing native disclosure state or marker behavior.
Use: Place summary first and use a clear label that remains accurate whether content is open or closed.
Avoid: Add custom keyboard handlers or scripted state already supplied by the native element.
Constraints: Use summary as the first child with a clear state-independent label. Treat the open attribute as boolean: its presence means open. Do not alter display, overflow, generated content, or the native marker.
Accessibility: Preserve native focus, Enter, and Space behavior; Escape-to-close is not required. Keep disclosure content understandable with the summary alone before activation.
Semantic HTML: <details><summary>Review guidance</summary><p>Disclosure content.</p></details>

Default treatmentUse stronger type, compact logical padding, and token-backed focus indication while preserving the browser marker and list-item behavior.

AvoidUse outside details as a generic heading or replace its native marker with generated content.

## Summary
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary (checked 2026-07-23)
Deprecated: no
Purpose: Visible, interactive label that toggles its parent details disclosure.
Default: Use stronger type, compact logical padding, and token-backed focus indication while preserving the browser marker and list-item behavior.
Use: Place as the first child of details and keep its label accurate in both open and closed states.
Avoid: Use outside details as a generic heading or replace its native marker with generated content.
Constraints: Keep summary as the first child of details. Preserve the native marker, display behavior, focusability, and keyboard activation. Do not add duplicate click or keyboard handlers.
Accessibility: Keep the focus-visible outline unobscured. Preserve native Enter and Space activation across keyboard and touch input.
Semantic HTML: <details><summary>Review guidance</summary><p>Disclosure content.</p></details>

Default treatmentUse semantic text and surface colors, a one-pixel boundary, large token radius and padding, and a readable maximum inline size without styling the backdrop or controlling visibility.

AvoidUse a generic element with role=dialog when native dialog works, or build a manual focus trap.

## Dialog
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog (checked 2026-07-23)
Deprecated: no
Purpose: Modal or non-modal dialog with browser-owned top-layer, modality, focus, and dismissal behavior.
Default: Use semantic text and surface colors, a one-pixel boundary, large token radius and padding, and a readable maximum inline size without styling the backdrop or controlling visibility.
Use: Use showModal() for modal interactions; use show() or the open attribute only when interaction must remain non-modal.
Avoid: Use a generic element with role=dialog when native dialog works, or build a manual focus trap.
Constraints: Use showModal() for modal behavior and include a visible close action. The open specimen is intentionally non-modal so its CSS remains visible in the reference. Do not add tabindex to dialog. Do not set display, position, visibility, or pointer behavior in the Element Treatment.
Accessibility: Choose initial focus deliberately, preserve native Escape for modal dialogs, and restore focus to the invoker when the dialog closes. Keep the visible close action reachable by keyboard and touch. The native backdrop remains unstyled; if a product customizes it later, verify sufficient distinction and contrast against surrounding content.
Semantic HTML: <dialog open aria-labelledby="promotion-title"><h2 id="promotion-title">Confirm Promotion</h2><form method="dialog"><button value="cancel">Cancel</button><button value="confirm">Promote</button></form></dialog>

Default treatmentUse the shared text-field surface, readable body type, padded minimum touch size, semantic boundary, and token-backed focus outline. Preserve native single-line editing.

AvoidUse when a specialized input type communicates intent better.

## Input: text
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/text (checked 2026-07-23)
Deprecated: no
Purpose: Single-line plain text.
Default: Use the shared text-field surface, readable body type, padded minimum touch size, semantic boundary, and token-backed focus outline. Preserve native single-line editing.
Use: Use for unconstrained short text; choose a specific autocomplete or inputmode value when it improves entry.
Avoid: Use when a specialized input type communicates intent better.
Constraints: Use for short unconstrained text only; use a specialized subtype when it communicates the expected value.
Accessibility: Apply shared input naming, error, state, keyboard, zoom, reflow, and focus requirements; retain single-line editing and selection.
Semantic HTML: <label for="profile-name">Name</label><input id="profile-name" name="name" type="text" autocomplete="name">

Default treatmentUse the shared text-field surface and focus outline while preserving the email keyboard, syntax validation, multiple-value behavior, and autofill.

AvoidAssume browser validation proves deliverability.

## Input: email
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/email (checked 2026-07-23)
Deprecated: no
Purpose: Email address.
Default: Use the shared text-field surface and focus outline while preserving the email keyboard, syntax validation, multiple-value behavior, and autofill.
Use: Use email type, autocomplete=email, and server validation.
Avoid: Assume browser validation proves deliverability.
Constraints: Use autocomplete="email" when collecting the person's email address. Use multiple only when the field genuinely accepts a list. Browser syntax validation never proves ownership or deliverability; validate on the server.
Accessibility: Apply shared input naming, error, state, keyboard, zoom, reflow, and focus requirements; retain the email keyboard, autofill, and syntax validation.
Semantic HTML: <label for="account-email">Email address</label><input id="account-email" name="email" type="email" autocomplete="email">

Default treatmentUse the shared text-field surface and focus outline while preserving the telephone keypad hint and native text editing.

AvoidUse number type for phone numbers.

## Input: tel
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/tel (checked 2026-07-23)
Deprecated: no
Purpose: Telephone number.
Default: Use the shared text-field surface and focus outline while preserving the telephone keypad hint and native text editing.
Use: Use tel type and autocomplete=tel; describe accepted format.
Avoid: Use number type for phone numbers.
Constraints: Use autocomplete="tel" for the person's telephone number. Describe the accepted format and use pattern only when the format is genuinely constrained. Do not assume built-in telephone-format validation; formats vary internationally.
Accessibility: Apply shared input naming, error, state, keyboard, zoom, reflow, and focus requirements; retain the telephone keypad hint without inventing universal format validation.
Semantic HTML: <label for="phone">Telephone number</label><input id="phone" name="phone" type="tel" autocomplete="tel">

Default treatmentUse the shared text-field surface and focus outline while preserving the URL keyboard and native absolute-URL syntax validation.

AvoidUse for free-form text.

## Input: url
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/url (checked 2026-07-23)
Deprecated: no
Purpose: Web address.
Default: Use the shared text-field surface and focus outline while preserving the URL keyboard and native absolute-URL syntax validation.
Use: Use url type for absolute URLs and clarify expected format.
Avoid: Use for free-form text.
Constraints: Use for absolute URLs and explain any required scheme or domain restriction. Use autocomplete="url" when collecting the person's website. Validate business rules and reachability separately from browser syntax validation.
Accessibility: Apply shared input naming, error, state, keyboard, zoom, reflow, and focus requirements; retain the URL keyboard, autofill, and native syntax validation.
Semantic HTML: <label for="website">Website</label><input id="website" name="website" type="url" autocomplete="url">

Default treatmentUse the shared text-field surface and focus outline while retaining the user agent's search affordances, clear control, and search keyboard hint.

AvoidTreat as results container.

## Input: search
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/search (checked 2026-07-23)
Deprecated: no
Purpose: Search query.
Default: Use the shared text-field surface and focus outline while retaining the user agent's search affordances, clear control, and search keyboard hint.
Use: Use search type inside a labeled search form.
Avoid: Treat as results container.
Constraints: Use inside a labeled search landmark or form when it performs search. Keep the native clear affordance and line-break stripping behavior. Choose autocomplete according to the search domain rather than disabling it reflexively.
Accessibility: Apply shared input naming, error, state, keyboard, zoom, reflow, and focus requirements; retain the search keyboard hint and clear affordance.
Semantic HTML: <search><form><label for="site-query">Search</label><input id="site-query" name="q" type="search" autocomplete="off"></form></search>

Default treatmentUse the shared text-field surface and focus outline while preserving native obscuring, password-manager integration, secure-context warnings, paste, and editing.

AvoidDisable paste or expose value without intentional control.

## Input: password
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/password (checked 2026-07-23)
Deprecated: no
Purpose: Password.
Default: Use the shared text-field surface and focus outline while preserving native obscuring, password-manager integration, secure-context warnings, paste, and editing.
Use: Use current-password or new-password autocomplete as appropriate.
Avoid: Disable paste or expose value without intentional control.
Constraints: Use autocomplete="current-password" or autocomplete="new-password" according to the task. Do not disable paste or password-manager autofill. Any reveal control is a separate labeled button and must not change the submitted name/value contract.
Accessibility: Apply shared input naming, error, state, keyboard, zoom, reflow, and focus requirements; retain obscuring, paste, password-manager, autofill, and secure-context behavior.
Semantic HTML: <label for="current-password">Password</label><input id="current-password" name="password" type="password" autocomplete="current-password">

Default treatmentUse the shared form-control surface, body type, padded touch size, semantic boundary, and inset focus outline. Preserve the native spinbutton, stepper controls, validation, and numeric keyboard behavior.

AvoidUse for credit cards, postal codes, phone numbers, identifiers, or any value where accidental spinbutton changes are unacceptable.

## Input: number
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number (checked 2026-07-23)
Deprecated: no
Purpose: Numeric value with stepper semantics.
Default: Use the shared form-control surface, body type, padded touch size, semantic boundary, and inset focus outline. Preserve the native spinbutton, stepper controls, validation, and numeric keyboard behavior.
Use: Use for quantities where increment and decrement are meaningful.
Avoid: Use for credit cards, postal codes, phone numbers, identifiers, or any value where accidental spinbutton changes are unacceptable.
Constraints: Set min, max, and step from domain rules; validate again on the server. Do not remove native stepper controls or replace spinbutton semantics.
Accessibility: Associate a visible label and specific validation message. Preserve native spinbutton keyboard behavior and consider text plus inputmode when incrementing is not useful.
Semantic HTML: <label for="ticket-count">Ticket count</label><input id="ticket-count" name="ticket-count" type="number" min="0" max="20" step="1" value="2">

AvoidUse when exact typed value is required.

## Input: range
Treatment version: 0.1.0
Reference state: Draft
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range (checked 2026-07-23)
Deprecated: no
Visual treatment: Native Fallback; excluded from ordinary CSS and visual Context guidance.
Purpose: Approximate numeric value.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Provide accessible label and visible current value when precision matters.
Avoid: Use when exact typed value is required.
Constraints: Set min, max, and step from domain rules and keep the native track and thumb. If showing the current value separately, update that text on every input event; do not ship a static output that becomes stale. Do not use appearance replacement or pseudo-element styling as a portable base Treatment.
Accessibility: Associate a visible label and expose the current value when its exact value matters. Preserve arrow-key, touch, focus, disabled, and constraint behavior.
Semantic HTML: <label for="volume">Volume</label><input id="volume" name="volume" type="range" min="0" max="100" step="5" value="50">

Default treatmentUse the shared form-control surface, readable body type, semantic boundary, logical padding, and inset focus outline. Preserve the platform date picker, min, max, step, locale display, normalized value, validation, keyboard, and touch behavior.

AvoidAssume locale display format equals submitted value.

## Input: date
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date (checked 2026-07-23)
Deprecated: no
Purpose: Calendar date.
Default: Use the shared form-control surface, readable body type, semantic boundary, logical padding, and inset focus outline. Preserve the platform date picker, min, max, step, locale display, normalized value, validation, keyboard, and touch behavior.
Use: Provide visible label and robust server-side parsing.
Avoid: Assume locale display format equals submitted value.
Constraints: Store and validate the normalized yyyy-mm-dd value independently of the localized display. Do not replace the native picker without equivalent keyboard, touch, zoom, and assistive-technology support.
Accessibility: Associate a visible label and explain meaningful date bounds. Preserve native focus, picker, validation, and error messaging behavior.
Semantic HTML: <label for="start-date">Start date</label><input id="start-date" name="start-date" type="date" min="2026-01-01" max="2026-12-31">

Default treatmentUse the shared form-control surface, readable body type, semantic boundary, logical padding, and inset focus outline. Preserve the platform time editor, picker, min, max, step, locale display, normalized value, validation, keyboard, and touch behavior.

AvoidUse for durations.

## Input: time
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/time (checked 2026-07-23)
Deprecated: no
Purpose: Time of day.
Default: Use the shared form-control surface, readable body type, semantic boundary, logical padding, and inset focus outline. Preserve the platform time editor, picker, min, max, step, locale display, normalized value, validation, keyboard, and touch behavior.
Use: Clarify timezone or locale context when relevant.
Avoid: Use for durations.
Constraints: Treat the submitted value as a normalized time string and state timezone context separately when relevant. Do not replace the platform control without equivalent periodic min/max, keyboard, touch, and validation behavior.
Accessibility: Associate a visible label and explain allowed times. Preserve native focus, segmented editing, picker, and constraint feedback.
Semantic HTML: <label for="appointment-time">Appointment time</label><input id="appointment-time" name="appointment-time" type="time" min="09:00" max="18:00" step="900">

Default treatmentUse the shared form-control surface, readable body type, semantic boundary, logical padding, and inset focus outline. Preserve the platform picker, locale display, normalized value, min, max, step, validation, keyboard, and touch behavior.

AvoidRepresent a global instant without timezone guidance.

## Input: datetime-local
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local (checked 2026-07-23)
Deprecated: no
Purpose: Local date and time.
Default: Use the shared form-control surface, readable body type, semantic boundary, logical padding, and inset focus outline. Preserve the platform picker, locale display, normalized value, min, max, step, validation, keyboard, and touch behavior.
Use: Use only when timezone is intentionally absent.
Avoid: Represent a global instant without timezone guidance.
Constraints: Treat the submitted YYYY-MM-DDTHH:mm value as timezone-free and collect timezone separately when the domain needs an instant. Do not replace the picker or assume every browser enforces step and bounds identically.
Accessibility: Associate a visible label and explain date, time, and timezone context. Preserve native focus, picker, segmented editing, constraints, and error behavior.
Semantic HTML: <label for="meeting-time">Meeting date and time</label><input id="meeting-time" name="meeting-time" type="datetime-local" min="2026-01-01T09:00" max="2026-12-31T18:00" step="900">

AvoidUse when exact day is required.

## Input: month
Treatment version: 0.1.0
Reference state: Draft
MDN Baseline: limited-availability via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/month (checked 2026-07-23)
Deprecated: no
Visual treatment: Native Fallback; excluded from ordinary CSS and visual Context guidance.
Purpose: Month and year.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use for month-granularity values and provide fallback expectations.
Avoid: Use when exact day is required.
Constraints: Validate YYYY-MM on the server and supply input-format guidance for text fallbacks. Do not assume a picker exists or replace native supported behavior.
Accessibility: Associate a visible label and describe the required month-year format when fallback text entry may appear. Test keyboard, touch, zoom, validation, and assistive technology in the target browser matrix.
Semantic HTML: <label for="billing-month">Billing month</label><input id="billing-month" name="billing-month" type="month" min="2026-01" max="2026-12">

AvoidAssume all locales share week conventions.

## Input: week
Treatment version: 0.1.0
Reference state: Draft
MDN Baseline: limited-availability via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/week (checked 2026-07-23)
Deprecated: no
Visual treatment: Native Fallback; excluded from ordinary CSS and visual Context guidance.
Purpose: Week and year.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use only when week numbering matches domain needs.
Avoid: Assume all locales share week conventions.
Constraints: State the intended ISO week convention and validate the normalized value on the server. Provide format guidance for text fallbacks and do not assume a picker exists.
Accessibility: Associate a visible label and explain the week-number convention. Test keyboard, touch, zoom, validation, fallback entry, and assistive technology in the target browser matrix.
Semantic HTML: <label for="delivery-week">Delivery week</label><input id="delivery-week" name="delivery-week" type="week" min="2026-W01" max="2026-W52">

AvoidUse radio when exactly one option is allowed.

## Input: checkbox
Treatment version: 0.1.0
Reference state: Draft
MDN Baseline: unknown/not-applicable via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox (checked 2026-07-23)
Baseline note: The exact MDN page has no overall Baseline badge because it also documents the experimental switch attribute; native checkbox behavior remains required.
Deprecated: no
Visual treatment: Native Fallback; excluded from ordinary CSS and visual Context guidance.
Purpose: Independent boolean or multi-select choice.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use checked state with visible label; group related choices.
Avoid: Use radio when exactly one option is allowed.
Constraints: Unchecked checkboxes submit no name/value pair; handle that contract deliberately. Use the same name for related multi-select values and distinct truthful values.
Accessibility: Associate a visible label so its text expands the hit area; group related choices with fieldset and legend. Preserve Space activation, checked and indeterminate announcements, validation, and native focus.
Semantic HTML: <label><input name="updates" type="checkbox" value="email"> Email updates</label>

AvoidRender isolated unlabeled radio buttons.

## Input: radio
Treatment version: 0.1.0
Reference state: Draft
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/radio (checked 2026-07-23)
Deprecated: no
Visual treatment: Native Fallback; excluded from ordinary CSS and visual Context guidance.
Purpose: One choice from a set.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Share name, group in fieldset, and provide legend.
Avoid: Render isolated unlabeled radio buttons.
Constraints: Every radio in one choice set shares a name and has a distinct truthful value. Use fieldset and legend when the group needs a shared question or instruction.
Accessibility: Associate every radio with a visible label and preserve arrow-key group navigation, Space selection, validation, disabled state, and native focus.
Semantic HTML: <fieldset><legend>Contact method</legend><label><input name="contact" type="radio" value="email"> Email</label><label><input name="contact" type="radio" value="phone"> Phone</label></fieldset>

AvoidRely only on accept for security validation.

## Input: file
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file (checked 2026-07-23)
Deprecated: no
Purpose: File upload.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: State accepted formats and size; validate on server.
Avoid: Rely only on accept for security validation.
Constraints: Treat accept as a picker hint, not validation, and use multipart/form-data for uploads. Never script a local path or hide the native control in a way that removes focus or assistive-technology access.
Accessibility: Associate a visible label and visible format or size instructions. Preserve selected filenames, cancellation, keyboard, touch, focus, error, and high-contrast behavior.
Semantic HTML: <label for="profile-image">Profile image</label><input id="profile-image" name="profile-image" type="file" accept="image/png,image/jpeg" aria-describedby="profile-image-help"><p id="profile-image-help">PNG or JPEG. Maximum 5 MB.</p>

AvoidUse as sole accessible representation of chosen color.

## Input: color
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: unknown/not-applicable via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/color (checked 2026-07-23)
Baseline note: Exact MDN page has no overall Baseline badge; recheck before compatibility-dependent Promotion.
Deprecated: no
Purpose: Color value.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use when native color selection is acceptable and provide textual value where needed.
Avoid: Use as sole accessible representation of chosen color.
Constraints: Provide a textual color value or equivalent name and validate the submitted color format; if showing the live value, update it on every input event. Do not replace the native swatch and picker without equivalent keyboard, touch, zoom, high-contrast, and assistive-technology behavior.
Accessibility: Associate a visible label and never communicate the choice by color alone. Test platform picker access, focus visibility, high contrast, and textual value exposure.
Semantic HTML: <label for="accent-color">Accent color</label><input id="accent-color" name="accent-color" type="color" value="#3366cc">

Default treatmentUse the shared action-control color, boundary, spacing, hover, focus, active, disabled, and secondary intent. Preserve native form submission and validation behavior.

AvoidUse multiple ambiguous submit actions.

## Input: submit
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/submit (checked 2026-07-23)
Deprecated: no
Purpose: Submit control.
Default: Use the shared action-control color, boundary, spacing, hover, focus, active, disabled, and secondary intent. Preserve native form submission and validation behavior.
Use: Set an explicit value as the accessible name; prefer button when rich content is needed.
Avoid: Use multiple ambiguous submit actions.
Constraints: Keep the input associated with the intended form and preserve formaction, formenctype, formmethod, formnovalidate, and formtarget behavior. Do not intercept native validation or submission without an equivalent error and progress flow.
Accessibility: Use a concise action label in value and preserve visible focus, keyboard activation, disabled state, and touch target. Distinguish multiple submit actions by result, not vague labels.
Default variant: default
Variant secondary: Use for a valid lower-priority submit action such as saving a draft.
Semantic HTML: <form><input type="submit" value="Submit order"></form>

Default treatmentUse the shared action-control color, boundary, spacing, hover, focus, active, disabled, and secondary intent. Preserve native reset-to-initial-values behavior.

AvoidPlace near submit where accidental activation is likely.

## Input: reset
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/reset (checked 2026-07-23)
Deprecated: no
Purpose: Reset control.
Default: Use the shared action-control color, boundary, spacing, hover, focus, active, disabled, and secondary intent. Preserve native reset-to-initial-values behavior.
Use: Use rarely and clearly distinguish from submit.
Avoid: Place near submit where accidental activation is likely.
Constraints: Use only when returning every form control to its initial value is genuinely helpful. Do not substitute reset for clearing saved data or undoing server-side changes.
Accessibility: Use an explicit value that names the scope of the reset. Separate it spatially and visually from submit actions while preserving focus, keyboard, disabled, and touch behavior.
Default variant: default
Variant secondary: Prefer this lower-emphasis intent when a reset is necessary beside a submit action.
Semantic HTML: <form><label for="reset-example">Example value</label><input id="reset-example" name="example" type="text" value="Initial value"><input type="reset" value="Reset form"></form>

Default treatmentUse the shared action-control color, boundary, spacing, hover, focus, active, disabled, and secondary intent. Preserve native push-button behavior.

AvoidOmit a real declarative or scripted action or an accessible name.

## Input: button
Treatment version: 1.0.0
Reference state: Active
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/button (checked 2026-07-23)
Deprecated: no
Purpose: Generic button input.
Default: Use the shared action-control color, boundary, spacing, hover, focus, active, disabled, and secondary intent. Preserve native push-button behavior.
Use: Use button element instead for richer accessible content.
Avoid: Omit a real declarative or scripted action or an accessible name.
Constraints: Provide an explicit value and a real declarative or scripted action; this input otherwise has no default behavior. Prefer button when the label requires markup, an icon, or richer state.
Accessibility: Use value as a concise accessible name and announce the result of scripted actions when it is not otherwise apparent. Preserve focus, keyboard activation, disabled state, and touch target.
Default variant: default
Variant secondary: Use for a valid lower-priority scripted action.
Semantic HTML: <input type="button" value="Open options" onclick="this.nextElementSibling.textContent='Options opened.'"><output aria-live="polite"></output>

AvoidUse for decorative image buttons.

## Input: image
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/image (checked 2026-07-23)
Deprecated: no
Purpose: Image submit control.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Provide alt describing action and submit-coordinate behavior intentionally.
Avoid: Use for decorative image buttons.
Constraints: Set non-empty alt, src, width, and height, and handle the submitted x/y coordinate pair intentionally. Prefer a text button when click position has no domain meaning.
Accessibility: Use alt as the complete action label and ensure the graphic has sufficient contrast. Preserve focus visibility, keyboard submission, touch target, fallback text, and form override behavior.
Semantic HTML: <input type="image" alt="Submit selection" width="120" height="44" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44'%3E%3Crect width='120' height='44' rx='8' fill='%232563eb'/%3E%3Ctext x='60' y='28' text-anchor='middle' fill='white' font-family='Arial'%3ESubmit%3C/text%3E%3C/svg%3E">

AvoidStore secrets or trust client-controlled values.

## Input: hidden
Treatment version: 0.0.0
Reference state: Native
MDN Baseline: widely-available via mdn at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/hidden (checked 2026-07-23)
Deprecated: no
Purpose: Hidden submitted value.
Native Fallback: Preserve browser presentation and behavior; no visual Framework treatment is exported.
Use: Use for non-sensitive data that must submit with form.
Avoid: Store secrets or trust client-controlled values.
Constraints: Set a meaningful name and validate the submitted value on the server. Do not use hidden inputs for secrets, authorization, or trusted state.
Accessibility: Do not attach labels, focus behavior, or user instructions to hidden inputs; expose any user-relevant value elsewhere.
Semantic HTML: <input type="hidden" name="context-id" value="example">