# Public pattern specimens

Entry: `index.html`. Dependencies: `../assets/reference.css`, local `styles.css`, local `patterns.js`, `../assets/figma-mark.svg`, six local customer SVGs. No framework, API key, remote script, video, or runtime asset request. The script runs after the document is parsed; initialize each pattern once per document. All relative links work when served below a static-site prefix.

This is a source-derived reconstruction, captured and implemented on 18 September 2026. The contracts below specify **this local implementation**, not undocumented Figma internals. The page intentionally presents one representative instance per family. It does not reproduce authenticated editing, every product variant, source motion timing, a complete resource corpus, or exact source typography. The guide supplies licensed Liberation Sans with metric adjustments as its disclosed fallback for unavailable Figma Sans. Customer logos are original source assets; template illustrations, mock media, resource summaries, product glyphs, and quotation are original study fixtures. No source testimonial is quoted or attributed to a real customer.

## Provenance and reproducible selectors

All source captures are under `designs/figma/evidence/inventory/`; paths below are relative to that directory. Role/name selectors are Playwright selectors against the retained source DOM or ARIA captures. They are evidence anchors, not promises about the future live website.

| Family | Public source and retained evidence | Source selector / observed state | Local boundary |
|---|---|---|---|
| Template / content carousel | [FigJam](https://www.figma.com/figjam/); `figjam/desktop.html`, `figjam/capture.json`; `states/figjam-carousel-next.json` + `.png` | `getByRole('button', {name:'Next slide', exact:true})`; paired `Previous slide`; capture displays `Slide 2 of 5` and `2 of 5` at 390px | Three original template cards adapt the source's colored media + heading/body/action composition. Circular previous/next controls and counter are observed. Local wrap behavior, slide pickers, keyboard shortcuts, no autoplay, and hidden inactive DOM are specified additions; source has five use-case slides and mobile peeking content. |
| Contextual feature help | [Pricing](https://www.figma.com/pricing/); `pricing/capture.json`, `pricing/desktop.html` | `getByRole('button', {name:'Library styling context', exact:true})`, `aria-expanded=false`, beside a feature row explanation | Local native `details/summary` expands an inline help panel. This is an accessible disclosure substitute, not a claim that the source uses native details or that its hover tooltip geometry was measured. No pricing entitlement is asserted. |
| Product media | [Figma Design](https://www.figma.com/design/) and [FigJam](https://www.figma.com/figjam/); `design/capture.json`, `figjam/capture.json` | `[role='group'][aria-label='Media player']`; `getByRole('button', {name:'Play', exact:true})`; FigJam also exposes button `[aria-label='pause']` | Original local CSS motion inside a toolbar/canvas frame. No Figma editor recording, player skin, source animation duration, or codec behavior is claimed. |
| Grouped mobile navigation | [Pricing mobile navigation](https://www.figma.com/pricing/); `states/nav-open-390.json` + `.png`, `states/mobile-products-expanded.json` + `.png` | `getByRole('button', {name:'Open navigation menu'})`; expanded Products button; Close navigation menu button | Source is a viewport overlay with fuller product groups. This local bounded navigation discloses Products and Resources, uses original product glyphs, and links to observed public routes. Native details, inline focus behavior, and Escape handling are local contracts. It is not a modal and does not trap focus. |
| Resource filtering / pagination | [Resource Library](https://www.figma.com/resource-library/); `resource-library/capture.json`; `states/resource-filter-open.json` + `.png` | `getByRole('button', {name:'Filter', exact:true})` expanded; categories include Building with AI, Team productivity, Design basics; `getByRole('button', {name:'Load more', exact:true})`; source status `Showing 269 results` | Six original summary fixtures use real observed article links. Local category assignment, batch size three, counts, filter reset, and focus transfer are explicit reconstruction. No 269-item content claim. |
| Customer logo strip / testimonial | [FigJam](https://www.figma.com/figjam/); `figjam/capture.json`, `figjam/desktop.html`, `figjam/desktop.png` | `img[alt='atlassian logo']`, `img[alt='braintree logo']`, `img[alt='dribbble logo']`, `img[alt='github logo']`, `img[alt='microsoft logo']`, `img[alt='slack logo']`; customer proof lower on the page | Six genuine marks preserve original aspect ratios and simple alignment. Local responsive grid is static rather than a claimed replica of any source logo marquee. Quote + abstract illustration demonstrates editorial proof geometry with an explicitly fictional attribution. |

Asset source URLs, original dimensions, retrieval timestamps, local destinations, and trademark boundary are in `../../evidence/pattern-examples/source-assets.json`. The source capture dates are stored in the individual JSON captures. Preserve the visible fixture labels when embedding specimens.

## Shared layout and typography

- Viewport breakpoints: desktop at 1024px and above; tablet at 768–1023px; narrow at 767px and below. Shared `.wrap` uses a 1520px content maximum and 40px side margins; 24px at 1023px and below; 16px at 479px and below. At the tested 1440px viewport content width is 1360px; at 390px it is 358px.
- Section padding is 80px top/bottom on desktop, 64px on tablet, 40px narrow. Section heading has two columns at a 2:1 ratio and 40px gap on desktop; one column and 24px gap below 1024px, 20px gap below 768px. Heading-to-specimen margin is 40px desktop/tablet and 28px narrow.
- Page title uses the guide's 88px/1, weight 400 and -1.25px tracking on desktop; local narrow title is 48px/1.02 with -.8px tracking. This title is original study copy, not the source homepage title. Section h2 inherits 44px/1.1, weight 400, -.66px tracking; narrow section h2 is 32px/1.1. Eyebrows are 14px uppercase with .5px tracking. Standard specimen body is 18–20px/1.4; provenance/fixture copy 14px/1.5.
- Palette: black/white structure; `#e4e0ff` lavender, `#fff5ad` yellow, `#ffddc7` peach, `#d7efdc` green, and Figma-like saturated shape colors. These are local declared colors; see foundational evidence for source token provenance.
- Main action comes from `.button`: black background, white text, 1px border, 8px radius, 12px 22px padding, minimum 48px height; `.small` is 16px with minimum 46px height. Focus is inherited 3px `#0066d9` outline with 3px offset. Local circular buttons are 48×48px; picker buttons are 44×44px desktop and 36×44px narrow. Picker visual dots are 12px circles, with black fill on the active item.
- `[hidden]` always maps to `display:none!important`; inactive slides/articles/menu links are absent from keyboard traversal and accessibility-tree rendering. Original decorative artwork uses `aria-hidden=true`. All six section anchors are stable integration targets.

## 01 — `#carousel`

DOM API: `.template-carousel` region has `aria-roledescription=carousel`, an accessible name, `tabindex=0`, and keyboard instructions. Slides are `.template-slide` groups with `aria-roledescription=slide`, an ordinal/name `aria-label`, and exactly one unhidden member. Buttons `[data-carousel-prev]`, `[data-carousel-next]`, and zero-based `[data-slide]` pickers control state. Pickers use `aria-pressed`. `.slide-count` is an atomic polite live region.

State: `active` integer starts at zero. Selecting index wraps modulo slide count. Previous/next wrap; pickers select directly; Left/Right move; Home/End select first/last. Shortcuts apply within the carousel, with no Alt/Ctrl/Meta modifier. Control focus is retained. If focus was inside a slide that becomes hidden, focus returns to the carousel region. There is no timer/autoplay. External template links navigate normally.

Geometry: white bordered frame, 16px radius (12px narrow), 1.4:1 media/copy columns desktop and 1:1 tablet. Media minimum height390px desktop,360px tablet,280px narrow. Narrow stacks media above copy. Copy padding48px desktop,32px tablet,28px24px narrow; narrow copy minimum height270px. Card title36px desktop,32px tablet,30px narrow. Controls sit24px below the frame,16px narrow; controls gap24px desktop,16px narrow; arrow pair gap8px; pickers align to the far edge. All three cards use the same frame.

Failure/fallback: without JavaScript the first slide and real template link remain visible; carousel controls need JS. Adding slides requires adding matching zero-based pickers and accessible names. No network data is needed.

## 02 — `#feature-help`

DOM API: `.feature-details` native `details` with `summary` and `.help-panel`. Browser-native `open` state is the only state; click, Enter, and Space toggle. No hover dependency or custom ARIA role is added. The question-mark disc is decorative. Focus stays on the summary; the expanded panel contains a real current-pricing link. This pattern works without JavaScript.

Geometry: feature row has 1px top/bottom border, 28px vertical padding, 1:1 columns,40px gap desktop;24px gap tablet. Narrow has one column,24px vertical padding,12px gap. Summary minimum height48px; help symbol28px diameter. Panel margin-top16px, padding24px desktop/tablet,20px narrow,8px radius,#f2f2f2 background. The expansion adds document height; it never covers other content.

## 03 — `#media`

DOM API: `.mock-stage[data-playing='false'|'true']`; `[data-media-toggle]` with dynamic Play/Pause label and `aria-pressed`; `[data-media-reset]`; `[data-media-status]` status region. Stage has `role=img` and a description of the original moving shapes. These are playback controls for an original animation, not pretend video controls.

State: initially paused. Play starts the CSS animations; Pause freezes their current position; Restart resets all shapes to their starting transforms and leaves playback paused. `matchMedia('(prefers-reduced-motion: reduce)')` blocks playback and explains the still preview; changing that preference pauses. No autoplay, audio, download, external media, or application-editor action.

Geometry: 1px border,12px frame radius. Toolbar padding16px24px,14px16px narrow. Canvas height440px desktop/tablet and300px narrow. Controls padding20px24px,16px narrow;20px desktop gap,12px narrow gap. Narrow status occupies its own row. Shapes animate over5s ease-in-out alternating infinitely while playing. Their local desktop width/height: circle190×190, square170×170, pill180×95; narrow105×105,95×95,90×50. Reduced-motion CSS forces animation:none.

## 04 — `#mobile-navigation`

DOM API: `[data-menu-toggle]` references `#demo-menu` with `aria-controls`, dynamic Open/Close accessible name, and `aria-expanded`. `#demo-menu` is a labelled navigation landmark with native Products/Resources `details` groups. The menu is initially hidden. Toggle opens/closes; Escape from inside the specimen closes and focuses the toggle. Group expansion persists between menu toggles. Tab follows normal document order. Product/resource/pricing actions are real external hyperlinks.

Geometry: maximum460px width on desktop/tablet; full available width narrow. Frame1px border,12px radius. Header padding20px. Menu padding12px24px24px. Group summary24px, padding20px0. Product links gap16px between original44px glyph and text; vertical padding12px, group gap8px. Product name20px, subtitle14px/1.4 with6px top margin. Pricing row padding24px0. Final CTA stretches to content width. This deliberately bounded specimen does not mimic a modal overlay or request background inertness.

## 05 — `#resources`

DOM API: `[data-filter='all'|'ai'|'design'|'team']` buttons with `aria-pressed`; `.resource-grid article[data-category]`; `[data-resource-status]` live status; `[data-load-more]`; `[data-all-loaded]`. Filter disclosure is native details and starts open. `category` starts `all`; `visibleLimit` starts3. Filter changes reset limit to3, hide nonmatches, update pressed state and `Showing N of M articles`, and retain focus. Load more increases limit by3, reveals real article cards, focuses the first newly visible article link, and hides itself when exhausted. Completion text replaces the exhausted action. Returning to All restores the first three cards and Load more.

Geometry: filter pills1px border,24px radius,12px18px padding (10px14px narrow),minimum44px height;8px gaps. Tools-to-grid32px. Grid3columns desktop,2tablet,1narrow;24px column/48px row gaps desktop/tablet,36px narrow gap. Original card art230px tall,8px radius. Category top margin24px,bottom10px; title28px (26px narrow),bottom12px; body18px/1.4,bottom20px. Load-more row margin-top48px,min-height52px. No artificial loading delay or server pagination is claimed. The six article URLs were observed in the source capture; summaries/categories are local editorial fixtures.

## 06 — `#customer-proof`

DOM API: static `ul.customer-logos` has six local SVG images and brand alt text. `.testimonial` is a semantic `figure` with original decorative art, `blockquote`, and explicitly fictional `figcaption`. No carousel, slider, fabricated review interaction, or real-person endorsement.

Geometry: logo list has1px top/bottom borders;40px vertical padding,32px top/64px bottom margin desktop. Six equal columns desktop,three tablet,two narrow;40px gaps desktop,32px tablet,32px24px narrow. Narrow vertical padding32px and24px top/40px bottom margin. Marks retain observed original aspect ratios, with intrinsic widths67–146px and heights18–20px. Testimonial columns1:1.5 desktop/tablet with64px gap desktop,40px tablet; one column narrow with28px gap. Original artwork height380px desktop/tablet,280px narrow. Quote44px/1.15 desktop,36px tablet,32px/1.2 narrow; -.6px tracking;24px top/32px bottom margins (16px/24px narrow). Caption18px/1.5,fixture attribution14px.

## Verification and limits

`../../evidence/pattern-examples/verification.json` records actual Chromium390×1000 and1440×1000 checks; adjacent PNGs capture initial/changed carousel, feature help, playing media, grouped navigation, filtered/loaded resources, and customer proof. `pattern-check.cjs` is the retained reproducible script, launched through the design-research skill's `run-playwright.sh` from a temporary working file. `dom-{width}.html` and `roles-{width}.yml` retain final rendered states. Measurements in the verification JSON are computed local geometry, not source measurements.

Checks cover real state changes, keyboard operation, focus restoration, animation transform movement/freeze, reduced-motion still preview, local font and image loading, no viewport overflow, and JavaScript errors. These are implementation checks, not a design-research benchmark score, exhaustive accessibility certification, or proof of full website parity. Source carousel counts, source viewport-overlay navigation, source player chrome, source testimonial art/copy, hover-only tooltip behavior, exact Figma Sans, and the full resource collection remain outside the reproduced scope.