Every example includes its anatomy, geometry, behavior, states, content rules, and implementation source.
Public evidence18 Sep 2026Observed sources. Explicit local contracts.
60 runnable local contracts. The 120-family product inventory remains the independent denominator. Local contracts are reconstructed unless explicitly marked as original additions.
Global shell · complete implementation on this page
Keep the main product destinations available above long marketing pages.
Anatomy
header > nav > brand link + link group + utility actions; native menu button below 880px.
Geometry
Desktop 1204px maximum × 76px; fixed top 16px; padding 16px 32px; 16px radius; 1px #ffffff0f border; blur 5px. At <880px height 58px and padding 16px. Parent owns outer 16px gutter.
Behavior
Links use native navigation. Menu button toggles aria-expanded; Escape closes and returns focus. Source hamburger is a div; native button semantics are a local accessibility correction.
Content
Keep short single-line destinations. Current route uses aria-current="page". Never place a secondary product action before global navigation.
States, responsive rules, source trace, and code
Variants and states
Variants: desktop; compact desktop; mobile closed; mobile open.
States: default; hover; focus; expanded.
Parts: container → brand → link group → utility group → menu trigger → mobile menu.
Use and avoid
Use this contract for keep the main product destinations available above long marketing pages. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured shell roots: evidence/capture-more/pages/home-1440.json and home-390.json measurements[3] are 1204×76px and 358×58px; the local outer boxes match. Internal content and layout differ: the desktop source brand group is 93px wide versus the measured local 164.84375px with its reference badge, and source navigation has nine destinations versus six guide destinations. Local search utilities and the native menu button are adaptations. Source home-1440.json measurements[7] has a 41px link; the measured guide before repair was 46.390625px. The integrated line-height:normal repair measures 41px with a fine pointer, matching the captured source height; the retained coarse-pointer probe measures 44px. The exact integrated comparison is retained in reference-data/evaluation-rounds/3/pending-critical-comparisons/local-round4-final/report.json. Its local Overview label remains 81.15625px wide versus 52.5px for the source Store label. Those content differences and guide utilities remain explicit; matching the link height and outer boxes does not establish whole-shell equivalence.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
14px/500 Inter; normal line-height 17px; tracking .2px; padding 12px 8px; radius 6px; no border. Parent owns gap 8px in local reference; source main nav gap 16px at >=880px.
Behavior
Enter follows href; browser supports Back and open in new tab. Hover 200ms color transition; current page uses aria-current.
Content
Use the destination noun: Store, Pricing, Components. Do not attach a click handler to a span.
States, responsive rules, source trace, and code
Variants and states
Variants: default.
States: default; hover; focus; current.
Parts: label.
Use and avoid
Use this contract for move between destinations without confusing navigation with a command. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Desktop heading 64/600/1.1, max 540px; text wrapper max 818px, padding 370px 16px 212px, gap 32px. At <720px top 260px, heading 48px; at <480px heading 36px.
Behavior
First paint source fades in over 1s from translateY(20px); reference uses a stable captured background and immediately readable text. Reduced motion is static.
Content
One h1 per page; sentence case; body max 490px and balanced wrap. Avoid arbitrary hard breaks on narrow screens.
States, responsive rules, source trace, and code
Variants and states
Variants: home; feature; mobile.
States: default; reduced-motion.
Parts: heading → body → background → actions → announcement.
Use and avoid
Use this contract for introduce one product promise and one primary action. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
The guide uses a stable captured background and its own supporting copy. A 12% grey-900 scrim is a local accessibility addition over the existing background gradients; it is not observed Raycast paint. The normal-text contrast target is 4.5:1. The retained pixel probe measures the actual caption over the image at narrow, wide, expanded-copy and 200% text conditions in Chromium, Firefox and WebKit.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
H2 local reference 40px/600/1.1, max 600px; body 14px/1.6 max 360px; header margin-bottom 40px; parent owns section 88px vertical padding; phone 56px. Source sizes differ per marketing family.
Behavior
Reading order remains eyebrow, heading, supporting text across stacking. Anchor targets scroll below fixed header.
Content
The heading states the benefit or topic. Descriptions add implementation detail rather than restating it.
States, responsive rules, source trace, and code
Variants and states
Variants: row; stacked.
States: default.
Parts: eyebrow → title → description.
Use and avoid
Use this contract for make a long feature story scannable. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
button[type=button] for local action; a[href] for navigation; optional leading 16px icon and label.
Geometry
Fine-pointer min-height 36px (small 28px; large 44px); padding 8px 12px; gap 8px; radius 8px; no border; Inter 14/500/16px, tracking .2px. Width is intrinsic. Parent owns 12px adjacent-action gap. Coarse-pointer action targets, including small buttons, are at least 44×44px; this is a local accessibility adaptation.
Behavior
Hover background becomes white over 200ms; press scales .98 over 100ms. Native button Space/Enter. Loading retains label/width and sets aria-busy; disabled native button cannot execute.
Content
Verb + object, for example Open reference. Never use an icon as the only accessible name. Labels wrap only with .long-label.
States, responsive rules, source trace, and code
Variants and states
Variants: default36; small28; large44; leading icon; trailing icon.
Use this contract for offer one clear next step in a group. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured default light actions: evidence/capture-more/pages/home-1440.json measurements[17] is the Download for Mac anchor (173.375×36px); evidence/capture-final/pages/pricing-390.json measurements[39] is the Start Free Trial button (308×36px). The measured local Open reference button is 155.203125×36px at both fine-pointer widths. Height, 14px/500 type, padding, 8px corners, outer-shadow alpha .5 and the four-property transition list align in these defaults. Guide copy, icon meaning, parent width allocation, inline-flex display and native appearance differ. The phone source button has normal font features; the desktop source anchor inherits them. This pair does not establish a responsive font-feature rule. Coarse minimum 44px is a local accessibility adaptation. These measurements do not establish full action-family or other-state equivalence.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Offer an alternative without competing with the primary action.
Anatomy
button or link with .button.dark; optional16px icon.
Geometry
Same fine-pointer 36px geometry as primary; coarse-pointer minimum 44×44px. #28292b background; text #e6e6e6; inset white highlight and 1px outer edge.
Behavior
Hover to #353639; active scale .98; focus uses 2px blue ring at 4px offset.
Content
Use for a less important next step such as View source or Cancel. One light button per action group.
States, responsive rules, source trace, and code
Variants and states
Variants: text; icon-leading.
States: default; hover; focus; active; disabled.
Parts: root → icon → label.
Use and avoid
Use this contract for offer an alternative without competing with the primary action. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Expose frequent utility actions without adding a solid surface.
Anatomy
button.button.ghost with optional icon.
Geometry
Fine-pointer 36px minimum height; coarse-pointer minimum 44×44px. Padding 8px 12px; radius 8px; transparent fill; no shadow; text #b9bbbf.
Behavior
Hover uses #ffffff0a. Escape is reserved for closing a parent surface, not activating the action.
Content
Use short verbs like Copy or Reset. A destructive action must include the object and a separate confirmation when irreversible.
States, responsive rules, source trace, and code
Variants and states
Variants: text; icon-leading.
States: default; hover; focus; active; disabled.
Parts: root → icon → label.
Use and avoid
Use this contract for expose frequent utility actions without adding a solid surface. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Fit a known utility into a small toolbar or close control.
Anatomy
button with a visible 16px icon and aria-label. Tooltip may describe the same action.
Geometry
Minimum 36×36px; padding 10px; radius 8px; border 1px#ffffff0f. A 16px glyph plus this padding and border renders 38×38px. Coarse pointer minimum 44×44px.
Behavior
Space/Enter executes. Tooltip appears on hover/focus; Escape dismisses; no hover-only operation.
Content
Use Close dialog, Previous slide, or Copy link, not an unlabeled glyph.
States, responsive rules, source trace, and code
Variants and states
Variants: close; previous; next; share.
States: default; hover; focus; disabled.
Parts: root → glyph → tooltip.
Use and avoid
Use this contract for fit a known utility into a small toolbar or close control. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Reference action opens implementation instructions; original installer URL is a separate external link. Do not silently start downloads in a research specimen.
Content
Keep platform and hardware prerequisites explicit. Legacy-download link remains visually secondary.
Use this contract for explain platform compatibility beside the installer entry point. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
a containing label and 16px directional arrow inside a bordered pill.
Geometry
32px outer height;43px radius; padding 7px 12px; gap 10px;14/400/16px; border #452324; dark warm surface; subtle red glow.
Behavior
Hover changes border 200ms. Original animated conic edge is frozen in reference. Static reduced-motion fallback always retains link affordance.
Content
Use one specific announcement. Keep the link destination obvious; avoid looping motion on an essential control.
States, responsive rules, source trace, and code
Variants and states
Variants: default; reduced-motion.
States: default; hover; focus.
Parts: border → label → arrow.
Use and avoid
Use this contract for call attention to one timely product release. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Use an address you can access. Local example only.
Collect a small amount of structured information.
Anatomy
label[for] + input[id] + helper/error linked by aria-describedby. Optional leading icon in .input-wrap.
Geometry
Native input.input: min-height 42px; padding 8px 12px; 1px border; 8px radius; 14/500/16.1px with .2px tracking. At viewport widths up to 480px, type is 16/500/18.4px. Label/help gap 8px. Parent form owns 20px between fields. Icon-bearing .input-wrap uses its separate wrapper/input rules.
Behavior
Validate on local submit, then clear invalid marker on edit. Preserve input on error/offline. Native email autocomplete. Focus border #56c2ff and 3px low-opacity ring.
Content
Visible label remains after placeholder disappears. Example email uses name@example.com. Never put real credentials in fixtures.
Use this contract for collect a small amount of structured information. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
Measured anonymous sign-in fields: evidence/inventory/boundary/signin-1440.json and signin-390.json geometry[107] are the original wrappers; geometry[27] is each email input. Source inputs are 282×42px on desktop and 342×42px on phone; the measured catalog inputs are 360×42px and 316×42px. The local persistent label and helper are accessibility/content additions, producing a 96.796875px-high wrapper. The native input contract now follows the observed 8px vertical padding, weight 500, .2px tracking, 14px/16.1px desktop type and 16px/18.4px type through 480px. Wrapper anatomy, parent width allocation, borders, colors and placeholder copy still differ. Shared input metrics do not establish full visual or state equivalence.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Preserve newlines and input on simulated error. Required state validates when submitting. No automatic send on Enter; user chooses explicit action.
Content
Ask for observable behavior. Do not request sensitive information. Long words wrap without moving the layout.
States, responsive rules, source trace, and code
Variants and states
Variants: empty; filled; invalid; readonly.
States: empty; filled; focus; invalid.
Parts: label → field → helper.
Use and avoid
Use this contract for let a visitor explain a feedback issue or write longer content. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Visible label + native select + option list; source uses a Radix combobox in Store.
Geometry
Min-height 40px; padding 9px 30px 9px 12px;13/20px;8px radius;1px#ffffff1a border. Browser owns option popup geometry in the local native reconstruction.
Behavior
Arrow keys navigate native options; Enter commits; Escape cancels. All is an explicit option. Selection and search combine with AND.
Content
Keep values stable IDs. Labels are readable nouns; never use selected label text as a backend identifier.
States, responsive rules, source trace, and code
Variants and states
Variants: all; selected; disabled.
States: default; focus; selected; disabled.
Parts: label → trigger → value → options.
Use and avoid
Use this contract for choose one value from a bounded list. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Toggle a single independent preference or a member of a set.
Anatomy
label wrapping native input[type=checkbox] and text.
Geometry
16×16px control; gap 8px; label 13px; wrapper minimum 44px on coarse pointer. Accent#ff6363.
Behavior
Space changes checked state; label click activates; native checked announcement. Indeterminate is set as a DOM property for a grouped local extension.
Content
Use a full descriptive label. Do not turn a single opt-in into a multi-step action.
States, responsive rules, source trace, and code
Variants and states
Variants: unchecked; checked; indeterminate.
States: default; focus; checked; disabled.
Parts: control → label.
Use and avoid
Use this contract for toggle a single independent preference or a member of a set. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Make an immediately applied binary preference visible.
Anatomy
label + native checkbox styled as switch; role=switch with checked state.
Geometry
Track 32×20px; thumb 14px with 3px inset; travel 12px; label gap 10px; background #3b3d40 to #e45259.
Behavior
Space toggles.200ms background/thumb transition; reduced motion removes transition. State is page-local, resets on reload.
Content
Use a noun phrase such as Reduce animations. Never use a switch for a submit action.
States, responsive rules, source trace, and code
Variants and states
Variants: off; on.
States: default; hover; focus; checked; disabled.
Parts: track → thumb → label.
Use and avoid
Use this contract for make an immediately applied binary preference visible. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Compare annual and monthly pricing without losing the selected plan.
Anatomy
fieldset + legend + two native radio labels inside segmented shell.
Geometry
Two equal columns; intrinsic width; shell min-height 62px, padding 8px, gap 4px and radius 31px. Border is 1px on top and inline edges, 0px on bottom. Native radio labels have min-height 45px, padding 0 16px, radius 22.5px and 14/500/22.4px type with .2px tracking. In normal colors, the shell uses the source dark linear gradient and the checked label uses the source gray radial gradient.
Behavior
Radio arrow keys select. Updating period updates visible price and billing note together; polite live announcement; no network mutation.
Content
Spell out billing cadence next to the amount. Prices are capture-date examples; link official pricing for current terms.
States, responsive rules, source trace, and code
Variants and states
Variants: annual; monthly.
States: default; focus; selected.
Parts: fieldset → radio → label → selection.
Use and avoid
Use this contract for compare annual and monthly pricing without losing the selected plan. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Public /pricing evidence: pricing-1440-full.json measurements 16–21 (part-16 root, part-17 Monthly, part-19 Yearly/-20%, part-20 discount, part-21 backdrop); pricing-390.json measurements 17–22. The observed root is 279.90625×62px with 45px options. The local reconstruction keeps Annually then Monthly and native radios, with a 62px minimum shell, 8px padding, 31px radius and 14px/500 visible label text. Source visible labels use 22.4px line height and .2px tracking; the compared source DIV wrappers inherit 16px text. Local checked-label paint replaces the separate source backdrop. Order, copy, discount, intrinsic width and wrapper anatomy still differ; no source-equivalence or private billing behavior is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
group of buttons with aria-pressed; one true at a time.
Geometry
Intrinsic-width flex shell; min-height 40px, padding 4px, gap 2px and radius 999px. Three options have min-height 30px, padding 0 8px, radius 999px and 14/500/16.1px type. Coarse-pointer options are at least 44×44px. Normal-color hover changes the option text to white; aria-pressed identifies the selected option.
Behavior
Click, Left/Right, Home/End select. Pair price and entitlement fixture atomically. Invalid tier falls back to prior valid selection.
Content
Use exactly the tier IDs pro, plus, max; visual labels may be Pro, Plus, Max. Selection never starts a subscription.
States, responsive rules, source trace, and code
Variants and states
Variants: pro; plus; max.
States: default; focus; selected.
Parts: root → option → selected option.
Use and avoid
Use this contract for choose a Pro tier within the same plan card. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Public /pricing evidence: pricing-1440-full.json measurements 37–40 (part-37 root and part-38/39/40 Pro/Plus/Max); pricing-390.json measurements 32–35. The observed desktop root is 303.328125×40px (308×40px at 390px), with 4px padding, 999px radius and 14px/500 option text. The local reconstruction follows those padding, radius and text metrics but keeps an intrinsic-width flex shell. Source grid allocation, width, parent offsets and captured states remain differences. The phone source Max option is hovered while aria-pressed is false; the local default inactive color remains gray and its hover state becomes white. The 44px coarse-pointer target is a local accessibility adaptation. Tier labels and local selection behavior do not establish pixel equivalence or private entitlements.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
tablist containing button[role=tab] with aria-controls; associated tabpanel has aria-labelledby.
Geometry
44px minimum target;12px vertical padding;14/20px labels; parent gap 20px; bottom border 1px; active underline 2px.
Behavior
One tab stop in group. Arrow keys, Home, End move and activate. Hidden panels are removed from focus order. URL tabs used for route navigation stay links instead.
Content
Use parallel category names. Do not mix a destructive command into a tab list.
States, responsive rules, source trace, and code
Variants and states
Variants: panel tabs; route tabs.
States: default; hover; focus; selected.
Parts: tablist → tab → indicator → panel.
Use and avoid
Use this contract for switch between panels inside one local context. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Open the command-style catalog search from any page.
Anatomy
button with search icon, visible Search label and optional keyboard shortcut.
Geometry
Min-height 36px; icon16px; gap 8px; label 13px; keyboard badge20×21px.44px target on coarse pointer.
Behavior
Click or Cmd/Ctrl+K opens local dialog. Escape closes and restores the opener. Trigger remains available on mobile.
Content
Search includes routes, components, tokens, icons, patterns, contracts and handoff. Do not make shortcut the only access path.
States, responsive rules, source trace, and code
Variants and states
Variants: desktop; mobile.
States: default; hover; focus; expanded.
Parts: button → glyph → label → shortcut.
Use and avoid
Use this contract for open the command-style catalog search from any page. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Field geometry specimen. The catalog search below filters real entries.
Filter a collection while preserving the user’s query.
Anatomy
input[type=search] with persistent label and result count role=status.
Geometry
40px minimum wrapper;12px horizontal inset;20px line box;16px optional glyph with 8px gap.
Behavior
Filter with case/diacritic-insensitive substring match; URL q and category update via replaceState; no network. Clear preserves category. A deep link reveals its target even if filtered.
Content
Use task-specific labels such as Search icons. Empty results repeat the query safely via textContent and offer Clear.
Use this contract for filter a collection while preserving the user’s query. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Arrow keys move through dialog results; Enter follows href. Screen reader receives link title and description. Result count announces without stealing focus.
Content
One destination per row. Long titles wrap; secondary category hides on narrow screens.
States, responsive rules, source trace, and code
Variants and states
Variants: default; long label; missing description.
States: default; hover; focus.
Parts: root → label → description → category.
Use and avoid
Use this contract for expose name, context and destination in a compact list. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Use this contract for search the reference from the keyboard with a predictable dismissal path. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Native focus containment, Escape and explicit close. Outside click closes informational dialogs; confirmation dialogs require an explicit choice. Return focus to opener.
Content
Title names the task; button labels name outcomes. Do not place essential instructions only in the backdrop.
States, responsive rules, source trace, and code
Variants and states
Variants: information; confirmation; mobile.
States: closed; open.
Parts: backdrop → header → title → close → body → actions.
Use and avoid
Use this contract for hold a focused explanation or confirmation above the current page. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Use this contract for expose a copyable package-manager command beside the relevant installer. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Explain a familiar icon without replacing its accessible name.
Anatomy
focusable trigger with aria-describedby plus role=tooltip text.
Geometry
8px anchor gap;6px 8px padding;5px radius;11/16px type; nowrap for short text; viewport gutter16px for long fallback.
Behavior
Hover or focus reveals; Escape dismisses until next entry. Never contains actions. Touch uses the visible/accessibility label instead.
Content
Keep to one short phrase. Essential or interactive help belongs in a popover or inline text.
States, responsive rules, source trace, and code
Variants and states
Variants: above; fallback-inline.
States: hidden; hover; focus; dismissed.
Parts: trigger → bubble → text.
Use and avoid
Use this contract for explain a familiar icon without replacing its accessible name. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Clipboard API on click; success label lasts1.8s, toast4s; denied clipboard keeps code visible and offers manual selection. No pasted text is executed.
Content
Preserve literal whitespace and escaping. Do not replace code with an image.
States, responsive rules, source trace, and code
Variants and states
Variants: single line; multiline.
States: default; copied; failed.
Parts: bar → language → copy → pre → code.
Use and avoid
Use this contract for make exact tokens and implementation snippets retrievable. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
The public website, its visible components and tested local reconstructions. Authenticated account and native-app behavior are separate evidence boundaries.
Can I copy the local CSS?
Yes. The implementation page links the reference’s authored stylesheet, token data and examples.
Keep supporting questions available without overwhelming the page.
Anatomy
details > summary + answer block; local native reconstruction of source accordion button/region.
Geometry
Summary min-height 64px; padding 20px 0; gap 24px;15/24px label; answer padding 0 32px 24px 0;14/1.7 text;1px separators.
Behavior
Enter/Space toggles natively; multiple answers may stay open; focus remains on summary. Expanded content enters normal reading order.
Content
Question is specific; answer begins with the useful fact. Link a current first-party source for changing plan terms.
Use this contract for keep supporting questions available without overwhelming the page. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Text carries meaning; color is supplementary. Decorative icons hidden from accessibility tree.
Content
Use New, Pro, Windows or a concise status. Avoid long sentences and unexplained abbreviations.
States, responsive rules, source trace, and code
Variants and states
Variants: neutral; new; pro.
States: default.
Parts: root → icon → label.
Use and avoid
Use this contract for add short metadata without competing with the title. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Use this contract for associate an extension, article or quotation with its author. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Padding 24px; gap 16px; radius 12px;1px border; title16/600/24px; description13px/1.6 max 2lines;3→2→1 grid at 880/720px.
Behavior
Title navigates to detail. Hover border brightens and card translates−2px; reduced motion removes transform. Actions are siblings, not nested interactive links.
Content
Keep real platform/author fields. Missing description uses an explicit fallback; long name wraps. Count text is secondary, never an implied endorsement.
Use this contract for help a visitor decide which integration to inspect. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Give editorial emphasis to a small curated set above the full collection.
Anatomy
large artwork or colorful panel + extension icon/name + author + install/share action group.
Geometry
Source has3 desktop columns; local card min-height 320px,24px inset,64px icon,16px radius; headings22px; mobile one column.
Behavior
Install is an explicit external-app boundary. Share copies a stable canonical URL. Do not nest Share within an encompassing link.
Content
Featured is editorial placement. Do not label a card Most popular without a stated ranking source.
States, responsive rules, source trace, and code
Variants and states
Variants: desktop; mobile.
States: default; hover; share-copied.
Parts: art → icon → name → description → author → install → share.
Use and avoid
Use this contract for give editorial emphasis to a small curated set above the full collection. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Give each feature one clear purpose, then show enough of the interface to make it concrete.
Explain one capability with supporting product imagery.
Anatomy
article > optional40px icon + h3 + paragraph + image or DOM demonstration.
Geometry
32px inset; radius 20px;1px border; h3 22px/500/1.2; description14px/1.6 with 12px gap; image begins32px after text.
Behavior
If card navigates, use one named link. Decorative demo does not trap keyboard focus. Motion receives static reduced-motion image.
Content
Describe the outcome and one concrete use. Label native screenshots as appearance evidence, not a functional web app.
States, responsive rules, source trace, and code
Variants and states
Variants: half-width; full-width; stacked.
States: default; hover; reduced-motion.
Parts: icon → title → description → demo → link.
Use and avoid
Use this contract for explain one capability with supporting product imagery. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Compare a plan’s commitment, price and included capabilities.
Anatomy
article > plan title + summary + optional tier selector + price/cadence + action + feature list.
Geometry
Local padding 28px 24px;16px radius;1px border; title20px; price40px tabular numerals; CTA36px fullwidth;24px gap before list. Source desktop 4 columns including enterprise; local specimens group3 with explicit enterprise callout.
Behavior
Billing and tier selections update a single fixture state. Source purchase/auth paths are linked, never simulated as real checkout. All displayed values carry capture date.
Content
Always show per-seat versus per-person and billing cadence. Unknown prices are Contact us, not zero.
States, responsive rules, source trace, and code
Variants and states
Variants: free; pro; teams; enterprise.
States: default; annual; monthly; tier-selected.
Parts: title → summary → tier → amount → unit → cadence → cta → feature-list.
Use and avoid
Use this contract for compare a plan’s commitment, price and included capabilities. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Use this contract for compare the same property across plans without losing row meaning. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
assets/reference.css · .comparison-table · CSS
/* Composition: preserve the inline styles in the copied anatomy.
* .comparison-table: width:100%.
* Shared stylesheet dependencies: .table-wrap, table, th, td.
* Include assets/reference.css and its shared tokens, reset, and fonts.
*/
13px/1.5; icon-to-text 8px; icon top offset 2px; row gap 18px in plan cards. List owns row spacing; text may wrap independently.
Behavior
List is read in source order; check glyph hidden because wording conveys availability.
Content
Keep each item to a single capability. State qualifiers in text, not only tooltips.
States, responsive rules, source trace, and code
Variants and states
Variants: compact; pricing.
States: default.
Parts: list → item → icon → label.
Use and avoid
Use this contract for make a card’s included capabilities easy to scan. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Local measured reconstruction max 620px;12px radius;1px border; header64px inset 20px; rows40px with 8px inset and 12px gap; footer10px 16px; translucent dark gradient.
Behavior
In the reference, a labeled demo input filters its local rows only. It cannot launch apps. Runtime actions and private shortcuts remain outside scope.
Content
Use plausible app commands and clear labels. Never describe a screenshot or mocked row as an installed extension.
States, responsive rules, source trace, and code
Variants and states
Variants: root search; extension list; mobile fit.
Use this contract for demonstrate the launcher’s hierarchy within a public marketing illustration. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Choose one clear outcome. Make time for it, then leave room for a break.
Example context
Authored scenario content. No model request was made.
Drafts stay on this page and reset on reload.
Explain public AI capabilities using the message/composer hierarchy shown on marketing pages.
Anatomy
scenario sidebar (phone selector) + conversation messages + illustration/context labels + local draft composer and status.
Geometry
Local640px maximum frame;12px radius;sidebar160px;message area24px padding with20px gaps;13/20.8px text;composer42px minimum. Below720px the sidebar becomes a labeled select above the conversation.
Behavior
Three authored scenarios change the visible conversation while preserving the unsent local draft. Empty draft checks show an error; a ready draft states that no model request was made. No chat is persisted. Public source uses a DOM marketing mockup; native app behavior is not verified.
Content
Label the specimen as a public-page reconstruction. Use synthetic content and never real secrets or account files.
Use this contract for explain public AI capabilities using the message/composer hierarchy shown on marketing pages. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Show a keyboard alternative beside a visible action.
Anatomy
kbd element per key; a horizontal group for combinations.
Geometry
Min-width 20px;height 21px;padding 1px 4px;border 1px#ffffff1a;radius 4px;11px mono;group gap 4px.
Behavior
Shortcut text is descriptive. Actual handlers ignore unsupported or conflicting platform combinations. The same operation has a visible pointer path.
Content
Use Cmd on Mac and Ctrl elsewhere in explanatory copy. Do not claim browser-global shortcuts belong to Raycast.
States, responsive rules, source trace, and code
Variants and states
Variants: single key; combination.
States: default.
Parts: cap → label → group.
Use and avoid
Use this contract for show a keyboard alternative beside a visible action. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
An authored example of Raycast’s editorial hierarchy.
Preview a blog, customer or community story with date and author context.
Anatomy
article > image link + category/date + h3 link + excerpt/byline.
Geometry
Image16:9 with cover focal center;16px radius; body 24px;title22px/1.3;metadata 11px;grid3→2→1.
Behavior
Title/image share the same destination; a whole card uses one link only if no other action is nested.
Content
Keep original title in metadata source ledger; reference specimens use concise paraphrases. Date display is unambiguous.
States, responsive rules, source trace, and code
Variants and states
Variants: featured; grid; missing image.
States: default; hover; focus.
Parts: image → category → date → title → excerpt → byline.
Use and avoid
Use this contract for preview a blog, customer or community story with date and author context. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Native links and hash anchors; stable document title; browser Back preserves route. Print removes fixed navigation and dark backgrounds.
Content
Preserve semantic order. Dates use18 Sep 2026 display and ISO datetime. Never hard-code private legal promises into a new prototype.
States, responsive rules, source trace, and code
Variants and states
Variants: blog; resource; legal; print.
States: default; long content.
Parts: title → metadata → body → heading → list → figure → caption → code.
Use and avoid
Use this contract for keep long reading surfaces consistent with the marketing shell. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Timeline inset 32px after 1px left rule;9px marker with 2px surface border;version11px mono;title22px;body 14px;entry bottom 40px.
Behavior
Platform tabs are links; version detail is a route. Pagination updates the route instead of silently appending to history.
Content
Group additions, improvements and fixes. A version identifier is a string, not a decimal number.
States, responsive rules, source trace, and code
Variants and states
Variants: index; detail; platform.
States: default.
Parts: marker → version → date → title → body → media → platform.
Use and avoid
Use this contract for explain a version’s changes in chronological order. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
nav[aria-label=Breadcrumb] > ordered list or link/text sequence; current item unlinked.
Geometry
12px text; gap 8px;16px separators; parent owns 24px separation from heading.
Behavior
Enter navigates to ancestors. Browser Back complements breadcrumbs; never replace native history.
Content
Use the actual parent collection and current object. Decorative chevrons are hidden.
States, responsive rules, source trace, and code
Variants and states
Variants: two-level; three-level.
States: default; hover; focus.
Parts: parent-link → separator → current.
Use and avoid
Use this contract for preserve collection context on a detail surface. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Browse bounded extension or editorial pages with stable URLs.
Anatomy
nav[aria-label=Pagination] containing Previous, numbered links and Next.
Geometry
36px minimum controls;8px inter-item gap; active current-page badge;44px targets for coarse pointer.
Behavior
Links include explicit page parameter/path. Disabled boundaries are text or disabled buttons, never broken href. Focus remains on the selected page after document navigation.
Content
Provide total pages when known. Ellipsis is presentational, not a misleading link.
States, responsive rules, source trace, and code
Variants and states
Variants: first; middle; last; mobile.
States: default; current; disabled.
Parts: previous → page → current → ellipsis → next.
Use and avoid
Use this contract for browse bounded extension or editorial pages with stable URLs. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Compare several product screens without changing page context.
Anatomy
Three labelled panels with one visible slide, previous/next buttons and a live position counter.
Geometry
Local panels are 220px high with 12px radius. Toolbar margin-top 24px and gap 12px; button-row gap 12px, reducing to 10px at widths up to 479px. Actions use 10px padding and a 36px minimum box, raised to 44px for coarse pointers. Position is a live text counter.
Behavior
Local example advances on explicit buttons only; no autoplay. Announce3 of 5. Disable ends or document wrap; reference chooses bounded ends.
Content
Captions explain what changed. Do not crop essential controls from screenshots.
States, responsive rules, source trace, and code
Variants and states
Variants: desktop; mobile.
States: first; middle; last.
Parts: frame → media → caption → previous → next → position.
Use and avoid
Use this contract for compare several product screens without changing page context. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
assets/reference.css · .carousel-demo · CSS
/* Composition: preserve the inline styles in the copied anatomy.
* .carousel-demo: width:100%.
* Each .panel-art[data-slide]: border-radius:12px.
* Each slide label: margin-left:20px.
* Shared stylesheet dependencies: .panel-art (and .blue/.purple/.red),
* .carousel-toolbar, .button-row, .icon-button, .spec-note, and icon sizing.
* Include assets/reference.css and the carousel interaction controller.
*/
Show attributed public evidence with a readable quotation hierarchy.
Anatomy
figure > blockquote + figcaption with author avatar/name/role.
Geometry
Panel32px inset;16px radius;quote20px/1.5;28px gap before byline;avatar32px;byline gap 12px;role11px.
Behavior
A selector can switch stories with explicit buttons; no automatic focus movement. Links identify the full story.
Content
Reference examples use clearly labeled synthetic quotations. Do not invent an endorsement or assign a real person fabricated words.
States, responsive rules, source trace, and code
Variants and states
Variants: single; selector; long quote.
States: default; selected.
Parts: quote → avatar → name → role → source.
Use and avoid
Use this contract for show attributed public evidence with a readable quotation hierarchy. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
assets/reference.css · .quote · CSS
.quote{padding:32px;border:1px solid #ffffff14;border-radius:16px;background:radial-gradient(ellipse at top right,#ffffff04,transparent)}
.quote blockquote{font-size:20px;font-weight:400;line-height:1.5;color:#e6e6e6;margin:0 0 28px}
.quote .byline{display:flex;align-items:center;gap:12px;font-size:12px}
Offer a mobile visitor a route back to desktop installation.
Anatomy
form > visible email label/input and submit row + privacy/helper + local outcome selector + feedback.
Geometry
Field42px;button36px (44px touch);input/action row gap12px;stacked below720px;form max440px;helper, outcome selector and feedback each follow a16px form gap.
Behavior
Reference validates locally and never sends email. Original submit outcome not exercised. Preserve input on simulated errors; duplicate submit blocked while pending.
Content
State precisely that the specimen is local. Never imply that an email was sent when no delivery occurred.
Use this contract for offer a mobile visitor a route back to desktop installation. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Source public form states up to 5 files and 20 MB each. The local draft uses an exact 20 MiB limit (20,971,520bytes), validates count/size together with the form, preserves rejected selections, and never uploads. Native keyboard selection and a clear action remain available.
Content
Display limits before selection. Show filenames via textContent, preserve draft on failure, allow clearing selected files.
Use this contract for attach supporting files to a feedback draft with clear limits. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Document the public gateway and where evidence ends.
Anatomy
brand + identity-provider boundary actions + email field + optional password + mode-specific local validation action + help and status.
Geometry
Local max400px column; 24px inset; actions42px fullwidth (44px touch); fields42px with 8px 12px padding, .2px tracking and 14/500/16.1px type (16/500/18.4px through 480px). Region/form spacing is 16px and provider-action gaps are 12px; heading28/33.6px.
Behavior
Provider buttons explain the external boundary. The optional password stays visible: empty selects a magic-link illustration; filled selects a password illustration, matching the captured public mode change. Local field validation never verifies credentials or contacts an account service; password text is never logged or persisted.
Content
Use fake email placeholders only. Signing in, account recovery, session management and authenticated errors are excluded from runtime claims.
Use this contract for document the public gateway and where evidence ends. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Public child measurements are in evidence/inventory/boundary/signin-1440.json and signin-390.json: geometry[18] heading, [21]/[23]/[25] providers, [27]/[28] inputs, [29] submit and [30] account alternative. The original captures did not measure the .page-module___qf-sa__controlsWrapper root. Its desktop 282×467px box is source-derived from a separate archived HTML/CSS replay, not an original runtime measurement. The measured local catalog root is 400×624.4375px; named full-width providers (352×42px) replace the source horizontal icon controls (86×44px). Native input padding, weight, tracking and the 480px type change follow the observed defaults; local input widths, borders and colors remain different. The wordmark, 28px heading, visible labels, instructions and validation-only action are local adaptations. This catalog composition omits the source hidden notice [19] and account alternative [30]. Hidden source copy does not prove successful delivery; no full composition match or private account behavior is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Couldn’t load extensions. Your query is still here. Try again.
Explain the current operation and a concrete next action.
Anatomy
div[role=status] for neutral/success; error field links or role=alert for submit failure; optional16px icon.
Geometry
Padding 14px 16px;gap 10px;border 1px;radius 8px;13/1.5 type. Color palettes blue, green and muted red, with textual meaning.
Behavior
Announce only meaningful changes. Retain errors until corrected or retried; do not auto-dismiss a field error.
Content
Name the object, problem, preserved input and recovery. Example: Couldn’t load extensions. Your search is saved. Try again.
States, responsive rules, source trace, and code
Variants and states
Variants: info; success; error; offline.
States: visible; updated; resolved.
Parts: icon → message → action.
Use and avoid
Use this contract for explain the current operation and a concrete next action. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Local utility toast lasts4s; replacement resets timer; no focus movement. Important failure remains inline instead.
Content
Use specific confirmations such as Copied to clipboard. Avoid a success claim for unexecuted external actions.
States, responsive rules, source trace, and code
Variants and states
Variants: copied; failure guidance.
States: hidden; visible; replaced.
Parts: surface → message.
Use and avoid
Use this contract for confirm a reversible utility operation without changing layout. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Reserve content space while a collection is unavailable.
Anatomy
aria-busy container with decorative skeleton blocks and one readable Loading status.
Geometry
12px bars;radius 4px;12px between lines;image/icon placeholders preserve final aspect ratio.
Behavior
1.8s shimmer local addition; reduced motion replaces it with flat fill. End busy state before announcing results.
Content
Only use when data is pending. Never simulate endless activity for a missing request.
States, responsive rules, source trace, and code
Variants and states
Variants: row; card; media.
States: loading; reduced-motion.
Parts: placeholder → status.
Use and avoid
Use this contract for reserve content space while a collection is unavailable. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Local center panel padding 64px 24px;border 1px dashed;radius 12px;title18px;body 13px;gap 10px.
Behavior
No results offers Clear; empty source offers Browse; offline retains query; permission explains official sign-in boundary. Status updates do not steal focus.
Content
Never blame the visitor. Distinguish no data from no matches and unknown access from deleted content.
States, responsive rules, source trace, and code
Variants and states
Variants: empty; filtered; loading; partial; error; offline; stale; permission.
States: state-specific.
Parts: icon → heading → detail → recovery.
Use and avoid
Use this contract for keep search, missing data and access boundaries distinct. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Value clamped0..100 in local fixture. Screen reader label exposes units; reduced motion changes no numerical state.
Content
Use for a local demonstration only. Public app install progress was not observed and must not be inferred.
States, responsive rules, source trace, and code
Variants and states
Variants: determinate; indeterminate.
States: loading; complete.
Parts: label → track → fill → value.
Use and avoid
Use this contract for show a bounded operation when progress can actually be measured. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Observed decorative frame. Source animation is frozen.
Keep product screenshots legible against dark marketing artwork.
Anatomy
figure > image with natural aspect ratio + optional caption/source.
Geometry
Border1px#ffffff20;radius 12px;image width 100%, heightauto;contain for UI screenshots, cover only for editorial photos. Parent owns 24px gap.
Behavior
Lazy-load below fold. Error fallback retains caption and source link. Static alt text describes task-relevant UI; decorative background uses empty alt.
Content
Retain real screen proportions. Never hide critical UI with a decorative crop.
States, responsive rules, source trace, and code
Variants and states
Variants: desktop; phone; light UI; dark UI; missing asset.
States: loading; loaded; failed.
Parts: frame → image → caption → source.
Use and avoid
Use this contract for keep product screenshots legible against dark marketing artwork. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Explain a feature through a user-controlled clip or a retrievable official source.
Anatomy
poster + play button or native video[controls] + caption/transcript alternative.
Geometry
Poster16:9;radius 12px;border 1px;play44×44px;caption 12px with 12px margin.
Behavior
Reference uses explicit user activation and preload=none. No autoplay audio. Reduced-data keeps poster and transcript; failure exposes source link.
Content
Public marketing autoplay is evidence only; reference recommendation provides pause/controls. Never claim a transcript that was not authored.
States, responsive rules, source trace, and code
Variants and states
Variants: poster; playing; failed.
States: idle; playing; paused; failed.
Parts: poster → play → controls → caption → fallback.
Use and avoid
Use this contract for explain a feature through a user-controlled clip or a retrievable official source. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Root margin 0, width 100% and max-width 440px. Label 13px with 16px bottom margin; audio width 100% with browser-owned control height. Help text 12px with 12px top margin. The source custom waveform is documented in its capture.
Behavior
Play only after user action. Pause/seek/volume native keyboard controls; preload=none. Missing audio retains source link and descriptive caption.
Content
A sound sample does not prove typing feel. Describe audible key presses; identify source and recording boundary.
States, responsive rules, source trace, and code
Variants and states
Variants: idle; playing; paused; unavailable.
States: idle; playing; paused; failed.
Parts: label → audio → waveform → caption.
Use and avoid
Use this contract for let a visitor inspect the physical keyboard’s sound without unexpected playback. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
assets/reference.css · .audio-specimen · CSS
/* Composition: preserve the inline styles in the copied anatomy.
* .audio-specimen: margin:0; width:100%; max-width:440px.
* figcaption: font-size:13px; margin-bottom:16px.
* audio: width:100%.
* .field-help: margin-top:12px.
* Shared dependencies: .field-help in assets/reference.css and native
* audio[controls] styling. Preserve controls, preload="none", the recording
* source, the fallback link, and the factual text alternative.
*/
Sold out is readable text and disabled purchase control; never a fake working checkout. Product links lead to official page for current availability.
Content
Keep units exact and labeled. Unknown specs remain Unverified; do not infer measurements from photographs.
States, responsive rules, source trace, and code
Variants and states
Variants: available; sold-out; mobile.
States: default; unavailable.
Parts: property → value → unit → availability.
Use and avoid
Use this contract for separate physical-product facts from marketing claims. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Provide a predictable route to less frequent product, company and help destinations.
Anatomy
footer landmark > brand block + named link lists + provenance/copyright line.
Geometry
Top border 1px#ffffff12;top padding 56px;desktop 4 columns (2fr 1fr 1fr 1fr),gap 48px;links 12px with 5px vertical padding;bottom divider 24px inset.
Behavior
Native links; repeated nav has a distinct accessible label. Phone 2columns with brand fullwidth; visible footer remains in normal tab order.
Content
Group by user intent. External docs and legal sources are labeled as external boundaries rather than hidden omissions.
States, responsive rules, source trace, and code
Variants and states
Variants: desktop; tablet; phone.
States: default; hover; focus.
Parts: brand → link-group → heading → link → legal-line.
Use and avoid
Use this contract for provide a predictable route to less frequent product, company and help destinations. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Source order: navigation → main → footer. Dialogs use the browser top layer.
Explain ownership of persistent, content and transient regions.
Anatomy
figure containing labeled boxes and arrows, with an equivalent ordered text list.
Geometry
Local diagram panel 24px inset;region 20px inset;gap 16px;radius 8px;1px dashed boundary;mono 10px annotations;stack at phone width.
Behavior
Diagram boxes are noninteractive unless they link to a contract. Reading order follows the same sequence as the arrows.
Content
Colors identify ownership classes, never measured product states. All architecture diagrams are original explanatory additions.
States, responsive rules, source trace, and code
Variants and states
Variants: shell; flow.
States: default.
Parts: region → label → measurement → relationship.
Use and avoid
Use this contract for explain ownership of persistent, content and transient regions. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
Working catalog filters appear at the top of this page.
Combine search, category and count without losing scope.
Anatomy
search label/input + category select + live result count + clear action.
Geometry
Flex with 12px gap;input grows with min 200px;wraps at narrow widths;phone search 100%;controls 40px and count 11px mono.
Behavior
AND-combine filters; query persists in URL; no-results keeps controls visible; clear only query unless Reset all explicitly named.
Content
State the inventory denominator separately from filtered result count. “603 icons” describes the package catalog, not 603 observed website slots.
States, responsive rules, source trace, and code
Variants and states
Variants: desktop row; phone wrap.
States: default; query; category; no-results.
Parts: search → category → count → clear.
Use and avoid
Use this contract for combine search, category and count without losing scope. Reuse the shared tokens and native element semantics. Avoid overriding child margins to repair a parent gap; avoid color-only state or an inaccessible custom control.
Phone: allow text to wrap, preserve labels, use the component-specific transformation above; local coarse-pointer target is 44px.
Measured source relationship
Source candidate: no public runtime instance was observed. Use the explicit local class contract below.
The local component is an explicit reference addition or a composed recipe. No original private API is asserted.
A shared family measurement is context evidence, not a claim that every local variant is pixel-identical. Exact part and responsive rows are in the geometry ledger.
Copyable local CSS
This source excerpt preserves rule order, grouped selectors, and conditional or nested context. Use it with the copied anatomy and the complete reference.css, including shared tokens, reset, fonts, and referenced keyframes. Keep the component’s interaction code and the stylesheet’s assets/ base for relative URLs. Composition comments identify styles owned inline.
