Minimumpx Maximumpx

Colors

Semantic colors 6 roles

Typography text · 16–18 px

Border radius radius · 4–8 px

Spacing space · 16–20 px

320 px 1440 px 1440 px Maximum clamp

Current framework

Design system

Live CSS custom properties generated from the settings at left.

01

Color

Primary--color-primaryoklch(54.6% 0.215 262.9)

02

Semantic colors & accessibility

Primary--semantic-primary

Action--semantic-action

Surface--semantic-surface

Text--semantic-text

Border--semantic-border

Keyboard focusPersistent preview of the generated focus treatment.

03

Typography

--text-xs .79rem .79rem → .79rem

The quick brown fox jumps over the lazy dog.

--text-s .89rem .89rem → .89rem

The quick brown fox jumps over the lazy dog.

--text-m 1.125rem 1rem → 1.125rem Base

The quick brown fox jumps over the lazy dog.

--text-l 1.5rem 1.125rem → 1.5rem

The quick brown fox jumps over the lazy dog.

--text-xl 2rem 1.27rem → 2rem

The quick brown fox jumps over the lazy dog.

--text-2xl 2.66rem 1.42rem → 2.66rem

The quick brown fox jumps over the lazy dog.

--text-3xl 3.55rem 1.6rem → 3.55rem

The quick brown fox jumps over the lazy dog.

--text-4xl 4.74rem 1.8rem → 4.74rem

The quick brown fox jumps over the lazy dog.

04

Border radius

--radius-xsvar(--radius-xs)

--radius-svar(--radius-s)

--radius-mvar(--radius-m)

--radius-lvar(--radius-l)

--radius-xlvar(--radius-xl)

--radius-fullvar(--radius-full)

05

Spacing

--space-4xs.402rem

--space-3xs.482rem

--space-2xs.579rem

--space-xs.703rem

--space-s.938rem

--space-m1.25rem

--space-l1.666rem

--space-xl2.221rem

--space-2xl2.961rem

--space-3xl3.947rem

--space-4xl5.261rem

Amet consectetur

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non blandit massa enim nec dui nunc.

Lorem ipsum Dolor sit

People having a conversation around a table

2.400+Lorem ipsum

9,1Dolor sit amet

25+Amet consectetur

15 jaarAdipiscing elit

Amet consectetur

Viverra tellus

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dolor sit amet

Sed do eiusmod tempor incididunt ut labore et dolore.

Consectetur

Ut enim ad minim veniam, quis nostrud exercitation.

Adipiscing elit

Duis aute irure dolor in reprehenderit in voluptate.

Person sitting beside a sunlit window

Magna etiam

Nulla facilisi morbi tempus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae sapien vitae sem faucibus fermentum. Integer ut augue eget sapien vestibulum ullamcorper.

Parent holding a baby — Lorem ipsum dolorAmet consectetur

Viverra tellus

Amet consectetur

Editorial lifestyle

12 mei 2026

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Editorial lifestyle

12 mei 2026

Viverra tellus in hac

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Editorial lifestyle

12 mei 2026

Magna etiam tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Viverra tellus

Aliquam etiam erat velit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent libero sed cursus ante dapibus diam.

Friends spending time together outdoors

Two people cycling together at sunset

Samen verder

Voor cliënten en hun naasten

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc feugiat mi a tellus consequat imperdiet.

Nulla facilisi

Lorem ipsum dolor

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim, lacus vel rhoncus elementum.”
Lorem ipsum 1

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim, lacus vel rhoncus elementum.”
Lorem ipsum 2

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim, lacus vel rhoncus elementum.”
Lorem ipsum 3

Amet consectetur

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Element Reference

Guided gallery

Visual specimens show current Framework preferences. Open guidance to inspect exact AI context.

Structure

Header

Introductory or navigational content for page or nearest section.

header draft

Section introduction

Review AI guidance1 of 92

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

Use

Use page or section introduction; let scope determine landmark semantics.

AvoidTreat every header as page banner or nest header/footer inside it.

## Header
Status: draft — preview only; excluded from Context Export
Purpose: Introductory or navigational content for page or nearest section.
Default: Keep native header semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use page or section introduction; let scope determine landmark semantics.
Avoid: Treat every header as page banner or nest header/footer inside it.

Structure

Navigation

Major navigation block.

nav draft

Review AI guidance2 of 92

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

Use

Label multiple navigation landmarks distinctly.

AvoidWrap every small link group in nav.

## Navigation
Status: draft — preview only; excluded from Context Export
Purpose: Major navigation block.
Default: Keep native nav semantics; style with Framework tokens without removing browser fallback behavior.
Use: Label multiple navigation landmarks distinctly.
Avoid: Wrap every small link group in nav.

Structure

Main

Unique dominant page content.

main draft

<main>

One visible main owns unique page content.

Review AI guidance3 of 92

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

Use

Render one visible main per document.

AvoidNest main elements or place repeated site chrome inside it.

## Main
Status: draft — preview only; excluded from Context Export
Purpose: Unique dominant page content.
Default: Keep native main semantics; style with Framework tokens without removing browser fallback behavior.
Use: Render one visible main per document.
Avoid: Nest main elements or place repeated site chrome inside it.

Structure

Section

Standalone thematic section.

section draft

A named theme

Related content belongs together.

Review AI guidance4 of 92

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

Use

Give section a meaningful heading when it represents a region.

AvoidUse section as styling-only wrapper; use div instead.

## Section
Status: draft — preview only; excluded from Context Export
Purpose: Standalone thematic section.
Default: Keep native section semantics; style with Framework tokens without removing browser fallback behavior.
Use: Give section a meaningful heading when it represents a region.
Avoid: Use section as styling-only wrapper; use div instead.

Structure

Article

Self-contained reusable or distributable composition.

article draft

Reusable story

Self-contained content with its own heading.

Review AI guidance5 of 92

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

Use

Identify article with a heading.

AvoidUse for content that depends entirely on surrounding context.

## Article
Status: draft — preview only; excluded from Context Export
Purpose: Self-contained reusable or distributable composition.
Default: Keep native article semantics; style with Framework tokens without removing browser fallback behavior.
Use: Identify article with a heading.
Avoid: Use for content that depends entirely on surrounding context.

