Native starter
One route tree, one asset directory, and no browser build step.
Open setupTwenty patterns. One small vocabulary.
Semantic HTML, shared tokens, and native browser behavior cover common interface patterns without a client framework.
Theme laboratory
ForkLight
ForkDark
TideLight
EmberDark
Actions and toolbars
One clear primary action, then quieter alternatives. Native disabled state removes false affordance.
Ideas: Radix Themes and shadcn/ui.
Text fields
Visible labels, persistent help, stable IDs, and errors beside the field survive server round trips.
Ideas: GOV.UK Frontend and USWDS.
Choice controls
Token-skinned radio, checkbox, switch, select, and range controls keep native semantics without browser-default visuals.
Ideas: Material Web and Bootstrap.
Validation summary
A summary gives orientation while each field keeps its specific cause and recovery path.
Ideas: GOV.UK error summary.
Two fields need attention
Primary navigation
Labels stay visible, the current destination is announced, and every item has a robust target.
Breadcrumbs and pagination
Location and sequence use ordinary links, ordered structure, and explicit current state.
Linked tabs
Each tab is a real destination. True in-page tabs wait for tested arrow-key behavior.
Ideas: Radix Primitives and Material tabs.
Disclosure and accordion
Details and summary provide keyboard, pointer, open state, and no-script fallback in one native element.
Ideas: GOV.UK Frontend and the HTML standard.
What is admitted?
A completed directory of ordinary browser files with a strict manifest.
What stays outside?
Server runtimes, source compilers, secrets, and mutable application data.
Popover and action menu
The Popover API owns top-layer placement and dismissal. Essential actions remain ordinary links and buttons.
Ideas: Radix Primitives and the HTML Popover standard.
Signed in as release operator
Alerts and banners
Color supports a plain-language heading. Static notices do not misuse live-region roles.
Toast, progress, and loading
Feedback names the work and remains readable without motion. Live announcements belong to the code that inserts them.
Backup complete
Encrypted file verified.
Cards and empty states
A card represents one bounded object. Empty states explain what is missing and offer one direct next step.
No retained release
Read deploymentLists and tables
Native structure carries captions, headers, and values. Horizontal scrolling protects narrow screens.
| File | Bytes | State |
|---|---|---|
index.html | 18,432 | Verified |
app.css | 29,884 | Verified |
ponytail.css | 27,901 | Verified |
Badges, avatars, and status
Compact metadata stays textual. Avatars are decorative when the adjacent name already identifies the person.
ReadyNativeAction required
Release reviewers
Commerce and pricing
Product, price, quantity, and action remain explicit. This specimen is labelled sample data.
Ideas: Shopify Polaris.
Bunfork field guide
Printed operator reference
$24example price
Authentication and profile
Autocomplete, input types, visible labels, and recovery links let browser features do useful work.
Ideas: Material Web and Fluent UI.
Calendar and scheduling
Date input uses the platform picker. The compact calendar uses time elements and a textual current-date state.
Ideas: Fluent UI and Material Web.
MonTueWedThuFriSatSun
Messaging and activity
Activity is a readable list with actors, timestamps, and verbs. It does not pretend every update is a card.
Ideas: Atlassian Design System for concepts only, plus Primer.
Arna verified the manifest
Mateo reviewed the recovery steps
Forkbird marked the release ready