106 atoms available on this surface
series link or transparency note at article top
In Series label, I covered the background. This article picks up from there.
prose paragraph block
This is a body paragraph. It supports bold, italic, and inline code via lightweight markdown.
H2 section title
Section Heading
H3 subsection title
Subheading text
pull quote or blockquote with attribution
The vocabulary IS the discovery layer.
syntax-highlighted fenced code block
{
"type": "stat_card",
"value": "1B+",
"label": "daily executions"
}left-to-right step flow diagram
schema.yaml ──► generate.py ──► public/ ──► Cloudflare Edge
unordered list with optional bold label per item
- First item in the list
- Labelled item with supporting description
- Third item
horizontal visual section break
single image with optional caption
two images side by side with captions
D2 or SVG architecture diagram
styled GitHub repo link list
article closing paragraph with hashtags
A concise description of the content.
coloured tip info warning or danger highlight box
numbered step-by-step instruction sequence
data table with header row on mobile
label and value pairs in a compact grid
API endpoint method parameters and response docs
chronological event timeline
- 2024
A2UI v1
First atoms defined.
- 2025
467 atoms
Full schema published.
- 2026
ARD catalog
Live on a2uicatalog.ai.
big number metric with directional change indicator or percentage
compact inline value with mini trend bar the direction of a
in-page anchor navigation links document or to external URLs.
collapsible FAQ question and answer list the question is clicked.
definition term with explanation
- API
- Application Programming Interface
numbered footnote reference at the bottom of a section or page.
testimonial quote with avatar and attribution
"The vocabulary IS the discovery layer."
AAuthor Name
large display number pulled from prose for emphasis descriptive label.
styled link to an audio file
styled link to a downloadable document
image with styled caption below
features versus plans comparison matrix
single pricing plan card with features list
side-by-side pricing plan comparison different subscription plans.
two-column pros and cons comparison
two items compared spec by spec and values side-by-side.
product specifications in a clean table
multi-item attribute comparison grid
| Feature | Product A | Product B |
|---|---|---|
| Core feature | ||
| Advanced analytics | ||
| API access |
multiple items rated across dimensions scores.
feature capability tick list per tier capability using checkmarks
- First item
- Second item
customer testimonial with photo name and quote
“The catalog cut our build time in half.”
read-only star rating with score and count
stacked user avatar group with overflow count or community.
list of contributors with avatar and role
grid of customer or partner logos
social proof strip with stats and logos
press or media mention with logo and quote
expert quote with credentials and photo
"The vocabulary IS the discovery layer."
highlighted customer review excerpt by a star rating.
"Review text"
headline where the agent sets each word's emphasis 1-5; heavy words land bigger
claim set in type whose weight, size and tracking encode the stated confidence
claim plus numbered, sourced evidence lines printed as a till receipt; newest line prints in
struck-through old belief, new belief lands beneath; optional what-changed-it line
computed modular type scale as a specimen sheet with CSS custom properties
:root {
--step-6: 3.815rem; /* 61.04px */
--step-5: 3.052rem; /* 48.83px */
--step-4: 2.441rem; /* 39.06px */
--step-3: 1.953rem; /* 31.25px */
--step-2: 1.563rem; /* 25.00px */
--step-1: 1.250rem; /* 20.00px */
--step-0: 1.000rem; /* 16.00px */
--step-n1: 0.800rem; /* 12.80px */
--step-n2: 0.640rem; /* 10.24px */
}Flesch score, reading time and sentence stats computed from prose, longest sentence highlighted
paragraph with a dropped, raised, boxed or ornamental initial letter
A concise description of the content.
WCAG contrast ratios for colour pairs with AA/AAA badges and a nearest-passing fix
named resource rows with avatar, status badge, and meta
LLM prompt with highlighted {variable} slots and copy button
AI model spec card with context window, pricing, and capability badges
user prompt and AI response as chat bubbles
keyboard shortcut cheat-sheet grid with key combos and labels
star rating histogram with percentage bars per star level
quarter-based product roadmap with status-tagged milestones
persistent notification inbox list with unread indicators
horizontal wrap of neutral content chip labels
inline markdown string (bold, italic, code, links) rendered to HTML
multi-slice pie or donut SVG chart with legend
lightweight tinted inline tip or note block no icon
numbered RAG source card with title excerpt and URL
side-by-side multi-model output comparison table
labelled probability bar with colour-coded confidence fill
context window token usage meter with capacity warning colours
product card with image, price, status badge, and tags
e-commerce order card with status badge and line item list
inventory table with SKU, stock levels, and low-stock row highlight
Jira issue card with type icon, status lozenge, priority, and assignee
kanban sprint board with named columns and compact issue cards
Atlassian-semantic status pill with defined appearance variants
enterprise data grid with typed columns, row selection, and
recursive hierarchical tree with expand/collapse per node
▶ 📁src/
calendar month heatmap with date-value density colouring
icon + title + description feature grid — Tailwind UI pattern
labeled horizontal progress bars list — percent fill, per-bar color
icon + big number + label stat strip — more visual than metric_row
weighted tag cloud — variable size by weight, wrap layout
horizontal step progress — numbered circles, connecting lines, current step highlighted
light gradient hero — badge, large title, subtitle, CTA button
icon-circle list — emoji/icon per item, label + text, color per item
highlight box — gradient/solid/outline style, icon, title, text
horizontal metric strip — value, label, prefix/suffix, trend up/down
decorative numbered list — large background numbers, circular badges, or bordered stage cards
app-style page header — title, subtitle, icon, accent, tag badge
section divider — optional centered label, solid/dashed/dots style
multi-column layout — 2–6 cols, each column holds atom blocks
Public — every stable atom, no auth required.
Full — stable and preview atoms, gated behind Cloudflare Access.
person card — name, role, photo, bio, tags, email, linkedin
risk list — critical/high/medium/low with title, description, mitigation
action items table — action, owner, due date, status
asymmetric bento-box feature tile grid — MagicUI/shadcn pattern
full-width CTA banner with headline and buttons — Tailwind UI pattern
CSS repeating dot or grid pattern panel background
unlockable achievement badge with locked/unlocked state and optional date
end-of-exercise score card with correct/total, percentage, grade, and CTA
course-level progress card with per-module bars and aggregate completion ring
highlighted text passage with optional hover margin annotation note
self-contained QR code, optionally with a live URL input