Structure

Aside

Tangential content related to nearby or page content.

aside draft

Review AI guidance6 of 92

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

Use

Use for genuinely complementary information.

AvoidUse only because content is visually offset.

## Aside
Status: draft — preview only; excluded from Context Export
Purpose: Tangential content related to nearby or page content.
Default: Keep native aside semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use for genuinely complementary information.
Avoid: Use only because content is visually offset.

Structure

Footer

Footer for nearest sectioning ancestor or page.

footer draft

Review AI guidance7 of 92

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

Use

Keep footer content scoped to its owning section.

AvoidAssume every footer is page-level contentinfo.

## Footer
Status: draft — preview only; excluded from Context Export
Purpose: Footer for nearest sectioning ancestor or page.
Default: Keep native footer semantics; style with Framework tokens without removing browser fallback behavior.
Use: Keep footer content scoped to its owning section.
Avoid: Assume every footer is page-level contentinfo.

Structure

Address

Contact information for nearest article or page owner.

address draft

Techies Tools
hello@example.test

Review AI guidance8 of 92

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

Use

Include referenced person or organization with contact details.

AvoidUse for arbitrary postal text or publication dates.

## Address
Status: draft — preview only; excluded from Context Export
Purpose: Contact information for nearest article or page owner.
Default: Keep native address semantics; style with Framework tokens without removing browser fallback behavior.
Use: Include referenced person or organization with contact details.
Avoid: Use for arbitrary postal text or publication dates.

Structure

Search

Search or filtering controls and related suggestions.

search draft

Review AI guidance9 of 92

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

Use

Use native search landmark; provide labeled form fallback only for legacy support.

AvoidPut search results inside search or duplicate role=search.

## Search
Status: draft — preview only; excluded from Context Export
Purpose: Search or filtering controls and related suggestions.
Default: Keep native search semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use native search landmark; provide labeled form fallback only for legacy support.
Avoid: Put search results inside search or duplicate role=search.

Typography

Heading 1

Top-level page heading.

h1 draft

Heading 1 specimen

Heading level follows document hierarchy, not visual size.

Review AI guidance10 of 92

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

Use

Use one clear page-level h1 in most documents.

AvoidChoose heading level for visual size.

## Heading 1
Status: draft — preview only; excluded from Context Export
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.

Typography

Heading 2

Second-level section heading.

h2 supported

Clear guidance creates coherent interfaces

Paragraphs explain one idea at a comfortable reading width. Strong text marks important meaning without replacing hierarchy.

“Default treatments make ordinary generation predictable.” Framework guidance

Review AI guidance11 of 92

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

Use

Follow document hierarchy without skipped levels.

AvoidUse for size alone.

Content 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.

## Heading 2
Status: supported
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>

Typography

Heading 3

Third-level section heading.

h3 draft

Heading 3 specimen

Heading level follows document hierarchy, not visual size.

Review AI guidance12 of 92

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

Use

Nest beneath an h2-owned section.

AvoidSkip hierarchy for appearance.

## Heading 3
Status: draft — preview only; excluded from Context Export
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.

Typography

Heading 4

Fourth-level section heading.

h4 draft

Heading 4 specimen

Heading level follows document hierarchy, not visual size.

Review AI guidance13 of 92

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

Use

Use only when document depth requires it.

AvoidCreate deep hierarchy without content need.

## Heading 4
Status: draft — preview only; excluded from Context Export
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.

Typography

Heading 5

Fifth-level section heading.

h5 draft

Heading 5 specimen

Heading level follows document hierarchy, not visual size.

Review AI guidance14 of 92

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

Use

Keep heading order logical.

AvoidUse as styled label.

## Heading 5
Status: draft — preview only; excluded from Context Export
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.

Typography

Heading 6

Sixth-level section heading.

h6 draft

Heading 6 specimen

Heading level follows document hierarchy, not visual size.

Review AI guidance15 of 92

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

Use

Reserve for genuinely deep structures.

AvoidUse as small bold text.

## Heading 6
Status: draft — preview only; excluded from Context Export
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.

Typography

Paragraph

Related block of prose.

p supported

Regular paragraph text uses the Framework body scale and native paragraph semantics.

Review AI guidance16 of 92

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

Use

Use for regular text and let CSS control spacing.

AvoidInsert empty paragraphs for layout.

Content constraints

Contain phrasing content; use CSS rather than empty paragraphs for spacing.

Accessibility

Keep regular prose at readable measure and text-m scale.

## Paragraph
Status: supported
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>

Typography

Strong importance

Text with strong importance, seriousness, or urgency.

strong draft

Save changes before closing this window.

Review AI guidance17 of 92

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

Use

Use when importance changes meaning.

AvoidUse only to make text bold.

## Strong importance
Status: draft — preview only; excluded from Context Export
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.

Typography

Stress emphasis

Stress that changes spoken meaning.

em draft

I asked for the current version.

Review AI guidance18 of 92

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

Use

Use for semantic emphasis; nesting increases emphasis.

AvoidUse only to make text italic.

## Stress emphasis
Status: draft — preview only; excluded from Context Export
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.

Typography

Side comment

Side comments, legal text, or small print.

small draft

Terms apply. Last updated July 2026.

Review AI guidance19 of 92

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

Use

Use when content is semantically secondary.

AvoidUse as generic font-size utility.

## Side comment
Status: draft — preview only; excluded from Context Export
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.

Typography

Marked relevance

Text highlighted as relevant in current context.

mark draft

Found result: semantic HTML.

Review AI guidance20 of 92

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

Use

Ensure meaning survives without color or announcement.

AvoidUse as importance or syntax-highlighting marker.

## Marked relevance
Status: draft — preview only; excluded from Context Export
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.

Typography

Abbreviation

Abbreviation or acronym with an available expansion.

abbr draft

WCAG 2.2 guidance

Review AI guidance21 of 92

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

Use

Expand visibly on first use; title is secondary help only.

AvoidRely on hover tooltip as sole explanation.

## Abbreviation
Status: draft — preview only; excluded from Context Export
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.

Typography

Time

Machine-readable date, time, or duration.

time draft

13 July 2026

Review AI guidance22 of 92

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

Use

