DS · Atoms · /lab
Building blocks
Server-renderable primitives extracted from app/components/home-page.tsx and app/components/immersive-hero-client.tsx. Tokens flow through app/global.css and design-system/tokens.json. Live mounts deferred — / and /classic stay untouched until parity is verified here.
- noindex11 atomsread-only
Eyebrow
app/components/ds/eyebrow.tsxMono caps micro label. Resolves to --surface-fg-muted; surface-aware.
Section · 2026
Caret
app/components/ds/caret.tsxStep-blink underscore (1.08s). Honors prefers-reduced-motion via the global rule.
agentic system
NavCapsLink
app/components/ds/nav-caps-link.tsxMono caps link with letter-spacing-on-hover. The signature nav primitive. Accepts external for new-tab + rel.
Divider
app/components/ds/divider.tsx1px hairline with a 24px inset (overrideable). Color resolves to --surface-border.
inset = 0 above · inset = 24 (default) below
Pill
app/components/ds/pill.tsxFive tones: terra, gold, latte, wine, framed. Tonal fill at 12% so pills never compete with primary copy.
Button
app/components/ds/button.tsxThree variants: ghost (text-only), framed (hairline), terminal ([+] label). None default to a heavy fill.
LinkRow
app/components/ds/link-row.tsxHorizontal inline link list with a faint separator glyph (default ·). Decorative separators are aria-hidden.
TopBar
app/components/ds/top-bar.tsx48px sticky header with a hairline bottom border. Left/right slots accept any node — typically a wordmark and a LinkRow.
Footer
app/components/ds/footer.tsxHairline-topped strip with mono caps. Pairs with TopBar.
HeroFrame
app/components/ds/hero-frame.tsxFour 12px L-marks at each corner. A frame for hero copy that signals 'you are on the system' without enclosing the content in a box.
Hero · framed
Designing interfaces for intelligence
Surface
app/components/ds/surface.tsxSets [data-surface] so the --surface-* vars flip for the subtree. Wrap any composition to lock its mode.
Surface · immersive
Warm white on near-black. Border is --im-border.
Surface · classic
Ink on warm-gray. Border is --classic-border.
Compositions · atoms in concert
Two surfaces, eleven atoms.
Below: a mock immersive hero strip and a mock classic card strip, composed entirely from the atoms above. No WebGL, no DotGrid, no philosophy disclosure — those are the next layer.
Composition · immersive
/lab/atoms · noindex · do not link from public surfaces