Compact table · light
| State | Count | Owner |
|---|---|---|
| Open | 8 | Joe |
| Closed | 12 | Joe |
Foundations
Typography, links, tables, themes, and motion for semantic HTML.
Typography and links
First-level heading
Second-level heading
Body text with inline code, a
regular link, and a
disabled link.
Lists retain the library's dash treatment:
- Semantic defaults
- Keyboard-visible focus
- Light and dark schemes
Data tables
Semantic tables receive only a readable foundation. The wide example's scrolling belongs to this specimen, not the library.
Wide table · dark
| Release | Status | CSS build | Specimen build | Manual review | Owner |
|---|---|---|---|---|---|
| Sample A | Ready | Complete | Complete | Pending | Joe |
| Sample B | Draft | Complete | Pending | Pending | Joe |
Semantic color contract
Every named text role below is guaranteed against both the page and surface backgrounds. Borders and focus rings have a separate non-text contrast guarantee.
Forced light scheme
Page background
- Text
- Muted text
- Link
- Link hover / focus
- Danger
Border sample
Focus-ring sample
Surface background
- Text
- Muted text
- Link
- Link hover / focus
- Danger
Border sample
Focus-ring sample
Primitive swatches; no foreground guarantee
Accent
Inverse surface
Forced dark scheme
Page background
- Text
- Muted text
- Link
- Link hover / focus
- Danger
Border sample
Focus-ring sample
Surface background
- Text
- Muted text
- Link
- Link hover / focus
- Danger
Border sample
Focus-ring sample
Primitive swatches; no foreground guarantee
Accent
Inverse surface
Motion and interaction
Accessibility: Keep meaning and operation available without animation or hover. Test reduced-motion preferences separately from static screenshots. MDN reduced-motion guidance.
Hover or focus within
This surface scales only when motion is acceptable.
Focus this link
Disabled scale surface
This example remains static.