Provide valid datetime value.

AvoidEncode ambiguous or invalid date strings.

## Time
Status: draft — preview only; excluded from Context Export
Purpose: Machine-readable date, time, or duration.
Default: Keep native time semantics; style with Framework tokens without removing browser fallback behavior.
Use: Provide valid datetime value.
Avoid: Encode ambiguous or invalid date strings.

Typography

Block quotation

Extended quotation from another source.

blockquote supported

Good defaults reduce unnecessary decisions.
— Visible source

Review AI guidance23 of 92

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

Use

Provide visible attribution or source link when relevant.

AvoidUse for indentation alone or hide attribution in cite attribute.

Content 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.

## Block quotation
Status: supported
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>

Typography

Inline quotation

Short inline quotation.

q draft

The review called it clear and reusable.

Review AI guidance24 of 92

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

Use

Let browser supply quotation marks.

AvoidType duplicate quotation marks around q.

## Inline quotation
Status: draft — preview only; excluded from Context Export
Purpose: Short inline quotation.
Default: Keep native q semantics; style with Framework tokens without removing browser fallback behavior.
Use: Let browser supply quotation marks.
Avoid: Type duplicate quotation marks around q.

Typography

Citation title

Title of a cited creative work.

cite draft

Read HTML Living Standard.

Review AI guidance25 of 92

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

Use

Use for work title, not generic author name.

AvoidUse as author attribution merely for italics.

## Citation title
Status: draft — preview only; excluded from Context Export
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.

Typography

Code

Short computer-code fragment.

code draft

Use button type="button" for interface actions.

Review AI guidance26 of 92

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

Use

Escape HTML-sensitive characters; combine with pre for blocks.

AvoidUse for generic monospace styling.

## Code
Status: draft — preview only; excluded from Context Export
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.

Typography

Preformatted text

Whitespace-preserved text.

pre draft

.card {
  display: grid;
}

Review AI guidance27 of 92

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

Use

Control overflow and provide alternatives for ASCII art.

AvoidUse for layout alignment.

## Preformatted text
Status: draft — preview only; excluded from Context Export
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.

Typography

Keyboard input

User input from keyboard, voice, or another device.

kbd draft

Press Ctrl + K to search.

Review AI guidance28 of 92

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

Use

Use for actual commands or keys.

AvoidUse for arbitrary monospace labels.

## Keyboard input
Status: draft — preview only; excluded from Context Export
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.

Typography

Thematic break

Thematic break or topic shift.

hr draft

First topic.

New topic.

Review AI guidance29 of 92

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

Use

Use when content meaning changes.

AvoidUse as decorative line; use CSS instead.

## Thematic break
Status: draft — preview only; excluded from Context Export
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.

Lists

Unordered list

Items whose order has no meaning.

ul draft

Semantics first
Native fallback
Token styling

Review AI guidance30 of 92

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

Use

Keep li as direct semantic children; nest lists inside owning li.

AvoidUse only for indentation.

## Unordered list
Status: draft — preview only; excluded from Context Export
Purpose: Items whose order has no meaning.
Default: Keep native ul semantics; style with Framework tokens without removing browser fallback behavior.
Use: Keep li as direct semantic children; nest lists inside owning li.
Avoid: Use only for indentation.

Lists

Ordered list

Items whose sequence or rank matters.

ol draft

Choose intent
Use native element
Style with tokens

Review AI guidance31 of 92

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

Use

Preserve meaningful order; use start/reversed/value only when needed.

AvoidUse when order is irrelevant.

## Ordered list
Status: draft — preview only; excluded from Context Export
Purpose: Items whose sequence or rank matters.
Default: Keep native ol semantics; style with Framework tokens without removing browser fallback behavior.
Use: Preserve meaningful order; use start/reversed/value only when needed.
Avoid: Use when order is irrelevant.

Lists

List item

Item within ul or ol.

li draft

One list item in its required parent

Review AI guidance32 of 92

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

Use

Place inside a list parent.

AvoidUse outside ul or ol.

## List item
Status: draft — preview only; excluded from Context Export
Purpose: Item within ul or ol.
Default: Keep native li semantics; style with Framework tokens without removing browser fallback behavior.
Use: Place inside a list parent.
Avoid: Use outside ul or ol.

Lists

Description list

Term-description or name-value groups.

dl draft

Status: Draft
Source: MDN

Review AI guidance33 of 92

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

Use

Order one or more dt then one or more dd.

AvoidUse for visual indentation.

## Description list
Status: draft — preview only; excluded from Context Export
Purpose: Term-description or name-value groups.
Default: Keep native dl semantics; style with Framework tokens without removing browser fallback behavior.
Use: Order one or more dt then one or more dd.
Avoid: Use for visual indentation.

Lists

Description term

Term or name within a description list.

dt draft

Token: A named design decision.

Review AI guidance34 of 92

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

Use

Place inside dl before associated dd.

AvoidUse outside dl.

## Description term
Status: draft — preview only; excluded from Context Export
Purpose: Term or name within a description list.
Default: Keep native dt semantics; style with Framework tokens without removing browser fallback behavior.
Use: Place inside dl before associated dd.
Avoid: Use outside dl.

Lists

Description details

Description or value for preceding term group.

dd draft

Framework: Portable UI preference context.

Review AI guidance35 of 92

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

Use

Place inside dl after associated dt.

AvoidUse outside dl or before its term.

## Description details
Status: draft — preview only; excluded from Context Export
Purpose: Description or value for preceding term group.
Default: Keep native dd semantics; style with Framework tokens without removing browser fallback behavior.
Use: Place inside dl after associated dt.
Avoid: Use outside dl or before its term.

Actions

Link

Navigation to a real URL or destination.

a supported

Review AI guidance36 of 92

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

Use

Provide real href and label destination clearly out of context.

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

Content 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.

## Link
Status: supported
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.
Semantic HTML: <a href="/elements">Browse element guidance</a>

Actions

Button

Submit or execute an action in current interface.

button supported

Review AI guidance37 of 92

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

Use

Set explicit type and accessible name; preserve visible focus.

AvoidUse for navigation or omit type inside form.

Content 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.

## Button
Status: supported
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.
Semantic HTML: <button type="button">Save preference</button>

