Small pieces. Exact decisions.

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-suku18{position:fixed;inset:0 0 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:var(--global-cursor-default);letter-spacing:-0.00875rem;width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fig-theme-bg, #FFFFFF);color:var(--fig-theme-fg, #000000);z-index:25;-webkit-transition:background 0.4s cubic-bezier(.8,0,.2,1);transition:background 0.4s cubic-bezier(.8,0,.2,1);}

Behavior & composition

Natural document scroll. Header stays above content. Mobile disclosure closes with Escape; skip link targets main content.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Owns persistent global navigation and the primary conversion action.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<header data-component="global-header">…</header>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector .fig-suku18 · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-7comqs{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;padding:0;margin:0;background:transparent;border:0;color:inherit;font-size:inherit;font-weight:inherit;font-variation-settings:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit;padding:0.5rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fig-theme-fg, #000000);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;}
.fig-7comqs:after{content:'';opacity:0;-webkit-transform:translateY(0.1875rem) scaleY(0);-moz-transform:translateY(0.1875rem) scaleY(0);-ms-transform:translateY(0.1875rem) scaleY(0);transform:translateY(0.1875rem) scaleY(0);-webkit-transition:-webkit-transform 250ms,opacity 250ms;transition:transform 250ms,opacity 250ms;transform-origin:center left;}
.fig-7comqs .nav-highlight{position:relative;display:inline-block;}
.fig-7comqs .nav-highlight:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:0;-webkit-transform:translateY(3px) scaleY(0);-moz-transform:translateY(3px) scaleY(0);-ms-transform:translateY(3px) scaleY(0);transform:translateY(3px) scaleY(0);-webkit-transition:-webkit-transform 250ms,opacity 250ms;transition:transform 250ms,opacity 250ms;transform-origin:center left;}
.fig-7comqs:hover{-webkit-text-decoration:none;text-decoration:none;}
.fig-7comqs:hover .nav-highlight:after{opacity:1;-webkit-transform:translateY(0) scaleY(1);-moz-transform:translateY(0) scaleY(1);-ms-transform:translateY(0) scaleY(1);transform:translateY(0) scaleY(1);}

Behavior & composition

Local contract: native details/summary exposes the expanded state and toggles with click, Enter, or Space. The local Escape enhancement closes an open disclosure from its summary or contents and returns focus to the summary. Closed content is untabbable. This is a reconstructed navigation specimen, not Figma’s private menu implementation.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, expanded, collapsed.

Use: Reveals a grouped product menu without leaving the current route.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<button data-component="nav-disclosure">…</button>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector .fig-7comqs · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-4rcs94{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-text-decoration:none;text-decoration:none;-webkit-text-decoration:none;text-decoration:none;background:none;border:none;-webkit-transition:background 180ms ease-out,box-shadow 180ms ease-out;transition:background 180ms ease-out,box-shadow 180ms ease-out;width:100%;padding:var(--fig-space-12, 0.75rem);border-radius:var(--fig-radius-8, 0.5rem);background:var(--fig-theme-btn-primary-bg, #000000);color:var(--fig-theme-btn-primary-fg, #FFFFFF);padding:var(--fig-space-12, 0.75rem) 1.375rem;display:none;}
.fig-4rcs94:hover{-webkit-text-decoration:none;text-decoration:none;}
.fig-4rcs94:hover{-webkit-text-decoration:none;text-decoration:none;}
.fig-4rcs94 .btn-icon{margin-block:-1.25rem;}
.fig-4rcs94 .btn-inner.has-icon{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.25rem;}
.fig-4rcs94 .btn-inner >.btn-builtin-icon{opacity:0;-webkit-transition:opacity 180ms ease-out;transition:opacity 180ms ease-out;}
.fig-4rcs94 .btn-inner .btn-text{text-align:center;-webkit-transition:translate 180ms ease-out;transition:translate 180ms ease-out;display:inline-block;padding-inline:var(--fig-space-4, 0.25rem);}
.fig-4rcs94[data-loading='true'] .btn-inner:not(.no-arrow) .btn-text{-webkit-translate:-0.5625rem;-moz-translate:-0.5625rem;-ms-translate:-0.5625rem;translate:-0.5625rem;}
.fig-4rcs94:hover .btn-inner:not(.no-arrow) .btn-text{-webkit-translate:-0.5625rem;-moz-translate:-0.5625rem;-ms-translate:-0.5625rem;translate:-0.5625rem;}
.fig-4rcs94:hover .btn-inner:not(.no-arrow) >.btn-builtin-icon{opacity:1;}
.fig-4rcs94{width:auto;}
.fig-4rcs94 .btn-inner .btn-icon>svg{width:1.25rem;height:1.25rem;}
.fig-4rcs94:hover,.fig-4rcs94:active{background:var(--fig-theme-btn-primary-bg-hover, color-mix(in oklch, #000000, transparent 15%));}
.fig-4rcs94{display:block;}

Behavior & composition

Native link/button. Enter activates; Space activates buttons. Hover reveals the arrow; focus ring stays outside the border. Disabled buttons do not dispatch. Loading retains label and width.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, hover, focus, active, disabled, loading.

Use: One primary next step per decision group.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<a data-component="primary-action">…</a>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector .fig-4rcs94 · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-42wdr4{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-text-decoration:none;text-decoration:none;-webkit-text-decoration:none;text-decoration:none;background:none;border:none;-webkit-transition:background 180ms ease-out,box-shadow 180ms ease-out;transition:background 180ms ease-out,box-shadow 180ms ease-out;width:100%;padding:var(--fig-space-12, 0.75rem);border-radius:var(--fig-radius-8, 0.5rem);background:var(--fig-theme-btn-secondary-bg, color-mix(in oklch, #000000, transparent 100%));box-shadow:inset 0 0 0 1px var(--fig-theme-border, color-mix(in oklch, #000000, transparent 84%));color:var(--fig-theme-btn-secondary-fg, #000000);padding:var(--fig-space-12, 0.75rem) 1.375rem;font-family:var(--global-font-sans, 'figmaSans', 'figmaSans Fallback', SF Pro Display, system-ui, helvetica, sans-serif);font-optical-sizing:auto;font-size:var(--fig-typography-size-body);line-height:var(--fig-typography-lh-loose);letter-spacing:var(--fig-typography-ls-none);font-weight:var(--fig-typography-weight);font-variation-settings:"wdth" var(--fig-typography-variation-wdth-narrow),"wght" var(--fig-typography-variation-wght-regular);display:none;}
.fig-42wdr4:hover{-webkit-text-decoration:none;text-decoration:none;}
.fig-42wdr4:hover{-webkit-text-decoration:none;text-decoration:none;}
.fig-42wdr4 .btn-icon{margin-block:-1.25rem;}
.fig-42wdr4 .btn-inner.has-icon{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.25rem;}
.fig-42wdr4 .btn-inner >.btn-builtin-icon{opacity:0;-webkit-transition:opacity 180ms ease-out;transition:opacity 180ms ease-out;}
.fig-42wdr4 .btn-inner .btn-text{text-align:center;-webkit-transition:translate 180ms ease-out;transition:translate 180ms ease-out;display:inline-block;padding-inline:var(--fig-space-4, 0.25rem);}
.fig-42wdr4[data-loading='true'] .btn-inner:not(.no-arrow) .btn-text{-webkit-translate:-0.5625rem;-moz-translate:-0.5625rem;-ms-translate:-0.5625rem;translate:-0.5625rem;}
.fig-42wdr4:hover .btn-inner:not(.no-arrow) .btn-text{-webkit-translate:-0.5625rem;-moz-translate:-0.5625rem;-ms-translate:-0.5625rem;translate:-0.5625rem;}
.fig-42wdr4:hover .btn-inner:not(.no-arrow) >.btn-builtin-icon{opacity:1;}
.fig-42wdr4{width:auto;}
.fig-42wdr4 .btn-inner .btn-icon>svg{width:1.25rem;height:1.25rem;}
.fig-42wdr4:hover,.fig-42wdr4:active{box-shadow:inset 0 0 0 1px var(--fig-theme-border-hover, color-mix(in oklch, #000000, transparent 60%));}
.fig-42wdr4 em{font-variation-settings:"wdth" var(--fig-typography-variation-wdth-narrow),"wght" var(--fig-typography-variation-wght-regular),"slnt" var(--fig-typography-variation-slnt-italic);}
.fig-42wdr4 strong{font-weight:var(--fig-typography-weight);font-variation-settings:"wdth" var(--fig-typography-variation-wdth-narrow),"wght" var(--fig-typography-variation-wght-bold);}
.fig-42wdr4 strong em{font-variation-settings:"wdth" var(--fig-typography-variation-wdth-narrow),"wght" var(--fig-typography-variation-wght-bold),"slnt" var(--fig-typography-variation-slnt-italic);}

Behavior & composition

Native link/button. Enter activates; Space activates buttons. Hover reveals the arrow; focus ring stays outside the border. Disabled buttons do not dispatch. Loading retains label and width.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, hover, focus, active, disabled, loading.

Use: Supporting destination beside the primary action.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<a data-component="secondary-action">…</a>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector .fig-42wdr4 · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-19xeqcu{-webkit-text-decoration:none;text-decoration:none;padding:0.5rem;display:block;font-family:var(--global-font-sans, 'figmaSans', 'figmaSans Fallback', SF Pro Display, system-ui, helvetica, sans-serif);font-optical-sizing:auto;font-size:var(--fig-typography-size-body);line-height:var(--fig-typography-lh-loose);letter-spacing:var(--fig-typography-ls-none);font-weight:var(--fig-typography-weight);font-variation-settings:"wdth" var(--fig-typography-variation-wdth-narrow),"wght" var(--fig-typography-variation-wght-regular);}
.fig-19xeqcu .nav-highlight{position:relative;display:inline-block;}
.fig-19xeqcu .nav-highlight:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:0;-webkit-transform:translateY(3px) scaleY(0);-moz-transform:translateY(3px) scaleY(0);-ms-transform:translateY(3px) scaleY(0);transform:translateY(3px) scaleY(0);-webkit-transition:-webkit-transform 250ms,opacity 250ms;transition:transform 250ms,opacity 250ms;transform-origin:center left;}
.fig-19xeqcu:hover{-webkit-text-decoration:none;text-decoration:none;}
.fig-19xeqcu:hover .nav-highlight:after{opacity:1;-webkit-transform:translateY(0) scaleY(1);-moz-transform:translateY(0) scaleY(1);-ms-transform:translateY(0) scaleY(1);transform:translateY(0) scaleY(1);}
.fig-19xeqcu em{font-variation-settings:"wdth" var(--fig-typography-variation-wdth-narrow),"wght" var(--fig-typography-variation-wght-regular),"slnt" var(--fig-typography-variation-slnt-italic);}
.fig-19xeqcu strong{font-weight:var(--fig-typography-weight);font-variation-settings:"wdth" var(--fig-typography-variation-wdth-narrow),"wght" var(--fig-typography-variation-wght-bold);}
.fig-19xeqcu strong em{font-variation-settings:"wdth" var(--fig-typography-variation-wdth-narrow),"wght" var(--fig-typography-variation-wght-bold),"slnt" var(--fig-typography-variation-slnt-italic);}

Behavior & composition

Native link/button. Enter activates; Space activates buttons. Hover reveals the arrow; focus ring stays outside the border. Disabled buttons do not dispatch. Loading retains label and width.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, hover, focus, active, disabled, loading.

Use: Navigate with a native link; retain browser back and open-in-new-tab behavior.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<a data-component="text-link">…</a>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector .fig-19xeqcu · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-1gqvcgs{font-family:var(--global-font-sans, 'figmaSans', 'figmaSans Fallback', SF Pro Display, system-ui, helvetica, sans-serif);font-optical-sizing:auto;font-size:var(--fig-typography-size-title1);line-height:var(--fig-typography-lh-none);letter-spacing:var(--fig-typography-ls-tight);font-weight:var(--fig-typography-weight);font-variation-settings:"wdth" var(--fig-typography-variation-wdth-condensed),"wght" var(--fig-typography-variation-wght-regular);margin:0;}
.fig-1gqvcgs strong{font-weight:var(--fig-typography-weight);font-variation-settings:"wdth" var(--fig-typography-variation-wdth-condensed),"wght" var(--fig-typography-variation-wght-regular);}

Behavior & composition

Keep semantic heading order. Wrap text naturally; do not truncate headings. Text zoom and translated strings may increase height.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Owns the single page-level heading and its editorial line breaks.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<h1 data-component="hero-title">…</h1>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector .fig-1gqvcgs · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-1id9bz1{background:var(--fig-theme-bg, #FFFFFF);color:var(--fig-theme-fg, #000000);padding-block:var(--fig-section-block-padding, var(--fig-space-32, 2rem));}

Behavior & composition

Parent grid owns outer spacing; children own internal padding. Preserve DOM order when stacking.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Combines a headline, demonstration canvas, and next action.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<section data-component="hero-section">…</section>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector .fig-1id9bz1 · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-1ytmgio{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-text-decoration:none;text-decoration:none;-webkit-text-decoration:none;text-decoration:none;background:none;border:none;-webkit-transition:background 180ms ease-out,box-shadow 180ms ease-out;transition:background 180ms ease-out,box-shadow 180ms ease-out;width:100%;padding:var(--fig-space-24, 1.5rem);border-radius:var(--fig-radius-16, 1rem);background:var(--fig-theme-btn-primary-bg, #000000);color:var(--fig-theme-btn-primary-fg, #FFFFFF);padding:var(--fig-space-24, 1.5rem) var(--fig-space-32, 2rem);}
.fig-1ytmgio:hover{-webkit-text-decoration:none;text-decoration:none;}
.fig-1ytmgio:hover{-webkit-text-decoration:none;text-decoration:none;}
.fig-1ytmgio .btn-icon{margin-block:-1.25rem;}
.fig-1ytmgio .btn-inner.has-icon{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:0.25rem;}
.fig-1ytmgio .btn-inner >.btn-builtin-icon{opacity:0;-webkit-transition:opacity 180ms ease-out;transition:opacity 180ms ease-out;}
.fig-1ytmgio .btn-inner .btn-text{text-align:center;-webkit-transition:translate 180ms ease-out;transition:translate 180ms ease-out;display:inline-block;padding-inline:var(--fig-space-8, 0.5rem);}
.fig-1ytmgio[data-loading='true'] .btn-inner:not(.no-arrow) .btn-text{-webkit-translate:-1rem;-moz-translate:-1rem;-ms-translate:-1rem;translate:-1rem;}
.fig-1ytmgio:hover .btn-inner:not(.no-arrow) .btn-text{-webkit-translate:-1rem;-moz-translate:-1rem;-ms-translate:-1rem;translate:-1rem;}
.fig-1ytmgio:hover .btn-inner:not(.no-arrow) >.btn-builtin-icon{opacity:1;}
.fig-1ytmgio{width:auto;}
.fig-1ytmgio .btn-inner .btn-icon>svg{width:2.25rem;height:2.25rem;}
.fig-1ytmgio:hover,.fig-1ytmgio:active{background:var(--fig-theme-btn-primary-bg-hover, color-mix(in oklch, #000000, transparent 15%));}

Behavior & composition

Native link/button. Enter activates; Space activates buttons. Hover reveals the arrow; focus ring stays outside the border. Disabled buttons do not dispatch. Loading retains label and width.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, hover, focus, active, disabled, loading.

Use: Larger action for the sparse hero composition.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<a data-component="large-action">…</a>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector .fig-1ytmgio · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-174492g{font-family:var(--global-font-sans, 'figmaSans', 'figmaSans Fallback', SF Pro Display, system-ui, helvetica, sans-serif);font-optical-sizing:auto;font-size:var(--fig-typography-size-title3);line-height:var(--fig-typography-lh-snug);letter-spacing:var(--fig-typography-ls-standard);font-weight:var(--fig-typography-weight);font-variation-settings:"wdth" var(--fig-typography-variation-wdth-narrow),"wght" var(--fig-typography-variation-wght-regular);margin:0;}
.fig-174492g strong{font-weight:var(--fig-typography-weight);font-variation-settings:"wdth" var(--fig-typography-variation-wdth-narrow),"wght" var(--fig-typography-variation-wght-regular);}

Behavior & composition

Keep semantic heading order. Wrap text naturally; do not truncate headings. Text zoom and translated strings may increase height.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Introduces one section; visual size and semantic level are separate.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<h2 data-component="section-title">…</h2>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector .fig-174492g · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-nvjutl {margin-inline-end: var(--fig-space-24, 1.5rem); max-width: 40.625rem; margin-top: var(--fig-space-32, 2rem);}
@media (min-width: 480px) {.fig-nvjutl {margin-top: var(--fig-space-40, 2.5rem);}}

Behavior & composition

Stable IDs. Keep source order in stacked layouts. No selection or drag is implied by a card. Empty and filtered-empty messages name the recovery.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Names one benefit with a meaningful image and destination.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<article data-component="feature-card">…</article>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector article.fig-nvjutl · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-1ka71ms {list-style: none; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: var(--fig-grid-gutter); margin-top: var(--fig-space-40, 2.5rem);}
@media (min-width: 1024px) {.fig-1ka71ms {grid-template-columns: repeat(4, minmax(0px, 1fr));}}

Behavior & composition

Static research frame. No autoplay in the guide. Product playback is recorded separately; a screenshot does not prove player behavior.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Uses actual product evidence, with alternative text and a missing-media fallback.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<figure data-component="media-frame">…</figure>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector ul.fig-1ka71ms > li:nth-child(1) · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-1d61hkn {width: calc(min(var(--f-max-content-width), 100vw) - var(--f-gutter) * 2); margin-inline: auto; --f-bg-color: #000000; --f-text-color: #FFFFFF; --f-text-secondary-color: rgba(255, 255, 255, 0.7); --f-primary-btn-bg-color: #FFFFFF; --f-primary-btn-text-color: #000000; --f-form-input-bg-color: rgba(255, 255, 255, 0.16); --f-form-select-hover-bg-color: rgba(255, 255, 255, 0.24); --f-form-placeholder-text-color: rgba(255, 255, 255, 0.6); --f-form-error-bg-color: #FFB3B3; --f-form-error-text-color: #000000; --f-badge-text-color: #FFFFFF; --f-badge-bg-color: rgba(255, 255, 255, 0.16); --f-primary-transparent-color: rgba(255, 255, 255, 0.24); background: var(--f-bg-color, #FFFFFF); color: var(--f-text-color, #000000); position: fixed; bottom: 1.5rem; right: 1.5rem; border-radius: 0.5rem; z-index: 30; padding: 1.5rem; max-height: 70vh; overflow-y: auto;}
@media (min-width: 560px) {.fig-1d61hkn {max-width: 27.5rem;}}
@media (min-width: 960px) {.fig-1d61hkn {transform: unset;}}

Behavior & composition

Use text as well as color. Announce updates once through role=status. No timer dismisses essential recovery instructions.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Non-blocking consent information; preserve a persistent route back to preferences.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<aside data-component="cookie-notice">…</aside>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector div.fig-1d61hkn[role="alertdialog"][aria-label="Cookie Consent"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

button, input, optgroup, select, textarea {font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0px;}
button, input {overflow: visible;}
button, select {text-transform: none;}
button, [type="button"], [type="reset"], [type="submit"] {appearance: button;}
@media (hover: hover) and (pointer: fine) {a, a *, button:not(.tooltip-btn), button:not(.tooltip-btn) *, select, input[type="checkbox"] {cursor: var(--global-cursor-pointer);}}
button, input, optgroup, select, textarea {font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0px;}
button, input {overflow: visible;}
button, select {text-transform: none;}
button, [type="button"], [type="reset"], [type="submit"] {appearance: button;}
@media (hover: hover) and (pointer: fine) {a, a *, button:not(.tooltip-btn), button:not(.tooltip-btn) *, select, input[type="checkbox"] {cursor: var(--global-cursor-pointer);}}
.fig-5vh56z {text-decoration: none; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; max-width: fit-content; transition: background 180ms ease-out, box-shadow 180ms ease-out; background: var(--fig-theme-btn-secondary-bg, color-mix(in oklch, #000000, transparent 100%)); box-shadow: inset 0 0 0 1px var(--fig-theme-border, color-mix(in oklch, #000000, transparent 84%)); color: var(--fig-theme-btn-secondary-fg, #000000); padding: var(--fig-space-8, 0.5rem); border-radius: var(--fig-radius-full, 624.9375rem);}

Behavior & composition

Native link/button. Enter activates; Space activates buttons. Hover reveals the arrow; focus ring stays outside the border. Disabled buttons do not dispatch. Loading retains label and width.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, hover, focus, active, disabled, loading.

Use: A compact action requires an accessible name and visible focus.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<button data-component="icon-button">…</button>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector button.fig-5vh56z[aria-label="Next slide"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

.fig-97erl1{--f-bg-color:#000000;--f-text-color:#FFFFFF;--f-list-header-color:rgba(255, 255, 255, 0.6);--f-icon-bg-color:rgba(255, 255, 255, 0.24);--f-badge-text-color:#FFFFFF;--f-badge-bg-color:rgba(255, 255, 255, 0.16);background:var(--f-bg-color, #FFFFFF);color:var(--f-text-color, #000000);padding-block:5rem 3rem;border-top:1px solid rgba(255, 255, 255, 0.16);}
.fig-97erl1{padding-block:7.5rem;}

Behavior & composition

Natural document scroll. Header stays above content. Mobile disclosure closes with Escape; skip link targets main content.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Groups secondary destinations and legal/support links.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<footer data-component="footer">…</footer>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector .fig-97erl1 · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Use text as well as color. Announce updates once through role=status. No timer dismisses essential recovery instructions.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: A short non-interactive lifecycle label such as Beta or New.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<span data-component="badge">…</span>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="badge"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Local contract: a tablist controls one named panel. The selected tab labels the panel before interaction and after every selection. Click, Enter, or Space selects a tab; Left/Right arrows wrap between tabs, and Home/End selects the first/last tab. Keyboard selection is automatic and keeps focus on the selected tab. Only that tab is in the page tab order. No expanded/collapsed or Escape behavior is implied.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: design-selected, build-selected, keyboard-focus.

Use: Shows one panel while keeping the section context.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<div data-component="tabs">…</div>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="tabs"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Local contract: native details/summary exposes expanded or collapsed state and toggles with click, Enter, or Space. The closed answer is hidden and untabbable. This inline FAQ does not have the Escape-to-dismiss enhancement used by navigation disclosures.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: expanded, collapsed.

Use: Reveals one answer using native keyboard interaction.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<details data-component="accordion">…</details>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="accordion"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Visible label, native input semantics, helper/error IDs. Validate on submit or explicit blur, preserve entered value, announce completion.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, empty, invalid, filled.

Use: Filters a visible collection; announce result counts and preserve the query.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<input data-component="search-field">…</input>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="search-field"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Visible label, native input semantics, helper/error IDs. Validate on submit or explicit blur, preserve entered value, announce completion.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, empty, invalid, filled.

Use: Narrows the collection by one explicit category.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<select data-component="filter-control">…</select>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="filter-control"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Visible label, native input semantics, helper/error IDs. Validate on submit or explicit blur, preserve entered value, announce completion.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, empty, invalid, filled.

Use: Selects monthly or annual display; never initiates a purchase.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<input data-component="billing-toggle">…</input>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="billing-toggle"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Stable IDs. Keep source order in stacked layouts. No selection or drag is implied by a card. Empty and filtered-empty messages name the recovery.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Keeps plan name, seat scope, price unit, and next action together.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<article data-component="plan-card">…</article>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="plan-card"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Stable IDs. Keep source order in stacked layouts. No selection or drag is implied by a card. Empty and filtered-empty messages name the recovery.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Compares the same feature across plans with proper headers.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<table data-component="comparison-table">…</table>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="comparison-table"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Visible label, native input semantics, helper/error IDs. Validate on submit or explicit blur, preserve entered value, announce completion.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, empty, invalid, filled.

Use: Native email validation with linked error and input preservation.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<input data-component="email-field">…</input>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="email-field"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Stable IDs. Keep source order in stacked layouts. No selection or drag is implied by a card. Empty and filtered-empty messages name the recovery.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Adds items without resetting the existing collection or keyboard focus.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<button data-component="load-more">…</button>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="load-more"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Native link/button. Enter activates; Space activates buttons. Hover reveals the arrow; focus ring stays outside the border. Disabled buttons do not dispatch. Loading retains label and width.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, hover, focus, active, disabled, loading.

Use: Copies a token and confirms completion without moving focus.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<button data-component="copy-control">…</button>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="copy-control"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Visible label, native input semantics, helper/error IDs. Validate on submit or explicit blur, preserve entered value, announce completion.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, empty, invalid, filled.

Use: Changes content locale; local reference exposes English and stress-test fixtures only.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<select data-component="locale-control">…</select>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="locale-control"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Use text as well as color. Announce updates once through role=status. No timer dismisses essential recovery instructions.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Announces search, validation, and clipboard results with a polite live region.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<p data-component="status-message">…</p>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="status-message"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Stable IDs. Keep source order in stacked layouts. No selection or drag is implied by a card. Empty and filtered-empty messages name the recovery.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, long-content, missing-content.

Use: Combines category, useful title, evidence image, and destination.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<article data-component="resource-card">…</article>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="resource-card"] · Structured contract · Local CSS · Evidence boundary

Measured local geometry

Measured at 1440 × 1000 in Chromium with the disclosed fallback font; responsive boxes also sampled at 390 and 768. Values describe this rendered reconstruction. Parent layouts own external gaps; margins and per-side padding are listed separately. Text distances include the CSS line box.

Behavior & composition

Local contract: native details/summary exposes the expanded state and toggles with click, Enter, or Space. The local Escape enhancement closes an open disclosure from its summary or contents and returns focus to the summary. Closed content is untabbable. This is a reconstructed navigation specimen, not Figma’s private menu implementation.

Grid margins: 16px small, 24px medium, 40px large; 4 columns small, 12 medium/large; gutter16px. Stack at 1024px for hero and 768px for catalogs.

States: default, expanded, collapsed.

Use: Replaces wide navigation with a disclosure, natural tab order, and Escape return.

Avoid: Do not use the visual shape to imply an unsupported mutation, permission, or authenticated editor action.

Contract

<nav data-component="mobile-menu">…</nav>

Required: stable ID and a visible label or accessible name. Native events; ephemeral local state. No account mutation or analytics.

Source selector [data-component="mobile-menu"] · Structured contract · Local CSS · Evidence boundary