The .agent design system
Live reference for every primitive. This page IS the source of truth — it uses the real components in production-grade Pretext-native CSS.
Color tokens
Spacing scale
Typography
Headlines & the billboard
Why .agent matters
Body copy uses Inter at 16–20px for readability. Long-form sections use the `lg` size for comfort.
Brand mark
The .agent wordmark — period always red, rest follows the surrounding context font. The hero billboard is the only intentional scale exception.
Hairlines
1px var(--hairline) — visible structure is the Swiss/Rams editorial move. Between sections, around grids, never doubled.
SearchField
Hero conversion primitive. Kinetic placeholder cycles through real-world examples, sticky .agent suffix follows the input, auto-width keeps the suffix tight to the text. Respects prefers-reduced-motion.
Billboard wordmark
Hero centerpiece. clamp(88px, 13vw, 168px) — the largest text on the page. Brand IS the hero. The only intentional scale exception to the type system.
.agent
PartnerGrid
Full-bleed 2×8 grid. White-fill SVG logos darken via filter to mid-gray; hover snaps to fully on-brand. Permanent mono captions under each cell — no tooltips (museum-plaque pattern). Last cell is the "see all" tile.
TrustGrid
Three-column TLD comparison. Each column gets a hairline border; the highlighted column (.agent) gets a 3px red left bar and an inline "PROPOSED" badge.
Accredited institutions only. Restricted since 1985.
Verified US government entities. Restricted and regulated.
Open community application to ICANN. Standards, governance, and discovery built in the open.
NotificationBar
Sits BELOW the navbar (not sticky — scrolls away with the page). Supports two contexts via data-context: default (mono on white) and DMV (terminal-green CRT for cross-property cohesion). Dismissable via the × button.
Forms
Flat-editorial form pattern — bottom-line inputs, mono uppercase labels, (?) tooltip explainers, 16×16 square checkboxes, inline toggles, mini-badge status pills. No box chrome. Quiet, structured.
Required — enter your full legal organization name
StatusPill
Rounded pill with a solid dot + mono uppercase label. Three variants for membership state. For compact inline availability use MiniBadge instead.
CometLoader
Rotating conic-gradient ring. A bright red head with a ~160° fading trail, masked to a donut. Reads as a "dot chasing its tail." Used by the search field during availability checks and inline in the Toast loading variant.
Member globe
Two-mode monochrome WebGL sphere powered by a dependency-free in-house renderer. Dots (presence) — tiny uniform member dots on the surface, rotating spotlight cast of logo + name cards. Towers (density) — hypsometric prisms on a smaller sphere: height ∝ √(count/max), log-scaled hypsometric ramp (green lowlands → gold → amber → orange → red peaks), one muted aggregate per country-only org. The spotlight cast keeps running over the towers. Red peaks aside, red is reserved for spotlight dots and the top-band tower peak. Hover pauses, drag rotates, cards link to member profiles. Fixture data; the live version feeds from /api/map/globe.
mode="presence" · Dots · maxSpotlights=4
mode="density" · Towers
Branded icons
Service glyphs used across auth providers and share surfaces. Prefer these over lucide brand icons — they ship matching stroke weights, sizing, and aria labels.
Callout
Flat-editorial block for long-form content — hairline rectangle with a 2px semantic left bar, mono uppercase label in the icon slot (no lucide inside callouts). Four types: note, info, tip, warning.
Toast (sonner)
Inverted flat-editorial rectangle — dark on light pages, light on dark. 2px semantic left bar (--bg accent for default/success/info, --warn for error/warning, --dotfor loading). Mono uppercase label in the icon slot replaces sonner's default colored circles.
API surface stays the same — call toast.success(title, { description }) / toast.error(…) / toast(…). The <Toaster> in app/layout.tsx is globally styled (see .ac-toast-* rules in globals.css). A server-side redirect can also trigger a toast on the destination page via ?type=signin|signup|error|success|info&message=….
Docs / blog prose
Signature rules — top-hairline H2 with a red § marker, hairline-dash <ul>, mono red counter <ol>, display-italic blockquote on a red bar. Full renderers live in components/content/mdx-components.tsx and ship automatically for every page under /docs and /blog.
Heading 1
Heading 2 with § marker
Heading 3
Heading 4
Body copy sits at 17px / 1.7 line-height on --fg-soft, capped at 68ch for comfort. Links use an animated bottom-line in --dot that thickens to full-width on hover.
- Early internet — IP addresses connected machines. DNS made the web usable for humans.
- Social platforms — user IDs ran the database. Handles made communities possible.
- Agents — endpoint URLs connect systems. Names will make the agentic web trustworthy.
- Who can name agents — and who can't.
- Discovery — which agents are findable and which aren't.
- Trust signals — what counts as "verified" and who decides.
"Whoever controls the naming layer for agents decides what's legible on the agentic web. That choice should not be privatized."
Resolve an AID record with a standard dig TXT query.
dig TXT _aid.support.acme.agent +short # → "v=aid1; capabilities=chat,support"
| Phase | Window | Status |
|---|---|---|
| Community building | 2024 – 2026 | Active |
| ICANN window | 30 Apr – 12 Aug 2026 | Pending |
| Delegation | 2027+ | Conditional |
Lead paragraphs sit between a heading and the body — Inter 19–20px, muted-strong color, tight tracking. Use for the intro under an H1 / H2.