Media

Image

Image with meaningful alternative contract.

img draft

Blue geometric placeholder showing image proportions

Review AI guidance38 of 92

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

Use

Write purpose-based alt; use empty alt only for decorative images.

AvoidUse filename as alt or omit width/height when known.

## Image
Status: draft — preview only; excluded from Context Export
Purpose: Image with meaningful alternative contract.
Default: Keep native img semantics; style with Framework tokens without removing browser fallback behavior.
Use: Write purpose-based alt; use empty alt only for decorative images.
Avoid: Use filename as alt or omit width/height when known.

Media

Responsive picture

Art direction or format alternatives around one img.

picture draft

Responsive blue geometric placeholder

Review AI guidance39 of 92

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

Use

Keep img fallback and alt as final child.

AvoidUse without img fallback.

## Responsive picture
Status: draft — preview only; excluded from Context Export
Purpose: Art direction or format alternatives around one img.
Default: Keep native picture semantics; style with Framework tokens without removing browser fallback behavior.
Use: Keep img fallback and alt as final child.
Avoid: Use without img fallback.

Media

Media source

Alternative resource for picture, audio, or video.

source draft

<picture> <source media="…" srcset="…"> <img alt="…"> </picture>

Source supplies candidates; img owns fallback and alternative text.

Review AI guidance40 of 92

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

Use

Place inside supported media parent; order candidates intentionally.

AvoidUse standalone or add alt to source instead of img.

## Media source
Status: draft — preview only; excluded from Context Export
Purpose: Alternative resource for picture, audio, or video.
Default: Keep native source semantics; style with Framework tokens without removing browser fallback behavior.
Use: Place inside supported media parent; order candidates intentionally.
Avoid: Use standalone or add alt to source instead of img.

Media

Figure

Self-contained media or illustration referenced as one unit.

figure supported

Figure captions explain why media matters, not merely what it shows.

Review AI guidance41 of 92

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

Use

Use when content can move independently from prose.

AvoidWrap every image regardless of relationship.

Content constraints

Use for self-contained content that can move independently.
Include no more than one figcaption.

Accessibility

Give embedded media its own required alternative text; figure grouping does not replace it.

## Figure
Status: supported
Purpose: Self-contained media or illustration referenced as one unit.
Default: Keep native figure semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use when content can move independently from prose.
Avoid: Wrap every image regardless of relationship.
Constraints: Use for self-contained content that can move independently. Include no more than one figcaption.
Accessibility: Give embedded media its own required alternative text; figure grouping does not replace it.
Semantic HTML: <figure><img src="chart.svg" alt="Quarterly trend rises"><figcaption>Quarterly trend.</figcaption></figure>

Media

Figure caption

Visible caption for its parent figure.

figcaption supported

Blue sample chart rising from left to right — Quarterly trend. Caption does not replace image alt.

Review AI guidance42 of 92

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

Use

Keep caption concise; retain img alt for image purpose.

AvoidAssume figcaption replaces alt text.

Content constraints

Place as first or last child of figure.
Caption explains context; it does not replace img alt.

Accessibility

Keep caption visible and retain purpose-based alternative text on media.

## Figure caption
Status: supported
Purpose: Visible caption for its parent figure.
Default: Keep native figcaption semantics; style with Framework tokens without removing browser fallback behavior.
Use: Keep caption concise; retain img alt for image purpose.
Avoid: Assume figcaption replaces alt text.
Constraints: Place as first or last child of figure. Caption explains context; it does not replace img alt.
Accessibility: Keep caption visible and retain purpose-based alternative text on media.
Semantic HTML: <figure><img src="chart.svg" alt="Quarterly trend rises"><figcaption>Quarterly trend.</figcaption></figure>

Media

Audio

Embedded audio playback.

audio draft

Review AI guidance43 of 92

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

Use

Provide controls, fallback text, and transcript where content requires it.

AvoidAutoplay audible media or omit alternative content.

## Audio
Status: draft — preview only; excluded from Context Export
Purpose: Embedded audio playback.
Default: Keep native audio semantics; style with Framework tokens without removing browser fallback behavior.
Use: Provide controls, fallback text, and transcript where content requires it.
Avoid: Autoplay audible media or omit alternative content.

Media

Video

Embedded video playback.

video draft

Review AI guidance44 of 92

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

Use

Provide controls, captions, transcript or audio description as required.

AvoidAutoplay with sound or rely on visuals alone.

## Video
Status: draft — preview only; excluded from Context Export
Purpose: Embedded video playback.
Default: Keep native video semantics; style with Framework tokens without removing browser fallback behavior.
Use: Provide controls, captions, transcript or audio description as required.
Avoid: Autoplay with sound or rely on visuals alone.

Media

Timed text track

Captions, subtitles, descriptions, chapters, or metadata for media.

track draft

<track kind="captions" srclang="en" label="English">

Reviewed captions accompany spoken media.

Review AI guidance45 of 92

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

Use

Declare kind, srclang, label; include usable captions for spoken content.

AvoidTreat auto-generated captions as unreviewed final copy.

## Timed text track
Status: draft — preview only; excluded from Context Export
Purpose: Captions, subtitles, descriptions, chapters, or metadata for media.
Default: Keep native track semantics; style with Framework tokens without removing browser fallback behavior.
Use: Declare kind, srclang, label; include usable captions for spoken content.
Avoid: Treat auto-generated captions as unreviewed final copy.

Data

Table

Two-dimensional data with row and column relationships.

table supported

Framework export formats
Format	Purpose	Status
Markdown	AI context	Planned
CSS	Implementation	Ready

Review AI guidance46 of 92

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

Use

Use caption and structural header cells for real data.

AvoidUse table for page layout.

Content constraints

Use for two-dimensional data, never page layout.
Provide caption, real header cells, and meaningful row groups.

Accessibility

Preserve table semantics inside responsive wrappers; do not convert cells to generic display blocks.

## Table
Status: supported
Purpose: Two-dimensional data with row and column relationships.
Default: Keep native table semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use caption and structural header cells for real data.
Avoid: Use table for page layout.
Constraints: Use for two-dimensional data, never page layout. Provide caption, real header cells, and meaningful row groups.
Accessibility: Preserve table semantics inside responsive wrappers; do not convert cells to generic display blocks.
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>

