05 / Components
Components
Anatomy, contracts, geometry, and live specimens
Search all pages, components, assets, and recipes.
The independent inventory defines broad families; the component ledger separates meaningful parts and variations. Each row links to a live family specimen and its source-backed geometry. Local state fixtures are labeled where production outcomes were not submitted.
C01 / header brand
ImportantBrand raster inside persistent header; exact source PNG, never type-set or redraw.
- Observed on
- / · /company-data · /refer · /documents · /benchmarks · /benchmarks/speech-to-text · /benchmarks/real-swe · /about · /privacy · /terms
- Independent family
- shell.header; shell.subpage; shell.editorial; shell.legal
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- header parent owns 20/48 px responsive inset; image owns 72.3125×20 rendered box.
- Use
- Brand raster inside persistent header; exact source PNG, never type-set or redraw.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pximg.h-\[18px\].w-auto.sm\:h-5:nth-child(1) | 65.078125 × 18border-box; block min/max width 0px / 100% | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
768 pximg.h-\[18px\].w-auto.sm\:h-5:nth-child(1) | 72.3125 × 20border-box; block min/max width 0px / 100% | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1440 pximg.h-\[18px\].w-auto.sm\:h-5:nth-child(1) | 72.3125 × 20border-box; block min/max width 0px / 100% | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1920 pximg.h-\[18px\].w-auto.sm\:h-5:nth-child(1) | 72.3125 × 20border-box; block min/max width 0px / 100% | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
C02 / announcement link
StandardHomepage announcement text link; no independent counterpart.
- Observed on
- Independent family
- Additional distinct part discovered during source extraction
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Landing stack owns vertical placement; anchor owns underline and indigo type treatment.
- Use
- Homepage announcement text link; no independent counterpart.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxa.animate-fade-up.group.mb-2.inline-flex.items-center.gap-2.text-[13px].leading-5.tracking-tight.text-[#3f42ab].focus-visible:outline-2.focus-visible:outline-offset-4.focus-visible:outline-[#3f42ab] | 350 × 40border-box; flex min/max width auto / none | margin 0px / 0px / 8px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap 8px / 8px | 13px / 20pxweight 400; tracking -0.325px wrap normal |
768 pxa.animate-fade-up.group.mb-2.inline-flex.items-center.gap-2.text-[13px].leading-5.tracking-tight.text-[#3f42ab].focus-visible:outline-2.focus-visible:outline-offset-4.focus-visible:outline-[#3f42ab] | 456.140625 × 20border-box; flex min/max width auto / none | margin 0px / 0px / 8px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap 8px / 8px | 13px / 20pxweight 400; tracking -0.325px wrap normal |
1440 pxa.animate-fade-up.group.mb-2.inline-flex.items-center.gap-2.text-[13px].leading-5.tracking-tight.text-[#3f42ab].focus-visible:outline-2.focus-visible:outline-offset-4.focus-visible:outline-[#3f42ab] | 456.140625 × 20border-box; flex min/max width auto / none | margin 0px / 0px / 8px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap 8px / 8px | 13px / 20pxweight 400; tracking -0.325px wrap normal |
1920 pxa.animate-fade-up.group.mb-2.inline-flex.items-center.gap-2.text-[13px].leading-5.tracking-tight.text-[#3f42ab].focus-visible:outline-2.focus-visible:outline-offset-4.focus-visible:outline-[#3f42ab] | 456.140625 × 20border-box; flex min/max width auto / none | margin 0px / 0px / 8px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap 8px / 8px | 13px / 20pxweight 400; tracking -0.325px wrap normal |
C03 / hero copy
ImportantEyebrow, headline, and support copy; desktop lead column changes to stacked mobile layout.
- Observed on
- / · /company-data · /refer · /documents
- Independent family
- content.hero
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Parent grid owns 80 px desktop column gap and outer max width; text block owns 28 px headline-to-body margin.
- Use
- Eyebrow, headline, and support copy; desktop lead column changes to stacked mobile layout.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxh1.max-w-2xl.text-\[36px\].leading-\[1\.08\]:nth-child(2) | 350 × 116.625border-box; block min/max width 0px / 672px | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 36px / 38.88pxweight 400; tracking -1.8px wrap normal |
768 pxh1.max-w-2xl.text-\[36px\].leading-\[1\.08\]:nth-child(2) | 672 × 116.46875border-box; block min/max width 0px / 672px | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 56px / 58.24pxweight 400; tracking -2.8px wrap normal |
1440 pxh1.max-w-2xl.text-\[36px\].leading-\[1\.08\]:nth-child(2) | 632 × 116.46875border-box; block min/max width 0px / 672px | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 56px / 58.24pxweight 400; tracking -2.8px wrap normal |
1920 pxh1.max-w-2xl.text-\[36px\].leading-\[1\.08\]:nth-child(2) | 632 × 116.46875border-box; block min/max width 0px / 672px | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 56px / 58.24pxweight 400; tracking -2.8px wrap normal |
C04 / outline action
ImportantSquare, 1 px ink-outline call to action on the landing page; remains outline at rest and inverts on hover.
- Observed on
- Independent family
- Additional distinct part discovered during source extraction
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Anchor owns 40 px mobile / 44 px desktop height and 20/24 px inline inset; landing stack owns outer margin.
- Use
- Square, 1 px ink-outline call to action on the landing page; remains outline at rest and inverts on hover.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxa.inline-flex.h-10.items-center.justify-center.border.border-foreground.bg-background.px-5.text-[13px].tracking-wide.text-foreground.transition-colors.hover:bg-foreground.hover:text-background.sm:h-11.sm:px-6.sm:text-sm | 101.203125 × 40border-box; flex min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 20px / 0px / 20pxgap normal / normal | 13px / 19.5pxweight 400; tracking 0.325px wrap normal |
768 pxa.inline-flex.h-10.items-center.justify-center.border.border-foreground.bg-background.px-5.text-[13px].tracking-wide.text-foreground.transition-colors.hover:bg-foreground.hover:text-background.sm:h-11.sm:px-6.sm:text-sm | 113.75 × 44border-box; flex min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 24px / 0px / 24pxgap normal / normal | 14px / 20pxweight 400; tracking 0.35px wrap normal |
1440 pxa.inline-flex.h-10.items-center.justify-center.border.border-foreground.bg-background.px-5.text-[13px].tracking-wide.text-foreground.transition-colors.hover:bg-foreground.hover:text-background.sm:h-11.sm:px-6.sm:text-sm | 113.75 × 44border-box; flex min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 24px / 0px / 24pxgap normal / normal | 14px / 20pxweight 400; tracking 0.35px wrap normal |
1920 pxa.inline-flex.h-10.items-center.justify-center.border.border-foreground.bg-background.px-5.text-[13px].tracking-wide.text-foreground.transition-colors.hover:bg-foreground.hover:text-background.sm:h-11.sm:px-6.sm:text-sm | 113.75 × 44border-box; flex min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 24px / 0px / 24pxgap normal / normal | 14px / 20pxweight 400; tracking 0.35px wrap normal |
C05 / navigation links
StandardPrimary, benchmark, and back navigation variants.
- Observed on
- / · /benchmarks · /benchmarks/speech-to-text · /benchmarks/real-swe · /terms
- Independent family
- navigation.primary; navigation.benchmark; navigation.back-link
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Shell owns nav height and 20/48 px inset; text link has no margin.
- Use
- Primary, benchmark, and back navigation variants.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxa.text-\[11px\].tracking-\[0\.2em\].text-muted:nth-child(2) | 40.40625 × 16.5border-box; block min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 11px / 16.5pxweight 400; tracking 2.2px wrap normal |
768 pxa.text-\[11px\].tracking-\[0\.2em\].text-muted:nth-child(2) | 40.40625 × 16.5border-box; block min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 11px / 16.5pxweight 400; tracking 2.2px wrap normal |
1440 pxa.text-\[11px\].tracking-\[0\.2em\].text-muted:nth-child(2) | 40.40625 × 16.5border-box; block min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 11px / 16.5pxweight 400; tracking 2.2px wrap normal |
1920 pxa.text-\[11px\].tracking-\[0\.2em\].text-muted:nth-child(2) | 40.40625 × 16.5border-box; block min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 11px / 16.5pxweight 400; tracking 2.2px wrap normal |
C06 / footer
StandardLow-emphasis footer with legal and editorial route links.
- Observed on
- / · /benchmarks · /benchmarks/speech-to-text · /benchmarks/real-swe · /company-data · /refer · /about · /privacy · /documents
- Independent family
- shell.footer
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Footer owns 32 px vertical and 48 px desktop horizontal padding; flex gap owns 8×16 px row/column spacing.
- Use
- Low-emphasis footer with legal and editorial route links.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxfooter.flex.flex-wrap.items-center:nth-child(3) | 390 × 80border-box; flex min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 32px / 20px / 32px / 20pxgap 8px / 16px | 12px / 16pxweight 400; tracking normal wrap normal |
768 pxfooter.flex.flex-wrap.items-center:nth-child(3) | 768 × 80border-box; flex min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 32px / 48px / 32px / 48pxgap 8px / 16px | 12px / 16pxweight 400; tracking normal wrap normal |
1440 pxfooter.flex.flex-wrap.items-center:nth-child(3) | 1440 × 80border-box; flex min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 32px / 48px / 32px / 48pxgap 8px / 16px | 12px / 16pxweight 400; tracking normal wrap normal |
1920 pxfooter.flex.flex-wrap.items-center:nth-child(3) | 1920 × 80border-box; flex min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 32px / 48px / 32px / 48pxgap 8px / 16px | 12px / 16pxweight 400; tracking normal wrap normal |
C07 / ascii landscape background
StandardFull-viewport, pointer-inert runtime canvas sourced from alpine-layers.jpg; captured as a frozen PNG, not reimplemented.
- Observed on
- Independent family
- Additional distinct part discovered during source extraction
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Fixed wrapper owns viewport; canvas owns device-pixel scaled dimensions.
- Use
- Full-viewport, pointer-inert runtime canvas sourced from alpine-layers.jpg; captured as a frozen PNG, not reimplemented.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxcanvas.absolute.inset-0.h-full:nth-child(1) | 390 × 844border-box; block min/max width 0px / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
768 pxcanvas.absolute.inset-0.h-full:nth-child(1) | 768 × 1024border-box; block min/max width 0px / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1440 pxcanvas.absolute.inset-0.h-full:nth-child(1) | 1440 × 1000border-box; block min/max width 0px / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1920 pxcanvas.absolute.inset-0.h-full:nth-child(1) | 1920 × 1080border-box; block min/max width 0px / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
C08 / subpage shell
ImportantCentered two-column lead form shell; one column below 1024 px.
- Observed on
- /company-data · /refer · /documents
- Independent family
- shell.subpage
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Main parent owns 48/64 px top/bottom and max-width; grid owns 48 px then 80 px gap.
- Use
- Centered two-column lead form shell; one column below 1024 px.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxmain.flex.flex-1.items-center:nth-child(2) | 390 × 1709.625border-box; flex min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 48px / 20px / 48px / 20pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
768 pxmain.flex.flex-1.items-center:nth-child(2) | 768 × 1503.96875border-box; flex min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 64px / 48px / 64px / 48pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1440 pxmain.flex.flex-1.items-center:nth-child(2) | 1440 × 1219border-box; flex min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 64px / 48px / 64px / 48pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1920 pxmain.flex.flex-1.items-center:nth-child(2) | 1920 × 1219border-box; flex min/max width auto / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 64px / 48px / 64px / 48pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
C09 / editorial shell
StandardNarrow editorial report shell used by benchmark reports and short editorial pages.
- Observed on
- /benchmarks · /benchmarks/speech-to-text · /benchmarks/real-swe · /about · /privacy
- Independent family
- shell.editorial
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Article owns max 768 px width plus 64 px top and 80 px bottom on report; container auto margins own centering.
- Use
- Narrow editorial report shell used by benchmark reports and short editorial pages.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxarticle.mx-auto.w-full.max-w-3xl:nth-child(1) | 350 × 13870.75border-box; block min/max width 0px / 768px | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 18px / 0px / 80px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
768 pxarticle.mx-auto.w-full.max-w-3xl:nth-child(1) | 672 × 9334.890625border-box; block min/max width 0px / 768px | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 64px / 0px / 80px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1440 pxarticle.mx-auto.w-full.max-w-3xl:nth-child(1) | 768 × 9328.890625border-box; block min/max width 0px / 768px | margin 0px / 288px / 0px / 288pxborder 0px / 0px / 0px / 0pxpadding 64px / 0px / 80px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1920 pxarticle.mx-auto.w-full.max-w-3xl:nth-child(1) | 768 × 9328.890625border-box; block min/max width 0px / 768px | margin 0px / 528px / 0px / 528pxborder 0px / 0px / 0px / 0pxpadding 64px / 0px / 80px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
C10 / legal shell
StandardLong-form legal document shell; audit exposes text and hierarchy but does not infer private legal operations.
- Observed on
- /terms
- Independent family
- shell.legal
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Parent owns 768 px reading column and responsive gutter; text-flow owns successive spacing.
- Use
- Long-form legal document shell; audit exposes text and hierarchy but does not infer private legal operations.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxarticle.mx-auto.w-full.max-w-3xl:nth-child(1) | 350 × 31358.171875border-box; block min/max width 0px / 768px | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 48px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
768 pxarticle.mx-auto.w-full.max-w-3xl:nth-child(1) | 672 × 18278.6875border-box; block min/max width 0px / 768px | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 80px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1440 pxarticle.mx-auto.w-full.max-w-3xl:nth-child(1) | 768 × 16738.6875border-box; block min/max width 0px / 768px | margin 0px / 288px / 0px / 288pxborder 0px / 0px / 0px / 0pxpadding 80px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1920 pxarticle.mx-auto.w-full.max-w-3xl:nth-child(1) | 768 × 16738.6875border-box; block min/max width 0px / 768px | margin 0px / 528px / 0px / 528pxborder 0px / 0px / 0px / 0pxpadding 80px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
C11 / article copy
StandardShort editorial article with uppercase eyebrow, 34 px desktop title, 14/28 body.
- Observed on
- /about · /privacy · /terms
- Independent family
- content.article
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Article owns 96 px desktop top padding; paragraph margin creates title-to-copy interval.
- Use
- Short editorial article with uppercase eyebrow, 34 px desktop title, 14/28 body.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxarticle.mx-auto.w-full.max-w-2xl:nth-child(1) | 350 × 278.171875border-box; block min/max width 0px / 672px | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 64px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
768 pxarticle.mx-auto.w-full.max-w-2xl:nth-child(1) | 672 × 282.6875border-box; block min/max width 0px / 672px | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 96px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1440 pxarticle.mx-auto.w-full.max-w-2xl:nth-child(1) | 672 × 282.6875border-box; block min/max width 0px / 672px | margin 0px / 336px / 0px / 336pxborder 0px / 0px / 0px / 0pxpadding 96px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1920 pxarticle.mx-auto.w-full.max-w-2xl:nth-child(1) | 672 × 282.6875border-box; block min/max width 0px / 672px | margin 0px / 576px / 0px / 576pxborder 0px / 0px / 0px / 0pxpadding 96px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
C12 / field label text input
ImportantField label and native text input pair; first and last name use two columns from 640 px.
- Observed on
- /company-data · /refer
- Independent family
- form.text-field
- States
- empty/default; focus within local invalid probe; browser invalid pseudo-state; text selection
- Spacing owner
- Label owns label-to-input line box; input owns 48 px height, 12 px inline inset and 1 px border; grid owns 16 px column gap.
- Use
- Field label and native text input pair; first and last name use two columns from 640 px.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 px#firstName | 308 × 48border-box; inline-block min/max width 0px / none | margin 0px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 12px / 0px / 12pxgap normal / normal | 13px / 19.5pxweight 400; tracking 0.275px wrap normal |
768 px#firstName | 295 × 48border-box; inline-block min/max width 0px / none | margin 0px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 12px / 0px / 12pxgap normal / normal | 13px / 19.5pxweight 400; tracking 0.275px wrap normal |
1440 px#firstName | 179 × 48border-box; inline-block min/max width 0px / none | margin 0px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 12px / 0px / 12pxgap normal / normal | 13px / 19.5pxweight 400; tracking 0.275px wrap normal |
1920 px#firstName | 179 × 48border-box; inline-block min/max width 0px / none | margin 0px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 12px / 0px / 12pxgap normal / normal | 13px / 19.5pxweight 400; tracking 0.275px wrap normal |
C13 / consent checkbox
StandardNative 16×16 consent checkbox paired with legal copy.
- Observed on
- /company-data · /refer · /documents
- Independent family
- form.checkbox
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Parent flex row owns 12 px gap; checkbox owns 16 px physical box and no padding.
- Use
- Native 16×16 consent checkbox paired with legal copy.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxinput.mt-1.h-4.w-4:nth-child(1) | 16 × 16border-box; block min/max width auto / none | margin 4px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 11px / 20pxweight 400; tracking normal wrap normal |
768 pxinput.mt-1.h-4.w-4:nth-child(1) | 16 × 16border-box; block min/max width auto / none | margin 4px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 11px / 20pxweight 400; tracking normal wrap normal |
1440 pxinput.mt-1.h-4.w-4:nth-child(1) | 16 × 16border-box; block min/max width auto / none | margin 4px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 11px / 20pxweight 400; tracking normal wrap normal |
1920 pxinput.mt-1.h-4.w-4:nth-child(1) | 16 × 16border-box; block min/max width auto / none | margin 4px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 11px / 20pxweight 400; tracking normal wrap normal |
C14 / tool multiselect
StandardCollapsed selector trigger only; menu-open runtime composition was not invoked.
- Observed on
- /company-data · /refer
- Independent family
- form.tool-multiselect
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Trigger owns 48 px height and 12 px inline inset; form stack owns 20 px vertical gaps.
- Use
- Collapsed selector trigger only; menu-open runtime composition was not invoked.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxbutton.flex.h-12.w-full:nth-child(1) | 308 × 48border-box; flex min/max width 0px / none | margin 0px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 12px / 0px / 12pxgap 12px / 12px | 13px / 19.5pxweight 400; tracking 0.275px wrap normal |
768 pxbutton.flex.h-12.w-full:nth-child(1) | 606 × 48border-box; flex min/max width 0px / none | margin 0px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 12px / 0px / 12pxgap 12px / 12px | 13px / 19.5pxweight 400; tracking 0.275px wrap normal |
1440 pxbutton.flex.h-12.w-full:nth-child(1) | 374 × 48border-box; flex min/max width 0px / none | margin 0px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 12px / 0px / 12pxgap 12px / 12px | 13px / 19.5pxweight 400; tracking 0.275px wrap normal |
1920 pxbutton.flex.h-12.w-full:nth-child(1) | 374 × 48border-box; flex min/max width 0px / none | margin 0px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 12px / 0px / 12pxgap 12px / 12px | 13px / 19.5pxweight 400; tracking 0.275px wrap normal |
C15 / document dropzone
StandardEmpty document upload control; file chooser not opened.
- Observed on
- /documents
- Independent family
- upload.dropzone
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Dropzone owns its own border/insets and hit area; surrounding form owns vertical gaps.
- Use
- Empty document upload control; file chooser not opened.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxbutton.documents-module__ALCh1a__dropzone:nth-child(5) | 358 × 173.5border-box; flex min/max width auto / none | margin 10px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 24px / 12px / 24px / 12pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
768 pxbutton.documents-module__ALCh1a__dropzone:nth-child(5) | 620 × 161.5border-box; flex min/max width auto / none | margin 10px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 30px / 20px / 30px / 20pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1440 pxbutton.documents-module__ALCh1a__dropzone:nth-child(5) | 620 × 161.5border-box; flex min/max width auto / none | margin 10px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 30px / 20px / 30px / 20pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
1920 pxbutton.documents-module__ALCh1a__dropzone:nth-child(5) | 620 × 161.5border-box; flex min/max width auto / none | margin 10px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 30px / 20px / 30px / 20pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap normal |
C16 / benchmark table
StandardResponsive benchmark table; report route adds metric/sort controls.
- Observed on
- /benchmarks/speech-to-text · /benchmarks/real-swe
- Independent family
- data.table
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Report container owns overflow region; cells own 1 px rules and per-cell inset.
- Use
- Responsive benchmark table; report route adds metric/sort controls.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxtable.w-full.min-w-\[560px\].border-collapse:nth-child(1) | 560 × 883.5border-box; table min/max width 560px / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 12px / 18pxweight 400; tracking normal wrap normal |
768 pxtable.w-full.min-w-\[560px\].border-collapse:nth-child(1) | 672 × 908border-box; table min/max width 560px / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 13px / 19.5pxweight 400; tracking normal wrap normal |
1440 pxtable.w-full.min-w-\[560px\].border-collapse:nth-child(1) | 768 × 908border-box; table min/max width 560px / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 13px / 19.5pxweight 400; tracking normal wrap normal |
1920 pxtable.w-full.min-w-\[560px\].border-collapse:nth-child(1) | 768 × 908border-box; table min/max width 560px / none | margin 0px / 0px / 0px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 13px / 19.5pxweight 400; tracking normal wrap normal |
C17 / benchmark chart
StandardReport chart/legend surface; data is observed but no interaction was activated.
- Observed on
- /benchmarks/real-swe
- Independent family
- data.chart
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Section grid owns chart-to-legend placement; chart internals measured only in raw probe due canvas/SVG implementation variation.
- Use
- Report chart/legend surface; data is observed but no interaction was activated.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 px#leaderboard | 350 × 771.390625border-box; block min/max width 0px / none | margin 24px / 0px / 32px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap |
768 px#leaderboard | 672 × 585border-box; block min/max width 0px / none | margin 24px / 0px / 32px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap |
1440 px#leaderboard | 768 × 565border-box; block min/max width 0px / none | margin 24px / 0px / 32px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap |
1920 px#leaderboard | 768 × 565border-box; block min/max width 0px / none | margin 24px / 0px / 32px / 0pxborder 0px / 0px / 0px / 0pxpadding 0px / 0px / 0px / 0pxgap normal / normal | 16px / 24pxweight 400; tracking normal wrap |
C18 / benchmark select
StandardNative benchmark selector used within Real-SWE report.
- Observed on
- /benchmarks/real-swe
- Independent family
- data.select
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Native control owns height, border, and text inset; report layout owns adjacent spacing.
- Use
- Native benchmark selector used within Real-SWE report.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 px#_R_4qav5ubrb_ | 350 × 48border-box; inline-block min/max width 0px / none | margin 8px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 12px / 0px / 12pxgap normal / normal | 16px / normalweight 400; tracking normal wrap |
768 px#_R_4qav5ubrb_ | 0 × 0border-box; inline-block min/max width 0px / none | margin 8px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 12px / 0px / 12pxgap normal / normal | 16px / normalweight 400; tracking normal wrap |
1440 px#_R_4qav5ubrb_ | 0 × 0border-box; inline-block min/max width 0px / none | margin 8px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 12px / 0px / 12pxgap normal / normal | 16px / normalweight 400; tracking normal wrap |
1920 px#_R_4qav5ubrb_ | 0 × 0border-box; inline-block min/max width 0px / none | margin 8px / 0px / 0px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 12px / 0px / 12pxgap normal / normal | 16px / normalweight 400; tracking normal wrap |
C19 / filled form submit
ImportantInk-filled submit action in lead forms; distinct from the outlined landing CTA.
- Observed on
- /company-data · /refer · /documents
- Independent family
- action.submit
- States
- default; 390/768/1440/1920 responsive samples
- Spacing owner
- Button owns 48 px height, 1 px border, 24 px horizontal inset, and its focus ring; form stack owns outer spacing.
- Use
- Ink-filled submit action in lead forms; distinct from the outlined landing CTA.
- Avoid
- Do not substitute a generic card, round a square control, clamp essential content, or imply an unverified backend outcome.
- Local source
- reference.css and reference.js
- Provenance
- Measured source appearance; reconstructed local HTML, CSS, and behavior. Private source contracts remain unverified.
Measured production geometry
Per-side values use top / right / bottom / left order. These are source measurements, not promises that a local fixture uses the production runtime.
| Viewport / selector | Outer box & layout | Insets and gaps | Typography |
|---|---|---|---|
390 pxbutton.flex.h-12.w-full:nth-child(11) | 308 × 48border-box; flex min/max width 0px / none | margin 0px / 0px / 20px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 24px / 0px / 24pxgap normal / normal | 13px / 19.5pxweight 400; tracking 0.325px wrap normal |
768 pxbutton.flex.h-12.w-full:nth-child(11) | 606 × 48border-box; flex min/max width 0px / none | margin 0px / 0px / 20px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 24px / 0px / 24pxgap normal / normal | 13px / 19.5pxweight 400; tracking 0.325px wrap normal |
1440 pxbutton.flex.h-12.w-full:nth-child(11) | 374 × 48border-box; flex min/max width 0px / none | margin 0px / 0px / 20px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 24px / 0px / 24pxgap normal / normal | 13px / 19.5pxweight 400; tracking 0.325px wrap normal |
1920 pxbutton.flex.h-12.w-full:nth-child(11) | 374 × 48border-box; flex min/max width 0px / none | margin 0px / 0px / 20px / 0pxborder 1px / 1px / 1px / 1pxpadding 0px / 24px / 0px / 24pxgap normal / normal | 13px / 19.5pxweight 400; tracking 0.325px wrap normal |