Registry
Every shared component, in one place. Each entry is the quick overview — what it is, when to reach for it, what it is built from. The essays behind the tricky ones live on the Dock page: read the entry to use a component, read the essay to change it.
site-nav the Dock
The bottom tab bar with the sliding highlight pill. Data-driven and generalized to N tabs — nothing in the bar knows the count.
- Use whenNavigating between the section's top-level pages. Main pages get a
TABSentry, docs pages aDOCS_TABSentry; utility pages get a drawer link instead. - Markup
<site-nav></site-nav>—chrome.jsreads<body data-page>to pick the tab set, set the active tab, and position the pill. The dock on this page is the live specimen. - Tokens
--nav,--green,--ink,--muted - Deep diveAnatomy, the pointerdown/click contract, and the Android gesture-bar saga — dead ends included.
site-header
The fixed header: menu button, avatar + Herman pill, Instagram shortcut, and the slide-in drawer with every destination.
- Use whenNever directly — it renders on every page. Edit the markup in
chrome.js. - Markup
<site-header></site-header>. The menu-button SVG is inlined, not sprited: paths inside a<use>shadow tree can't be CSS-targeted, and the morph needs them. - Tokens
--control,--ink,--header-core,--header-mid
Contact panel
The green contact card: headline, a mailto link, and a copy-email button whose icon morphs into a check on copy. Lives on /contact/; kept out of the home page by design.
- Use whenThe direct call to reach out. The copy button morphs via
.copy-buttoninsite.js— no separate toast, since Android shows its own "Copied" popup. - Markup
.contact-panel>.contact-content+.contact-options(the mailto link and the.copy-buttonwithdata-copy). - Tokens
--greenfor the panel, white text;--green-strongfor the links
Buttons
Three controls, three jobs. .action is the labeled button (primary fills, secondary outlines), .icon-button is the compact header action, .skill is metadata — never navigation.
- Tokens
--green,--green-soft,--control,--ink
Icon sprite
One shared SVG sprite in chrome.js owns every interface symbol. Edit a symbol once and every instance updates.
- Conventions24 × 24 viewBox,
currentColor, round joins, 2px default stroke. Purpose-first IDs (icon-mail, noticon-envelope). New symbols come from Tabler — inner path data only, so the stroke styling keeps working. - Try itThe stroke slider in the icon lab previews every symbol at any weight.