Data

Table caption

Accessible title or description for a table.

caption draft

Framework tokens
Color	OKLCH

Review AI guidance47 of 92

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

Use

Place as first child of table.

AvoidReplace with visually nearby text lacking association.

## Table caption
Status: draft — preview only; excluded from Context Export
Purpose: Accessible title or description for a table.
Default: Keep native caption semantics; style with Framework tokens without removing browser fallback behavior.
Use: Place as first child of table.
Avoid: Replace with visually nearby text lacking association.

Data

Table head

Group of table header rows.

thead draft

Element	Status
button	Supported

Review AI guidance48 of 92

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

Use

Use for structural row grouping.

AvoidUse only for styling without table semantics.

## Table head
Status: draft — preview only; excluded from Context Export
Purpose: Group of table header rows.
Default: Keep native thead semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use for structural row grouping.
Avoid: Use only for styling without table semantics.

Data

Table body

Primary row group in a table.

tbody draft

button	Supported
dialog	Supported

Review AI guidance49 of 92

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

Use

Group related data rows.

AvoidSplit rows arbitrarily for appearance.

## Table body
Status: draft — preview only; excluded from Context Export
Purpose: Primary row group in a table.
Default: Keep native tbody semantics; style with Framework tokens without removing browser fallback behavior.
Use: Group related data rows.
Avoid: Split rows arbitrarily for appearance.

Data

Table foot

Summary or footer row group.

tfoot draft

Reviewed	15
Total	99

Review AI guidance50 of 92

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

Use

Use for totals or stable summaries.

AvoidUse for unrelated notes.

## Table foot
Status: draft — preview only; excluded from Context Export
Purpose: Summary or footer row group.
Default: Keep native tfoot semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use for totals or stable summaries.
Avoid: Use for unrelated notes.

Data

Table row

Row of cells in a table.

tr draft

One row	Related value

Review AI guidance51 of 92

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

Use

Keep cells aligned with table structure.

AvoidPlace outside table row groups.

## Table row
Status: draft — preview only; excluded from Context Export
Purpose: Row of cells in a table.
Default: Keep native tr semantics; style with Framework tokens without removing browser fallback behavior.
Use: Keep cells aligned with table structure.
Avoid: Place outside table row groups.

Data

Table header cell

Header for a row, column, or group of cells.

th supported

Status	Supported

Review AI guidance52 of 92

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

Use

Set scope when relationship is not obvious; use headers/id for complex tables.

AvoidUse td styled bold as semantic header.

Content constraints

Use for row or column headers, not bold data.
Set scope when relationships are not immediately obvious.

Accessibility

Use id/headers for complex tables where scope cannot express the relationship.

## Table header cell
Status: supported
Purpose: Header for a row, column, or group of cells.
Default: Keep native th semantics; style with Framework tokens without removing browser fallback behavior.
Use: Set scope when relationship is not obvious; use headers/id for complex tables.
Avoid: Use td styled bold as semantic header.
Constraints: Use for row or column headers, not bold data. Set scope when relationships are not immediately obvious.
Accessibility: Use id/headers for complex tables where scope cannot express the relationship.
Semantic HTML: <tr><th scope="row">Color</th><td>Supported</td></tr>

Data

Table data cell

Data cell within a table row.

td supported

Status	Draft

Review AI guidance53 of 92

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

Use

Keep cell relationship clear through headers.

AvoidUse outside tr.

Content constraints

Place inside tr and use only for data cells.
Keep spans from creating ambiguous header relationships.

Accessibility

Ensure each data cell remains associated with its relevant headers.

## Table data cell
Status: supported
Purpose: Data cell within a table row.
Default: Keep native td semantics; style with Framework tokens without removing browser fallback behavior.
Use: Keep cell relationship clear through headers.
Avoid: Use outside tr.
Constraints: Place inside tr and use only for data cells. Keep spans from creating ambiguous header relationships.
Accessibility: Ensure each data cell remains associated with its relevant headers.
Semantic HTML: <tr><th scope="row">Color</th><td>Supported</td></tr>

Data

Machine-readable data

Visible value paired with machine-readable value.

data draft

Framework starter

Review AI guidance54 of 92

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

Use

Provide value attribute matching content meaning.

AvoidUse for dates; use time instead.

## Machine-readable data
Status: draft — preview only; excluded from Context Export
Purpose: Visible value paired with machine-readable value.
Default: Keep native data semantics; style with Framework tokens without removing browser fallback behavior.
Use: Provide value attribute matching content meaning.
Avoid: Use for dates; use time instead.

Data

Scalar measurement

Known scalar value within a bounded range.

meter draft

Accessibility review82%

Review AI guidance55 of 92

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

Use

Provide min/max/value and visible label.

AvoidUse as task progress indicator.

## Scalar measurement
Status: draft — preview only; excluded from Context Export
Purpose: Known scalar value within a bounded range.
Default: Keep native meter semantics; style with Framework tokens without removing browser fallback behavior.
Use: Provide min/max/value and visible label.
Avoid: Use as task progress indicator.

Data

Progress

Completion progress for a task.

progress draft

Export progress68%

Review AI guidance56 of 92

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

Use

Provide max/value or omit value for indeterminate state; label it.

AvoidUse as generic meter or decorative bar.

## Progress
Status: draft — preview only; excluded from Context Export
Purpose: Completion progress for a task.
Default: Keep native progress semantics; style with Framework tokens without removing browser fallback behavior.
Use: Provide max/value or omit value for indeterminate state; label it.
Avoid: Use as generic meter or decorative bar.

Forms

Form

Controls that submit or process related user data.

form draft

Review AI guidance57 of 92

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

Use

Use meaningful action/method and logical control grouping.

AvoidNest forms or use as styling wrapper.

## Form
Status: draft — preview only; excluded from Context Export
Purpose: Controls that submit or process related user data.
Default: Keep native form semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use meaningful action/method and logical control grouping.
Avoid: Nest forms or use as styling wrapper.

Forms

Label

Accessible label for a form control.

label supported

Email address

Review AI guidance58 of 92

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

Use

Associate explicitly with for/id or wrap the control.

AvoidUse placeholder as label.

Content 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.

## Label
Status: supported
Purpose: Accessible label for a form control.
Default: Keep native label semantics; style with Framework tokens without removing browser fallback behavior.
Use: Associate explicitly with for/id or wrap the control.
Avoid: Use placeholder as label.
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">

Forms

Input

Native single-value form control selected by type.

input supported

Review AI guidance59 of 92

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

Use

Choose correct type, name, autocomplete, and label.

AvoidUse text for every input or remove native focus.

Content 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 focus and type-specific keyboard behavior.

## Input
Status: supported
Purpose: Native single-value form control selected by type.
Default: Keep native input semantics; style with Framework tokens without removing browser fallback behavior.
Use: Choose correct type, name, autocomplete, and label.
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 focus and type-specific keyboard behavior.
Semantic HTML: <label for="email">Email address</label><input id="email" name="email" type="email" autocomplete="email">

Forms

Textarea

Multi-line plain-text input.

textarea draft

Message

Review AI guidance60 of 92

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

Use

Provide label and expected format or length guidance.

AvoidUse content attribute for initial value.

## Textarea
Status: draft — preview only; excluded from Context Export
Purpose: Multi-line plain-text input.
Default: Keep native textarea semantics; style with Framework tokens without removing browser fallback behavior.
Use: Provide label and expected format or length guidance.
Avoid: Use content attribute for initial value.

Forms

Select

Native single-choice or multi-choice option control.

select supported

Intent

Review AI guidance61 of 92

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

Use

Provide label; group long option sets when useful.

AvoidReplace native select without equivalent keyboard behavior.

Content constraints

Use for constrained choices; options need concise labels and truthful values.
Prefer native select unless custom behavior has a demonstrated need.

Accessibility

Associate a visible label and retain native keyboard/menu behavior.

## Select
Status: supported
Purpose: Native single-choice or multi-choice option control.
Default: Keep native select semantics; style with Framework tokens without removing browser fallback behavior.
Use: Provide label; group long option sets when useful.
Avoid: Replace native select without equivalent keyboard behavior.
Constraints: Use for constrained choices; options need concise labels and truthful values. Prefer native select unless custom behavior has a demonstrated need.
Accessibility: Associate a visible label and retain native keyboard/menu behavior.
Semantic HTML: <label for="intent">Intent</label><select id="intent"><option>Browse</option><option>Act</option></select>

Forms

Option group

Labeled group of related options.

optgroup draft

Element

Review AI guidance62 of 92

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

Use

Use label and place within select.

AvoidNest optgroup or make it selectable.

## Option group
Status: draft — preview only; excluded from Context Export
Purpose: Labeled group of related options.
Default: Keep native optgroup semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use label and place within select.
Avoid: Nest optgroup or make it selectable.

Forms

Option

Selectable choice within select, optgroup, or datalist.

option draft

Status

Review AI guidance63 of 92

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

Use

Use clear concise label and value.

AvoidPut arbitrary interactive content inside.

## Option
Status: draft — preview only; excluded from Context Export
Purpose: Selectable choice within select, optgroup, or datalist.
Default: Keep native option semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use clear concise label and value.
Avoid: Put arbitrary interactive content inside.

Forms

Fieldset

Group of related form controls.

fieldset draft

Preferred output HTML React

Review AI guidance64 of 92

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

Use

Use legend as first child for shared question/context.

AvoidUse only for visual border.

## Fieldset
Status: draft — preview only; excluded from Context Export
Purpose: Group of related form controls.
Default: Keep native fieldset semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use legend as first child for shared question/context.
Avoid: Use only for visual border.

Forms

Legend

Caption for a fieldset group.

legend draft

Notification method Email

Review AI guidance65 of 92

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

Use

Make first child of fieldset and describe group.

AvoidUse outside fieldset.

## Legend
Status: draft — preview only; excluded from Context Export
Purpose: Caption for a fieldset group.
Default: Keep native legend semantics; style with Framework tokens without removing browser fallback behavior.
Use: Make first child of fieldset and describe group.
Avoid: Use outside fieldset.

Forms

Datalist

Suggested values for a compatible input.

datalist draft

Browser

Review AI guidance66 of 92

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

Use

Treat as enhancement with typed-input fallback; test browser/AT support.

AvoidUse as required select replacement; support remains limited.

## Datalist
Status: draft — preview only; excluded from Context Export
Purpose: Suggested values for a compatible input.
Default: Keep native datalist semantics; style with Framework tokens without removing browser fallback behavior.
Use: Treat as enhancement with typed-input fallback; test browser/AT support.
Avoid: Use as required select replacement; support remains limited.

Forms

Output

Result of a calculation or user action.

output draft

Review AI guidance67 of 92

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

Use

Associate inputs with for and announce updates only when needed.

AvoidUse for static text.

## Output
Status: draft — preview only; excluded from Context Export
Purpose: Result of a calculation or user action.
Default: Keep native output semantics; style with Framework tokens without removing browser fallback behavior.
Use: Associate inputs with for and announce updates only when needed.
Avoid: Use for static text.

Disclosure

Details

Native expandable disclosure.

details supported

When should guidance be overridden?

Only during an explicit Exploration or when the person directly requests an exception.

Review AI guidance68 of 92

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

Use

Use summary as first child with clear state-independent label.

AvoidAdd custom keyboard handlers already supplied natively.

Content constraints

Use summary as first child with a clear state-independent label.
Do not add duplicate custom keyboard handling.

Accessibility

Preserve native focus, Enter, and Space behavior; Escape-to-close is not required.

## Details
Status: supported
Purpose: Native expandable disclosure.
Default: Keep native details semantics; style with Framework tokens without removing browser fallback behavior.
Use: Use summary as first child with clear state-independent label.
Avoid: Add custom keyboard handlers already supplied natively.
Constraints: Use summary as first child with a clear state-independent label. Do not add duplicate custom keyboard handling.
Accessibility: Preserve native focus, Enter, and Space behavior; Escape-to-close is not required.
Semantic HTML: <details><summary>Review guidance</summary><p>Disclosure content.</p></details>

Disclosure

Summary

Visible disclosure label for details.

summary draft

Review summary label

Native disclosure content.

Review AI guidance69 of 92

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

Use

Place as first child of details and preserve focus indication.

AvoidUse outside details as generic heading.

## Summary
Status: draft — preview only; excluded from Context Export
Purpose: Visible disclosure label for details.
Default: Keep native summary semantics; style with Framework tokens without removing browser fallback behavior.
Use: Place as first child of details and preserve focus indication.
Avoid: Use outside details as generic heading.

Disclosure

Dialog

Modal or non-modal dialog requiring explicit user interaction.

dialog supported

Review AI guidance70 of 92

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

Use

Open modal with showModal, provide visible close action, support Escape, avoid tabindex on dialog.

AvoidUse div role=dialog when native dialog works or trap focus manually without need.

Content constraints

Open modal interactions with showModal; include a visible close action.
Do not add tabindex to dialog.

Accessibility

Preserve native Escape behavior for modal dialogs and restore focus to the invoker.
Move initial focus intentionally to the most relevant control.

## Dialog
Status: supported
Purpose: Modal or non-modal dialog requiring explicit user interaction.
Default: Keep native dialog semantics; style with Framework tokens without removing browser fallback behavior.
Use: Open modal with showModal, provide visible close action, support Escape, avoid tabindex on dialog.
Avoid: Use div role=dialog when native dialog works or trap focus manually without need.
Constraints: Open modal interactions with showModal; include a visible close action. Do not add tabindex to dialog.
Accessibility: Preserve native Escape behavior for modal dialogs and restore focus to the invoker. Move initial focus intentionally to the most relevant control.
Semantic HTML: <dialog><h2>Confirm Promotion</h2><form method="dialog"><button>Close</button></form></dialog>

Forms

Input: text

Single-line plain text.

input[type="text"] draft

Input: text

Review AI guidance71 of 92

Default treatmentUse native input type=text behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use for unconstrained short text; add autocomplete where meaningful.

AvoidUse when a specialized input type communicates intent better.

## Input: text
Status: draft — preview only; excluded from Context Export
Purpose: Single-line plain text.
Default: Use native input type=text behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use for unconstrained short text; add autocomplete where meaningful.
Avoid: Use when a specialized input type communicates intent better.

Forms

Input: email

Email address.

input[type="email"] draft

Input: email

Review AI guidance72 of 92

Default treatmentUse native input type=email behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use email type, label, autocomplete=email, and server validation.

AvoidAssume browser validation proves deliverability.

## Input: email
Status: draft — preview only; excluded from Context Export
Purpose: Email address.
Default: Use native input type=email behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use email type, label, autocomplete=email, and server validation.
Avoid: Assume browser validation proves deliverability.

Forms

Input: tel

Telephone number.

input[type="tel"] draft

Input: tel

Review AI guidance73 of 92

Default treatmentUse native input type=tel behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use tel type and autocomplete=tel; describe accepted format.

AvoidUse number type for phone numbers.

## Input: tel
Status: draft — preview only; excluded from Context Export
Purpose: Telephone number.
Default: Use native input type=tel behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use tel type and autocomplete=tel; describe accepted format.
Avoid: Use number type for phone numbers.

Forms

Input: url

Web address.

input[type="url"] draft

Input: url

Review AI guidance74 of 92

Default treatmentUse native input type=url behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use url type for absolute URLs and clarify expected format.

AvoidUse for free-form text.

## Input: url
Status: draft — preview only; excluded from Context Export
Purpose: Web address.
Default: Use native input type=url behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use url type for absolute URLs and clarify expected format.
Avoid: Use for free-form text.

Forms

Input: search

Search query.

input[type="search"] draft

Input: search

Review AI guidance75 of 92

Default treatmentUse native input type=search behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use search type inside a labeled search form.

AvoidTreat as results container.

## Input: search
Status: draft — preview only; excluded from Context Export
Purpose: Search query.
Default: Use native input type=search behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use search type inside a labeled search form.
Avoid: Treat as results container.

Forms

Input: password

Password.

input[type="password"] draft

Input: password

Review AI guidance76 of 92

Default treatmentUse native input type=password behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use current-password or new-password autocomplete as appropriate.

AvoidDisable paste or expose value without intentional control.

## Input: password
Status: draft — preview only; excluded from Context Export
Purpose: Password.
Default: Use native input type=password behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use current-password or new-password autocomplete as appropriate.
Avoid: Disable paste or expose value without intentional control.

Forms

Input: number

Numeric value with stepper semantics.

input[type="number"] draft

Input: number

Review AI guidance77 of 92

Default treatmentUse native input type=number behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use for quantities where increment/decrement makes sense.

AvoidUse for credit cards, postal codes, phone numbers, or identifiers.

## Input: number
Status: draft — preview only; excluded from Context Export
Purpose: Numeric value with stepper semantics.
Default: Use native input type=number behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use for quantities where increment/decrement makes sense.
Avoid: Use for credit cards, postal codes, phone numbers, or identifiers.

Forms

Input: range

Approximate numeric value.

input[type="range"] draft

Input: range

Review AI guidance78 of 92

Default treatmentUse native input type=range behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Provide accessible label and visible current value when precision matters.

AvoidUse when exact typed value is required.

## Input: range
Status: draft — preview only; excluded from Context Export
Purpose: Approximate numeric value.
Default: Use native input type=range behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Provide accessible label and visible current value when precision matters.
Avoid: Use when exact typed value is required.

Forms

Input: date

Calendar date.

input[type="date"] draft

Input: date

Review AI guidance79 of 92

Default treatmentUse native input type=date behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Provide visible label and robust server-side parsing.

AvoidAssume locale display format equals submitted value.

## Input: date
Status: draft — preview only; excluded from Context Export
Purpose: Calendar date.
Default: Use native input type=date behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Provide visible label and robust server-side parsing.
Avoid: Assume locale display format equals submitted value.

Forms

Input: time

Time of day.

input[type="time"] draft

Input: time

Review AI guidance80 of 92

Default treatmentUse native input type=time behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Clarify timezone or locale context when relevant.

AvoidUse for durations.

## Input: time
Status: draft — preview only; excluded from Context Export
Purpose: Time of day.
Default: Use native input type=time behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Clarify timezone or locale context when relevant.
Avoid: Use for durations.

Forms

Input: datetime-local

Local date and time.

input[type="datetime-local"] draft

Input: datetime-local

Review AI guidance81 of 92

Default treatmentUse native input type=datetime-local behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use only when timezone is intentionally absent.

AvoidRepresent a global instant without timezone guidance.

## Input: datetime-local
Status: draft — preview only; excluded from Context Export
Purpose: Local date and time.
Default: Use native input type=datetime-local behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use only when timezone is intentionally absent.
Avoid: Represent a global instant without timezone guidance.

Forms

Input: month

Month and year.

input[type="month"] draft

Input: month

Review AI guidance82 of 92

Default treatmentUse native input type=month behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use for month-granularity values and provide fallback expectations.

AvoidUse when exact day is required.

## Input: month
Status: draft — preview only; excluded from Context Export
Purpose: Month and year.
Default: Use native input type=month behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use for month-granularity values and provide fallback expectations.
Avoid: Use when exact day is required.

Forms

Input: week

Week and year.

input[type="week"] draft

Input: week

Review AI guidance83 of 92

Default treatmentUse native input type=week behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use only when week numbering matches domain needs.

AvoidAssume all locales share week conventions.

## Input: week
Status: draft — preview only; excluded from Context Export
Purpose: Week and year.
Default: Use native input type=week behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use only when week numbering matches domain needs.
Avoid: Assume all locales share week conventions.

Forms

Input: checkbox

Independent boolean or multi-select choice.

input[type="checkbox"] draft

Input: checkbox Enable preference

Review AI guidance84 of 92

Default treatmentUse native input type=checkbox behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use checked state with visible label; group related choices.

AvoidUse radio when exactly one option is allowed.

## Input: checkbox
Status: draft — preview only; excluded from Context Export
Purpose: Independent boolean or multi-select choice.
Default: Use native input type=checkbox behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use checked state with visible label; group related choices.
Avoid: Use radio when exactly one option is allowed.

Forms

Input: radio

One choice from a set.

input[type="radio"] draft

Input: radio

Choose one First Second

Review AI guidance85 of 92

Default treatmentUse native input type=radio behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Share name, group in fieldset, and provide legend.

AvoidRender isolated unlabeled radio buttons.

## Input: radio
Status: draft — preview only; excluded from Context Export
Purpose: One choice from a set.
Default: Use native input type=radio behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Share name, group in fieldset, and provide legend.
Avoid: Render isolated unlabeled radio buttons.

Forms

Input: file

File upload.

input[type="file"] draft

Input: file

Review AI guidance86 of 92

Default treatmentUse native input type=file behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

State accepted formats and size; validate on server.

AvoidRely only on accept for security validation.

## Input: file
Status: draft — preview only; excluded from Context Export
Purpose: File upload.
Default: Use native input type=file behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: State accepted formats and size; validate on server.
Avoid: Rely only on accept for security validation.

Forms

Input: color

Color value.

input[type="color"] draft

Input: color

Review AI guidance87 of 92

Default treatmentUse native input type=color behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use when native color selection is acceptable and provide textual value where needed.

AvoidUse as sole accessible representation of chosen color.

## Input: color
Status: draft — preview only; excluded from Context Export
Purpose: Color value.
Default: Use native input type=color behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use when native color selection is acceptable and provide textual value where needed.
Avoid: Use as sole accessible representation of chosen color.

Forms

Input: submit

Submit control.

input[type="submit"] draft

Input: submit

Review AI guidance88 of 92

Default treatmentUse native input type=submit behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use explicit value or accessible name; prefer button when rich content needed.

AvoidUse multiple ambiguous submit actions.

## Input: submit
Status: draft — preview only; excluded from Context Export
Purpose: Submit control.
Default: Use native input type=submit behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use explicit value or accessible name; prefer button when rich content needed.
Avoid: Use multiple ambiguous submit actions.

Forms

Input: reset

Reset control.

input[type="reset"] draft

Input: reset

Review AI guidance89 of 92

Default treatmentUse native input type=reset behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use rarely and clearly distinguish from submit.

AvoidPlace near submit where accidental activation is likely.

## Input: reset
Status: draft — preview only; excluded from Context Export
Purpose: Reset control.
Default: Use native input type=reset behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use rarely and clearly distinguish from submit.
Avoid: Place near submit where accidental activation is likely.

Forms

Input: button

Generic button input.

input[type="button"] draft

Input: button

Review AI guidance90 of 92

Default treatmentUse native input type=button behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Use button element instead for richer accessible content.

AvoidOmit scripted action or accessible name.

## Input: button
Status: draft — preview only; excluded from Context Export
Purpose: Generic button input.
Default: Use native input type=button behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Use button element instead for richer accessible content.
Avoid: Omit scripted action or accessible name.

Forms

Input: image

Image submit control.

input[type="image"] draft

Input: image

Review AI guidance91 of 92

Default treatmentUse native input type=image behavior; apply Framework control tokens while preserving focus, label, and validation semantics.

Use

Provide alt describing action and submit-coordinate behavior intentionally.

AvoidUse for decorative image buttons.

## Input: image
Status: draft — preview only; excluded from Context Export
Purpose: Image submit control.
Default: Use native input type=image behavior; apply Framework control tokens while preserving focus, label, and validation semantics.
Use: Provide alt describing action and submit-coordinate behavior intentionally.
Avoid: Use for decorative image buttons.

Forms

Input: hidden

Hidden submitted value.

input[type="hidden"] draft

<input type="hidden" name="context-id" value="example">

Hidden values submit with the form but provide no visible or focusable control.

Review AI guidance92 of 92

Default treatmentUse native input type=hidden submission behavior. It has no visible control, focus, label, or validation UI.

Use

Use for non-sensitive data that must submit with form.

AvoidStore secrets or trust client-controlled values.

## Input: hidden
Status: draft — preview only; excluded from Context Export
Purpose: Hidden submitted value.
Default: Use native input type=hidden submission behavior. It has no visible control, focus, label, or validation UI.
Use: Use for non-sensitive data that must submit with form.
Avoid: Store secrets or trust client-controlled values.