Design System Paperclip

PROEngine v4

Paperclip är en plattform för hantering av AI-agenter med en djärv design på mörk bakgrund, förankrad i en nästan svart bakgrund (#0a0a0a) och vit förgrundstext (#ffffff). Hjältesektionen definieras av en livfull flerfärgad gradientillustration av staplade pill- och kapselformer i magenta, violett, turkos, orange och gul, vilket skapar en kromatisk, energisk visuell identitet mot den mörka ytan. Typografin kombinerar Inter Tight (kondenserade, tunga rubriker med negativ bokstavsavstånd), Inter (brödtext och gränssnitt) och JetBrains Mono (kod och statusvisning). Den primära knappen är en vit pillerformad knapp på mörk bakgrund. Ett semantiskt grönt statussystem (#22c55e) signalerar agenters och uppgiftens tillstånd genom hela produktgränssnittet. Navigeringen är minimalistisk och platt, med en subtil nedre kantlinje.

Sistem visual

100% keyakinan

hero-displayDesign is intelligence made visibleInter Tight76px / 600 / 1.05

display-lgDesign is intelligence made visibleInter Tight64px / 600 / 1.05

display-mdDesign is intelligence made visibleInter Tight60px / 600 / 1

title-smDesign is intelligence made visibleInter Tight16px / 500 / 1.3

label-strongDesign is intelligence made visibleInter Tight14.4px / 600 / 1.25

bodyDesign is intelligence made visibleInter16px / 400 / 1.55

body-smDesign is intelligence made visibleInter14.4px / 400 / 1.55

body-sm-strongDesign is intelligence made visibleInter14.4px / 600 / 1.55

paragraphDesign is intelligence made visibleInter14.4px / 400 / 1.6

buttonDesign is intelligence made visibleInter15.2px / 450 / 1.5

captionDesign is intelligence made visibleInter13.6px / 400 / 1.55

caption-smDesign is intelligence made visibleInter13px / 400 / 1.5

smallDesign is intelligence made visibleInter12px / 400 / 1.5

mono-smDesign is intelligence made visibleJetBrains Mono12px / 400 / 1.3

mono-tagDesign is intelligence made visibleJetBrains Mono11px / 400 / 1.55

mono-labelDesign is intelligence made visibleJetBrains Mono11px / 500 / 1.55

mono-microDesign is intelligence made visibleJetBrains Mono10px / 500 / 1.55

100% keyakinan

base
4px

button-primary-3-padding-y
10.4px

button-secondary-padding-y
10.4px

button-primary-4-padding-y
10.4px

button-primary-padding-y
12.8px

button-primary-3-padding-x
22.4px

button-secondary-padding-x
22.4px

button-primary-4-padding-x
22.4px

card-7-grid-gap
24px

footer-gap
28px

footer-mobile-column-gap
28px

footer-mobile-gap
28px

button-primary-padding-x
32px

section-padding-y
50px

footer-column-gap
50.4px

footer-inner-max-width
1280px

footer-mobile-inner-max-width
1280px

100% keyakinan

sm · 8px

md · 11.2px

lg · 12px

full · 9999px

Komponen

Buttons7

35% kecocokan

ghost · desktop

Saat focus, hasil render-nya 35% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 100%21 ukuran cocok

Asli

Render

HoverKecocokan 98%18 ukuran cocok

Asli

Render

FocusKecocokan 35%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

ghost · desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

primary · desktop

DiamKecocokan 100%25 ukuran cocok

Asli

Render

HoverKecocokan 100%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

88% kecocokan

primary · desktop

Hasil render-nya 96% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 96%25 ukuran cocok

Asli

Render

HoverKecocokan 92%22 ukuran cocok

Asli

Render

FocusKecocokan 88%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

98% kecocokan

primary · desktop

DiamKecocokan 99%25 ukuran cocok

Asli

Render

HoverKecocokan 98%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

primary · desktop

DiamKecocokan 100%25 ukuran cocok

Asli

Render

HoverKecocokan 100%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%25 ukuran cocok

Asli

Render

HoverKecocokan 100%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

Cards10

99% kecocokan

desktop

Hasil render-nya 99% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%113 ukuran cocok

Render terpisah dari Card, diam — Render

FocusKecocokan 100%22 ukuran cocok

Render terpisah dari Card, focus — Render

Diam, instance 2Kecocokan 99%113 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 99%113 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%113 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 99%113 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 100%80 ukuran cocok

Render terpisah dari Card (10), diam — Render

HoverKecocokan 99%22 ukuran cocok

Render terpisah dari Card (10), hover — Render

Resep di DESIGN.md

94% kecocokan

desktop

Hasil render-nya 94% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 94%45 ukuran cocok

Render terpisah dari Card (2), diam — Render

Diam, instance 2Kecocokan 94%45 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 94%45 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 99%37 ukuran cocok

Render terpisah dari Card (3), diam — Render

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 99%37 ukuran cocok

Render terpisah dari Card (4), diam — Render

Resep di DESIGN.md

Tidak dicek

desktop

Waktu pengecekan habis.

Tidak ada yang dibandingkan untuk komponen ini.

Resep di DESIGN.md

98% kecocokan

desktop

DiamKecocokan 99%37 ukuran cocok

Render terpisah dari Card (6), diam — Render

HoverKecocokan 98%22 ukuran cocok

Render terpisah dari Card (6), hover — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%26 ukuran cocok

Render terpisah dari Card (7), diam — Render

Diam, instance 2Kecocokan 100%26 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%26 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

98% kecocokan

desktop

Hasil render-nya 98% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 99%220 ukuran cocok

Render terpisah dari Card (8), diam — Render

HoverKecocokan 99%18 ukuran cocok

Render terpisah dari Card (8), hover — Render

FocusKecocokan 99%18 ukuran cocok

Render terpisah dari Card (8), focus — Render

Diam, instance 2Kecocokan 98%220 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 99%220 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 99%220 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%32 ukuran cocok

Render terpisah dari Card (9), diam — Render

HoverKecocokan 100%22 ukuran cocok

Render terpisah dari Card (9), hover — Render

Resep di DESIGN.md

Extras16

100% kecocokan

desktop

Media 2 x bernilai 37px, sedangkan situs memakai 49px; Media 2 x bernilai 37px, sedangkan situs memakai 49px dan 4 lainnya.

DiamKecocokan 100%6 dari 286 ukuran berbeda

Agent persona card asli di situs, diam — Asli

Render terpisah dari Agent persona card, diam — Render

Diam, instance 2Kecocokan 100%6 dari 286 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%6 dari 286 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

98% kecocokan

desktop

DiamKecocokan 98%21 ukuran cocok

Asli

Render

HoverKecocokan 98%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

98% kecocokan

desktop

DiamKecocokan 98%21 ukuran cocok

Announcement bar asli di situs, diam — Asli

Render terpisah dari Announcement bar, diam — Render

HoverKecocokan 98%18 ukuran cocok

Announcement bar asli di situs, hover — Asli

Render terpisah dari Announcement bar, hover — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

98% kecocokan

desktop

DiamKecocokan 98%21 ukuran cocok

Announcement link asli di situs, diam — Asli

Render terpisah dari Announcement link, diam — Render

HoverKecocokan 98%18 ukuran cocok

Announcement link asli di situs, hover — Asli

Render terpisah dari Announcement link, hover — Render

Resep di DESIGN.md

93% kecocokan

desktop

Saat focus, hasil render-nya 93% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%25 ukuran cocok

Asli

Render

FocusKecocokan 93%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%25 ukuran cocok

Asli

Render

FocusKecocokan 100%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

98% kecocokan

desktop

Hasil render-nya 99% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%305 ukuran cocok

Feature section asli di situs, diam — Asli

Render terpisah dari Feature section, diam — Render

HoverKecocokan 100%18 ukuran cocok

Feature section asli di situs, hover — Asli

Render terpisah dari Feature section, hover — Render

FocusKecocokan 100%18 ukuran cocok

Feature section asli di situs, focus — Asli

Render terpisah dari Feature section, focus — Render

Diam, instance 2Kecocokan 99%305 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 99%305 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 98%305 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%287 ukuran cocok

Render terpisah dari Hero, diam — Render

Resep di DESIGN.md

35% kecocokan

desktop

Saat focus, hasil render-nya 35% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%21 ukuran cocok

Asli

Render

HoverKecocokan 98%18 ukuran cocok

Asli

Render

FocusKecocokan 35%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%32 ukuran cocok

Product area card asli di situs, diam — Asli

Render terpisah dari Product area card, diam — Render

HoverKecocokan 100%22 ukuran cocok

Product area card asli di situs, hover — Asli

Render terpisah dari Product area card, hover — Render

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 99%32 ukuran cocok

Product area card (2) asli di situs, diam — Asli

Render terpisah dari Product area card (2), diam — Render

HoverKecocokan 99%22 ukuran cocok

Product area card (2) asli di situs, hover — Asli

Render terpisah dari Product area card (2), hover — Render

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 99%32 ukuran cocok

Product area card (3) asli di situs, diam — Asli

Render terpisah dari Product area card (3), diam — Render

HoverKecocokan 99%22 ukuran cocok

Product area card (3) asli di situs, hover — Asli

Render terpisah dari Product area card (3), hover — Render

Resep di DESIGN.md

99% kecocokan

desktop

Hasil render-nya 99% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%113 ukuran cocok

Render terpisah dari Testimonial, diam — Render

FocusKecocokan 100%22 ukuran cocok

Render terpisah dari Testimonial, focus — Render

Diam, instance 2Kecocokan 99%113 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%113 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 99%113 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%113 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%26 ukuran cocok

Testimonial (2) asli di situs, diam — Asli

Render terpisah dari Testimonial (2), diam — Render

Resep di DESIGN.md

Headers6

Tidak dicek

desktop

Tidak ada resep yang dibuat: waktu membaca elemen habis.

Tidak ada yang dibandingkan untuk komponen ini.

93% kecocokan

desktop

Hasil render-nya 95% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 95%333 ukuran cocok

Header (inner) asli di situs, diam — Asli

Render terpisah dari Header (inner), diam — Render

Hovertidak dicek

Header (inner) asli di situs, hover — Asli

Render terpisah dari Header (inner), hover — Render

Focustidak dicek

Header (inner) asli di situs, focus — Asli

Render terpisah dari Header (inner), focus — Render

Focus pada buttonKecocokan 93%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada buttonKecocokan 96%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada cta 2Kecocokan 95%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 2Kecocokan 95%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada ctaKecocokan 95%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

91% kecocokan

desktop

Hasil render-nya 93% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 93%333 ukuran cocok

Header (landing) asli di situs, diam — Asli

Render terpisah dari Header (landing), diam — Render

Hovertidak dicek

Header (landing) asli di situs, hover — Asli

Render terpisah dari Header (landing), hover — Render

Focustidak dicek

Header (landing) asli di situs, focus — Asli

Render terpisah dari Header (landing), focus — Render

Focus pada buttonKecocokan 91%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada buttonKecocokan 96%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada cta 2Kecocokan 93%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 2Kecocokan 93%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada ctaKecocokan 91%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada ctaKecocokan 96%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada menu toggleKecocokan 93%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Tidak dicek

mobile

Tidak ada resep yang dibuat: waktu membaca elemen habis.

Tidak ada yang dibandingkan untuk komponen ini.

92% kecocokan

mobile

Hasil render-nya 93% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 93%186 ukuran cocok

Hovertidak dicek

Focustidak dicek

Focus pada cta 2Kecocokan 92%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 2Kecocokan 93%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada ctaKecocokan 93%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

88% kecocokan

mobile

Hasil render-nya 89% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 89%186 ukuran cocok

Hovertidak dicek

Focustidak dicek

Focus pada ctaKecocokan 88%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada ctaKecocokan 88%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada menu toggleKecocokan 89%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Footers2

100% kecocokan

desktop

DiamKecocokan 100%1267 ukuran cocok

Render terpisah dari Footer, diam — Render

Hovertidak dicek

Render terpisah dari Footer, hover — Render

Hover pada link 2Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada link 3Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada linkKecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

DiamKecocokan 100%1267 ukuran cocok

Hovertidak dicek

Hover pada link 2Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada link 3Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada linkKecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Input1

Tidak dicek

desktop

Waktu pengecekan habis.

Tidak ada yang dibandingkan untuk komponen ini.

Resep di DESIGN.md

DESIGN.md

Paperclip

Overview

Paperclip reads like a developer tool that happens to have a marketing site. The canvas is near-black Void (canvas, #0A0A0A), type is crisp white, and everything secondary drops to a neutral gray. There is almost no brand hue. Color appears only as status signal (green, amber, red) and as a blue focus ring. The personality is calm, governance-minded and precise rather than playful. The only bursts of character are small gradient tag pills and colorful agent mascots seen in the screenshots.

Density is split on purpose. Sections breathe with generous vertical rhythm (section-padding-y, 50px, repeated across 19 section edges), while cards are tight and information-dense: a mono eyebrow, an Inter Tight title, gray body copy and a meta line. Hierarchy comes from three typefaces doing three jobs. Inter Tight carries headlines with negative tracking. Inter carries reading and UI text. JetBrains Mono carries small tracked labels that tag and categorize.

Depth is tonal and hairline-driven. Panels step up from canvas to a charcoal fill (#171717 on card-3, card-9, product-area-card), and every container is outlined in a 1px white-at-10% hairline (#FFFFFF1A). Only mock app windows get a real drop shadow. Interactive elements are pills; containers are soft rectangles.

Key Characteristics:

Near-black canvas (#0A0A0A) everywhere; header, footer and inputs all sit on it.
White-on-black primary CTAs: a white pill (primary, #FFFFFF) that inverts to transparent with a white outline on hover.
Three-family type system: Inter Tight display (weight 600, negative tracking), Inter body, and JetBrains Mono labels (positive tracking).
1px #FFFFFF1A hairlines on cards, header bottom, footer top and inputs. On hover they brighten to #A1A1A1.
Pill radius (rounded.full) for every button, chip and filter; 8–12px (rounded.sm, rounded.md, rounded.lg) for containers.
One shadow, used only on mock windows: #00000066 0px 18px 40px -28px.
Status colors (success, warning, error) appear as text signal, never as large fills.

Colors

The palette is a monochrome ladder from black to white, plus a handful of status and tint colors used at very low weight. White carries nearly all text; gray carries all secondary text.

Brand & Action

Signal White (primary, #FFFFFF): the primary CTA fill on button-primary, with Ink Charcoal (on-primary, #141413) label text. On hover the fill goes transparent and the label turns white. Other primary pills (button-primary-3, button-primary-4, hero-cta) use the slightly softer #FAFAFA fill with #0A0A0A text.
Ink Charcoal (on-primary, #141413): label color on white CTAs. It is also the surface-raised value.

Surface

Void (canvas, #0A0A0A): the page, header-landing, footer, input and testimonial backgrounds. This is the default for every surface.
Raised Charcoal (surface-raised, #141413): lifted panels and interactive areas, one step above canvas.
Card fill #171717 (measured on card-3, card-9, product-area-card, card-2, and on category-filter-active): the standard panel step. It is also the button-secondary hover fill.
Tint Teal (tint-teal, #1A3A38) and Tint Navy (tint-navy, #1A2A40): rare, dark-tinted colors. Teal is measured as the tag text on product-area-card-2. Use them only for category tagging.

Text

Ink (ink, #FFFFFF): headlines and primary text. Recipes also render #FAFAFA for titles and links.
Muted Gray (muted, #A1A1A1): body copy in cards, nav items at rest, footer links, mono eyebrows. This is the workhorse secondary color.
Warm Muted (muted-warm, #9A958A): an occasional warm-gray text accent. It has low weight; do not substitute it for muted.
Ink Inverse (ink-inverse, #0A0A0A): text on white pills.

Status

Success Green (success, #22C55E): status dots and positive text.
Link Blue (accent-blue, #2563EB): links, plus the 3px focus outline on input, card-5 and category-filter.
Warning Amber (warning, #F59E0B): pending or warning states.
Error Red (error, #DC2626): error and rejected states.

Component & State Colors

These were measured only on components, never in the page sampling.

Hover Charcoal (surface-card, #262626): the hover and focus fill for ghost controls (button-ghost-2, nav-item, header menu toggles).
Focus Blue (focus-ring, #005FCC): a focus-ring color seen on components only.
Hairline #FFFFFF1A: the 1px border on cards, inputs, the header bottom and the footer top. It brightens to #A1A1A1 on hover (card-6, card-9, product-area-card, footer-link).
Hover wash #0A0A0A14: the hover fill on announcement-bar-2.

There are no gradient tokens. The screenshots show gradients only on a few small tag pills, and no gradient value was measured, so keep surfaces and buttons solid.

Typography

Font Family

Inter Tight: display and headings (hero-display, display-lg, display-md, title-sm, label-strong). It is always weight 500–600 with negative tracking at large sizes.
Inter: all body, UI and button text (body, body-sm, paragraph, button, caption, small). This is the dominant family.
JetBrains Mono: eyebrows, tags, meta lines and code-like metadata (mono-sm, mono-tag, mono-label, mono-micro). It is always small (10–12px) and tracked positive.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	76px	600	1.05	-2.28px	Home hero H1 (`hero-title`)
`display-lg`	64px	600	1.05	-1.92px	Large section H2
`display-md`	60px	600	1	-2.1px	Inner-page H1
`title-sm`	16px	500	1.3	-0.4px	Card H3 (`card-5-title`)
`label-strong`	14.4px	600	1.25	normal	Testimonial names (`card-text`)
`body`	16px	400	1.55	normal	Default running text
`body-sm`	14.4px	400	1.55	normal	Card body, footer links
`body-sm-strong`	14.4px	600	1.55	normal	Footer headings, CTA labels, inline emphasis
`paragraph`	14.4px	400	1.6	normal	`<p>` blocks in dense sections
`button`	15.2px	450	1.5	normal	Ghost buttons and nav items
`caption`	13.6px	400	1.55	normal	Testimonial roles, footer legal
`caption-sm`	13px	400	1.5	normal	Connector descriptions, input text, filter chips
`small`	12px	400	1.5	normal	Meta lines
`mono-sm`	12px	400	1.3	normal	Handles and IDs (`card-text-2`)
`mono-tag`	11px	400	1.55	0.44px	Window and status tags
`mono-label`	11px	500	1.55	1.1px	Section eyebrows (`hero-text`, `feature-section-text`)
`mono-micro`	10px	500	1.55	0.5px	Micro badges

Principles

Weight ladder. The weights in use are 400, 450, 500 and 600. Weight 450 is reserved for ghost and nav buttons (button). Filled pill CTAs use 500 (button-primary, button-primary-2) or 600 (button-primary-3, hero-cta). Display text is always 600. Weight 700 appears only in one inline emphasis (feature-section-text-2); avoid it elsewhere.
Tracking scales inversely with size. Inter Tight display tracks at roughly -3% of its size (-2.28px at 76px). Mid titles track lightly negative: -0.448px at 22.4px on card-3-text-2, -0.576px at 19.2px on card-9-text-2. Inter body stays at normal. Mono labels track positive, from 0.44px to 1.1px.
Leading. Display sizes set nearly solid (1–1.05). Reading text opens to 1.55–1.6. Mono labels sit at 1.3–1.55.
Fractional sizes are intentional. The 14.4px, 15.2px and 13.6px sizes come from rem-based scaling (0.9rem, 0.95rem, 0.85rem). Keep them; don't round to 14px or 15px.
Color pairing. Titles take ink; every body and eyebrow line takes muted.

All three families are open-source (Google Fonts / JetBrains), so no substitution is required. Load Inter with variable weights so 450 renders.

Layout

Spacing System

The system runs on a 4px step (base, 4px). It was derived from the verified component paddings and gaps.

Token	Value	Measured on
`section-padding-y`	50px	Vertical rhythm between page sections, measured on the page itself (19 section edges) rather than on a component
`button-primary-padding-y` / `button-primary-padding-x`	12.8px / 32px	`button-primary` (large hero CTA)
`button-primary-3-padding-y` / `button-primary-3-padding-x`	10.4px / 22.4px	`button-primary-3`
`button-secondary-padding-y` / `button-secondary-padding-x`	10.4px / 22.4px	`button-secondary`
`button-primary-4-padding-y` / `button-primary-4-padding-x`	10.4px / 22.4px	`button-primary-4`
`card-7-grid-gap`	24px	Column gap of the stat row `card-7` sits in
`footer-column-gap`	50.4px	Column gap of the `footer-columns` grid
`footer-gap`	28px	Gap inside each `footer-column`
`footer-mobile-column-gap`	28px	`footer-mobile-columns` grid on mobile
`footer-mobile-gap`	28px	Gap inside each `footer-mobile-column`

Standard and secondary CTAs share one padding pair (10.4px / 22.4px). Only the hero CTA is larger.

Grid & Container

Content is capped at 1280px (footer-inner-max-width, footer-mobile-inner-max-width) and centered.
Stat rows sit side by side with 24px gutters (card-7-grid-gap).
Footer columns are separated by 50.4px (footer-column-gap). Their vertical stacks use 28px (footer-gap).
The screenshots show these patterns:
- a centered hero;
- left-aligned eyebrow + H2 blocks alternating with centered headlines;
- two-column text / mock-window feature splits that alternate sides;
- a bordered three-up process strip;
- a dense connector card grid behind a search field and filter chips;
- a horizontally cropped two-row testimonial marquee.

Whitespace Philosophy

The page is airy between sections and compact inside them. section-padding-y keeps sections apart, while cards pack eyebrow, title, body and meta tightly. That contrast is what makes the page feel like a tool rather than a brochure. Whitespace, hairlines and full-width dividers separate content; the design does not rely on background color blocks. Keep every new spacing value on the base step.

Measured Layout

Every spacing token restates a measurement of a verified component recipe, or the step those measurements share. section-padding-y is measured directly on the page sections and feeds no step.

base: 4px (greatest common step of the verified component paddings and gaps: 28px, 24px, 32px)
section-padding-y: 50px (vertical padding repeated on the page sections: 19 section edges on 1 page)
footer-column-gap: 50.4px (footer, column gap of the footer-columns grid)
footer-gap: 28px (footer, gap of footer-column)
footer-inner-max-width: 1280px (footer, max width of footer-columns)
footer-mobile-column-gap: 28px (footer-mobile, column gap of the footer-mobile-columns grid)
footer-mobile-gap: 28px (footer-mobile, gap of footer-mobile-column)
footer-mobile-inner-max-width: 1280px (footer-mobile, max width of footer-mobile-columns)
card-7-grid-gap: 24px (card-7, column gap of the grid its instances sit in)
button-primary-padding-y: 12.8px (button-primary, vertical padding of the root)
button-primary-padding-x: 32px (button-primary, horizontal padding of the root)
button-primary-3-padding-y: 10.4px (button-primary-3, vertical padding of the root)
button-primary-3-padding-x: 22.4px (button-primary-3, horizontal padding of the root)
button-secondary-padding-y: 10.4px (button-secondary, vertical padding of the root)
button-secondary-padding-x: 22.4px (button-secondary, horizontal padding of the root)
button-primary-4-padding-y: 10.4px (button-primary-4, vertical padding of the root)
button-primary-4-padding-x: 22.4px (button-primary-4, horizontal padding of the root)

The footer lays out in 3 columns; the card-7 grid in 3 columns at desktop.

Elevation & Depth

Level	Treatment	Use
0 — Flat	`canvas` (#0A0A0A), no border	Page background, hero, section bands
1 — Hairline	1px solid #FFFFFF1A	Card outlines (`card-3`, `card-9`, `card-5`, `testimonial`), `input`, header bottom edge (`header-landing`), footer top edge (`footer`)
2 — Tonal step	#171717 fill plus hairline	Content cards (`card-3`, `card-10`, `product-area-card`), `card-2` process strip
3 — Interactive hairline	Border brightens to 1px solid #A1A1A1	Hover on `card-6`, `card-9`, `card-10`, `product-area-card`, `footer-link`
4 — Shadow	`#00000066 0px 18px 40px -28px` plus hairline	Mock app windows: `hero-group-3`, `feature-section-group-3`, `card-8-group-2`
Focus	3px solid #2563EB outline, 3px offset; or 2px solid #FAFAFA outline, 2px offset	Blue on `input`, `card-5`, `category-filter`; white on `button-primary-2` and header CTAs

No backdrop blur was measured. The sticky header is opaque canvas.

Shadow philosophy. Elevation is tonal first. A surface rises by moving from #0A0A0A to #171717 and gaining a 10% white hairline. The single shadow, #00000066 0px 18px 40px -28px, is a deep, heavily negative-spread drop that only reads beneath the bottom edge. It is applied to product mock windows so they float above the page like real app screenshots. Don't add it to ordinary cards, and don't invent lighter or glowing variants. On near-black, light shadows vanish and glows break the restraint.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.sm`	8px	Ghost buttons and nav items (`button-ghost`, `nav-item`), `input`, testimonial cards (`testimonial`, `card`), inner tiles (`card-10-group`), mobile menu toggle
`rounded.md`	11.2px	Content cards (`card-3`, `card-6`, `card-9`, `card-10`, `product-area-card`), mock windows (`hero-group-3`, `feature-section-group-3`)
`rounded.lg`	12px	Connector cards (`card-5`)
`rounded.full`	9999px	Every filled and outlined button, filter chips (`category-filter`), announcement pills, tag pills (`card-9-text`), circular footer social links (`footer-link`, 44px), round icon buttons (`button-ghost-2`, header menu toggle at 40px)

The geometry is soft-rectangular containers with fully pill-shaped interactive elements. Corners stay modest (8–12px) so cards feel engineered rather than bubbly. Anything you click to commit or filter is a pill, and icon-only buttons and avatars are circles. Rectangular nav and ghost items are the deliberate exception: they use rounded.sm so their hover fill reads as a soft tile. The 11.2px value comes from rem-based scaling (0.7rem); keep it distinct from 12px.

Components

Each component below was distilled from the live page: the recipe is a standalone, placeholder-filled reproduction with literal values, and every frontmatter key named in the anatomy carries the same measurements. A verified component reproduced the original in every check; a flagged one is shipped with the reason it did not; one marked not verifiable could not be compared with the original, which says nothing about the recipe.

Buttons

Button, primary

Verification: verified against the live page at desktop.

Anatomy

button-primary: the component root, a <a> (.c-button-primary), 17-character label

Recipe

HTML · CSS

<div class="c-button-primary-scope">
  <a class="c-button-primary" href="#">lorem ipsum dolor</a>
</div>

.c-button-primary-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-button-primary {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12.8px 32px;
  background-color: #FFFFFF;
  color: #141413;
  border: 1px solid #FFFFFF;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 15.2px;
  font-weight: 500;
  line-height: 23.56px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.25s, 0.25s, 0.25s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: background, color, border-color;
}

.c-button-primary:hover {
  background-color: transparent;
  color: #FFFFFF;
}

States

hover (button-primary-hover): background-color transparent, color #FFFFFF

Button, primary (2)

Verification: flagged, the render matched 96% of the original pixels, below the 97% required after 2 correction attempts.

Anatomy

button-primary-2: the component root, a <button> (.c-button-primary-2), 7-character label

Recipe

HTML · CSS

<div class="c-button-primary-2-scope">
  <button class="c-button-primary-2" type="button">lorem i</button>
</div>

.c-button-primary-2-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-button-primary-2 {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 9.6px 21.6px;
  background-color: #FAFAFA;
  color: #0A0A0A;
  border: 1px solid #FAFAFA;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 15.2px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: background, color;
}

.c-button-primary-2:hover {
  background-color: #0A0A0A;
  color: #FAFAFA;
}

.c-button-primary-2:focus {
  outline: 2px solid #FAFAFA;
  outline-offset: 2px;
}

States

hover (button-primary-2-hover): background-color #0A0A0A, color #FAFAFA
focus: outline 2px solid #FAFAFA, outline-offset 2px

Button, ghost

Verification: flagged, the render matched 35% of the original pixels, below the 97% required on focus after 2 correction attempts.

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost), 7-character label

Recipe

HTML · CSS

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">lorem i</button>
</div>

.c-button-ghost-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-button-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6.4px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 9.6px 14.4px;
  background-color: transparent;
  color: #A1A1A1;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 15.2px;
  font-weight: 450;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  list-style-type: none;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: color, background;
}

.c-button-ghost:hover {
  background-color: #262626;
  color: #FAFAFA;
}

.c-button-ghost:focus {
  background-color: #262626;
  color: #FAFAFA;
}

States

hover (button-ghost-hover): background-color #262626, color #FAFAFA
focus (button-ghost-focus): background-color #262626, color #FAFAFA

Button, primary (3)

Verification: verified against the live page at desktop.

Anatomy

button-primary-3: the component root, a <a> (.c-button-primary-3), 17-character label

Recipe

HTML · CSS

<div class="c-button-primary-3-scope">
  <a class="c-button-primary-3" href="#">lorem ipsum dolor</a>
</div>

.c-button-primary-3-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-button-primary-3 {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10.4px 22.4px;
  background-color: #FAFAFA;
  color: #0A0A0A;
  border: 1px solid #FAFAFA;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 22.32px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: background, color;
}

.c-button-primary-3:hover {
  background-color: transparent;
  color: #FAFAFA;
}

States

hover (button-primary-3-hover): background-color transparent, color #FAFAFA

Button, secondary

Verification: verified against the live page at desktop.

Anatomy

button-secondary: the component root, a <a> (.c-button-secondary), 13-character label

Recipe

HTML · CSS

<div class="c-button-secondary-scope">
  <a class="c-button-secondary" href="#">lorem ipsum d</a>
</div>

.c-button-secondary-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-button-secondary {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10.4px 22.4px;
  color: #FAFAFA;
  border: 1px solid #FAFAFA;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 22.32px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: background, color;
}

.c-button-secondary:hover {
  background-color: #171717;
}

States

hover (button-secondary-hover): background-color #171717

Button, ghost (2)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-2: the component root, a <button> (.c-button-ghost-2)
button-ghost-2-icon: icon placeholder, 18px (.c-button-ghost-2__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-2-scope">
  <button class="c-button-ghost-2" type="button">
    <span class="c-button-ghost-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-button-ghost-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: transparent;
  color: #A1A1A1;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: color, background;
}

.c-button-ghost-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-ghost-2:hover {
  background-color: #262626;
  color: #FAFAFA;
}

States

hover (button-ghost-2-hover): background-color #262626, color #FAFAFA

Button, primary (4)

Verification: verified against the live page at desktop.

Anatomy

button-primary-4: the component root, a <a> (.c-button-primary-4), 18-character label

Recipe

HTML · CSS

<div class="c-button-primary-4-scope">
  <a class="c-button-primary-4" href="#">lorem ipsum dolor</a>
</div>

.c-button-primary-4-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-button-primary-4 {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10.4px 22.4px;
  background-color: #FAFAFA;
  color: #0A0A0A;
  border: 1px solid #FAFAFA;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 22.32px;
  text-decoration-line: none;
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: background, color;
}

.c-button-primary-4:hover {
  background-color: transparent;
  color: #FAFAFA;
}

States

hover (button-primary-4-hover): background-color transparent, color #FAFAFA

Cards

Card

Verification: flagged, the render came out 3 px taller than the original (instance 2) after 2 correction attempts.

Anatomy

Group: 5 instances in a 22-column grid, 16px gap; the recipe carries the values they all share
card: the component root, a <article> (.c-card)
card-group: inner flex row (.c-card__group)
card-group-2: inner flex row (.c-card__group-2)
card-media: image placeholder, 40px (.c-card__media)
card-group-3: inner flex column (.c-card__group-3)
card-text: label text, 10 characters (.c-card__text)
card-text-2: label text, 10 characters (.c-card__text-2)
card-icon: icon placeholder, 18px (.c-card__icon)
card-body: label text, 253 characters (.c-card__body)

Recipe

HTML · CSS

<div class="c-card-scope">
  <article class="c-card">
    <div class="c-card__group">
      <div class="c-card__group-2">
        <span class="c-card__media" aria-hidden="true"></span>
        <div class="c-card__group-3">
          <span class="c-card__text">lorem ipsu</span>
          <span class="c-card__text-2">lorem ipsu</span>
        </div>
      </div>
      <span class="c-card__icon" aria-hidden="true"></span>
    </div>
    <p class="c-card__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit</p>
  </article>
</div>

.c-card-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 336px;
  min-height: 232px;
  padding: 17.6px 17.6px 19.2px;
  position: relative;
  background-color: #0A0A0A;
  color: #FAFAFA;
  border: 1px solid #FFFFFF1A;
  border-radius: 8px;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card__group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
}

.c-card__group-2 {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  gap: 12.8px;
  box-sizing: border-box;
}

.c-card__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  border-radius: 50%;
}

.c-card__group-3 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.c-card__text {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 18px;
}

.c-card__text-2 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 12px;
  line-height: 15.6px;
}

.c-card__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  opacity: 0.4;
}

.c-card__body {
  display: flow-root;
  box-sizing: border-box;
  margin: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #A1A1A1;
  font-size: 14.4px;
  line-height: 23.328px;
}

.c-card:focus {
  transform-origin: 168px 117.375px;
}

States

focus: transform-origin 168px 117.375px

Card (2)

Verification: flagged, the render matched 94% of the original pixels, below the 96% required (instance 1) after 2 correction attempts.

Anatomy

Group: 3 instances in a 3-column grid, 1px gap; the recipe carries the values they all share
card-2: the component root, a <div> (.c-card-2)
card-2-text: label text, 2 characters (.c-card-2__text)
card-2-title: heading, 16 characters (.c-card-2__title)
card-2-body: label text, 46 characters (.c-card-2__body)

Recipe

HTML · CSS

<div class="c-card-2-scope">
  <div class="c-card-2">
    <span class="c-card-2__text">lo</span>
    <h3 class="c-card-2__title">lorem ipsum dolo</h3>
    <p class="c-card-2__body">lorem ipsum dolor sit amet consectetur adipisc</p>
  </div>
</div>

.c-card-2-scope {
  background-color: #FFFFFF1A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 45.6px 24px;
  background-color: #171717;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card-2__text {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 12.8px;
  line-height: 19.84px;
  margin-bottom: 24px;
}

.c-card-2__title {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 8px;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.48px;
}

.c-card-2__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #A1A1A1;
  font-size: 14.4px;
  line-height: 23.04px;
}

States

No hover or focus change was observed.

Card (3)

Verification: verified against the live page at desktop.

Anatomy

card-3: the component root, a <a> (.c-card-3)
card-3-text: label text, 17 characters (.c-card-3__text)
card-3-text-2: label text, 15 characters (.c-card-3__text-2)
card-3-text-3: label text, 0 characters (.c-card-3__text-3)
card-3-text-4: label text, 54 characters (.c-card-3__text-4, 2 instances)
card-3-text-5: label text, 12 characters (.c-card-3__text-5)

Recipe

HTML · CSS

<div class="c-card-3-scope">
  <a class="c-card-3" href="#">
    <span class="c-card-3__text">lorem ipsum dolor</span>
    <span class="c-card-3__text-2">lorem ipsum dol</span>
    <span class="c-card-3__text-3">
      <span class="c-card-3__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit</span>
      <span class="c-card-3__text-4">l</span>
    </span>
    <span class="c-card-3__text-5">lorem ipsum</span>
  </a>
</div>

.c-card-3-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card-3 {
  display: inline-flex;
  flex-direction: column;
  flex-basis: 360px;
  gap: 12px;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: min(280px, 100%);
  padding: 45.6px 24px;
  background-color: #171717;
  color: #FAFAFA;
  border: 1px solid #FFFFFF1A;
  border-radius: 11.2px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  text-decoration-line: none;
  text-align: left;
  transition-duration: 0.15s, 0.25s;
  transition-timing-function: ease, cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: border-color, transform;
}

.c-card-3__text {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 17.05px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
}

.c-card-3__text-2 {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 22.4px;
  font-weight: 600;
  line-height: 25.76px;
  letter-spacing: -0.448px;
}

.c-card-3__text-3 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 15.2px;
  line-height: 24.32px;
}

.c-card-3__text-5 {
  display: block;
  box-sizing: border-box;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 22.32px;
  margin-top: auto;
}

States

No hover or focus change was observed.

Card (4)

Verification: verified against the live page at desktop.

Anatomy

card-4: the component root, a <a> (.c-card-4)
card-4-text: label text, 15 characters (.c-card-4__text)
card-4-text-2: label text, 20 characters (.c-card-4__text-2)
card-4-text-3: label text, 0 characters (.c-card-4__text-3)
card-4-text-4: label text, 115 characters (.c-card-4__text-4, 2 instances)
card-4-text-5: label text, 12 characters (.c-card-4__text-5)

Recipe

HTML · CSS

<div class="c-card-4-scope">
  <a class="c-card-4" href="#">
    <span class="c-card-4__text">lorem ipsum dol</span>
    <span class="c-card-4__text-2">lorem ipsum dolor si</span>
    <span class="c-card-4__text-3">
      <span class="c-card-4__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur</span>
      <span class="c-card-4__text-4">l</span>
    </span>
    <span class="c-card-4__text-5">lorem ipsum</span>
  </a>
</div>

.c-card-4-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card-4 {
  display: inline-flex;
  flex-direction: column;
  flex-basis: 360px;
  gap: 12px;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: min(280px, 100%);
  padding: 45.6px 24px;
  background-color: #171717;
  color: #FAFAFA;
  border: 1px solid #FFFFFF1A;
  border-radius: 11.2px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  text-decoration-line: none;
  text-align: left;
  transition-duration: 0.15s, 0.25s;
  transition-timing-function: ease, cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: border-color, transform;
}

.c-card-4__text {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 17.05px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
}

.c-card-4__text-2 {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 22.4px;
  font-weight: 600;
  line-height: 25.76px;
  letter-spacing: -0.448px;
}

.c-card-4__text-3 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 15.2px;
  line-height: 24.32px;
}

.c-card-4__text-5 {
  display: block;
  box-sizing: border-box;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 22.32px;
  margin-top: auto;
}

States

No hover or focus change was observed.

Card (5)

Verification: flagged, verification timed out.

Anatomy

Group: 6 instances in a 3-column grid, 16px gap; the recipe carries the values they all share
card-5: the component root, a <a> (.c-card-5)
card-5-group: inner grid (.c-card-5__group)
card-5-media: image placeholder, 26px (.c-card-5__media)
card-5-group-2: inner block (.c-card-5__group-2)
card-5-title: heading, 8 characters (.c-card-5__title)
card-5-body: label text, 51 characters (.c-card-5__body)
card-5-group-3: inner group (.c-card-5__group-3)
card-5-text: label text, 4 characters (.c-card-5__text, 3 instances)
card-5-text-2: label text, 0 characters (.c-card-5__text-2)

Recipe

HTML · CSS

<div class="c-card-5-scope">
  <a class="c-card-5" href="#">
    <span class="c-card-5__group">
      <span class="c-card-5__media" aria-hidden="true"></span>
    </span>
    <div class="c-card-5__group-2">
      <h3 class="c-card-5__title">lorem ip</h3>
      <p class="c-card-5__body">lorem ipsum dolor sit amet consectetur adipiscing e</p>
      <small class="c-card-5__group-3">
        <span class="c-card-5__text">lore</span>
        <span class="c-card-5__text-2">
          <span class="c-card-5__text">l</span>
          <span class="c-card-5__text">lorem i</span>
        </span>
      </small>
    </div>
  </a>
</div>

.c-card-5-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card-5 {
  display: inline-grid;
  align-items: start;
  gap: 16px;
  grid-template-columns: 44px 1fr;
  border-spacing: 0px;
  box-sizing: border-box;
  min-height: 144px;
  padding: 24px;
  color: #FAFAFA;
  border: 1px solid #FFFFFF1A;
  border-radius: 12px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  text-decoration-line: none;
}

.c-card-5__group {
  display: grid;
  align-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  background-color: #FAFAFA;
  border-radius: 22%;
}

.c-card-5__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  max-width: 100%;
  aspect-ratio: auto 26 / 26;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-card-5__group-2 {
  display: block;
  box-sizing: border-box;
}

.c-card-5__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20.8px;
  letter-spacing: -0.4px;
}

.c-card-5__body {
  display: block;
  box-sizing: border-box;
  margin: 8px 0px 0px;
  color: #A1A1A1;
  font-size: 13px;
  line-height: 19.5px;
}

.c-card-5__group-3 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 12px;
  line-height: 18px;
  margin-top: 12px;
}

.c-card-5__text-2 {
  display: inline;
  box-sizing: border-box;
}

.c-card-5:hover {
  border: 1px solid #A1A1A1;
}

.c-card-5:focus {
  outline: 3px solid #2563EB;
  outline-offset: 3px;
}

States

hover: border 1px solid #A1A1A1
focus: outline 3px solid #2563EB, outline-offset 3px

Card (6)

Verification: verified against the live page at desktop.

Anatomy

card-6: the component root, a <a> (.c-card-6)
card-6-text: label text, 20 characters (.c-card-6__text)
card-6-text-2: label text, 10 characters (.c-card-6__text-2)
card-6-text-3: label text, 0 characters (.c-card-6__text-3)
card-6-text-4: label text, 148 characters (.c-card-6__text-4, 2 instances)
card-6-text-5: label text, 12 characters (.c-card-6__text-5)

Recipe

HTML · CSS

<div class="c-card-6-scope">
  <a class="c-card-6" href="#">
    <span class="c-card-6__text">lorem ipsum dolor si</span>
    <span class="c-card-6__text-2">lorem ipsu</span>
    <span class="c-card-6__text-3">
      <span class="c-card-6__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod t</span>
      <span class="c-card-6__text-4">l</span>
    </span>
    <span class="c-card-6__text-5">lorem ipsum</span>
  </a>
</div>

.c-card-6-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card-6 {
  display: inline-flex;
  flex-direction: column;
  flex-basis: 360px;
  gap: 12px;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: min(280px, 100%);
  padding: 45.6px 24px;
  background-color: #171717;
  color: #FAFAFA;
  border: 1px solid #FFFFFF1A;
  border-radius: 11.2px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  text-decoration-line: none;
  text-align: left;
  transition-duration: 0.15s, 0.25s;
  transition-timing-function: ease, cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: border-color, transform;
}

.c-card-6__text {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 17.05px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
}

.c-card-6__text-2 {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 22.4px;
  font-weight: 600;
  line-height: 25.76px;
  letter-spacing: -0.448px;
}

.c-card-6__text-3 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 15.2px;
  line-height: 24.32px;
}

.c-card-6__text-5 {
  display: block;
  box-sizing: border-box;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 22.32px;
  margin-top: auto;
}

.c-card-6:hover {
  border: 1px solid #A1A1A1;
  transform: matrix(1, 0, 0, 1, 0, -2);
}

States

hover: border 1px solid #A1A1A1, transform matrix(1, 0, 0, 1, 0, -2)

Card (7)

Verification: verified against the live page at desktop.

Anatomy

Group: 3 instances in a 3-column grid, 24px gap; the recipe carries the values they all share
card-7: the component root, a <div> (.c-card-7)
card-7-text: label text, 15 characters (.c-card-7__text)
card-7-text-2: label text, 27 characters (.c-card-7__text-2)

Recipe

HTML · CSS

<div class="c-card-7-scope">
  <div class="c-card-7">
    <span class="c-card-7__text">lorem ipsum dol</span>
    <span class="c-card-7__text-2">lorem ipsum dolor sit amet</span>
  </div>
</div>

.c-card-7-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card-7 {
  display: inline-flex;
  flex-direction: column;
  gap: 5.6px;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  text-align: center;
}

.c-card-7__text {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 62px;
  letter-spacing: -0.8px;
}

.c-card-7__text-2 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 14.4px;
  line-height: 22.32px;
}

States

No hover or focus change was observed.

Card (8)

Verification: flagged, the render came out 48 px taller than the original (instance 2) after 2 correction attempts.

Anatomy

Group: 4 instances in a 1-column grid, 102.8px gap; the recipe carries the values they all share
card-8: the component root, a <section> (.c-card-8)
card-8-group: inner flex column (.c-card-8__group)
card-8-text: label text, 5 characters (.c-card-8__text)
card-8-title: heading, 27 characters (.c-card-8__title)
card-8-body: label text, 272 characters (.c-card-8__body)
card-8-list: inner grid (.c-card-8__list)
card-8-item: label text, 59 characters (.c-card-8__item, 3 instances)
card-8-group-2: inner block (.c-card-8__group-2)
card-8-group-3: inner flex row (.c-card-8__group-3)
card-8-group-4: inner group (.c-card-8__group-4, 3 instances)
card-8-text-2: label text, 10 characters (.c-card-8__text-2)
card-8-group-5: inner block (.c-card-8__group-5)
card-8-group-6: inner block (.c-card-8__group-6), content not captured

Recipe

HTML · CSS

<div class="c-card-8-scope">
  <section class="c-card-8">
    <div class="c-card-8__group">
      <span class="c-card-8__text">lorem</span>
      <h2 class="c-card-8__title">lorem ipsum dolor sit amet</h2>
      <p class="c-card-8__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur ad</p>
      <ul class="c-card-8__list">
        <li class="c-card-8__item">lorem ipsum dolor sit amet consectetur adipiscing elit sed</li>
        <li class="c-card-8__item">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet co</li>
        <li class="c-card-8__item">lorem ipsum dolor sit amet consectetur adipiscing elit</li>
      </ul>
    </div>
    <div class="c-card-8__group-2">
      <div class="c-card-8__group-3">
        <span class="c-card-8__group-4"></span>
        <span class="c-card-8__group-4"></span>
        <span class="c-card-8__group-4"></span>
        <span class="c-card-8__text-2">lorem ipsu</span>
      </div>
      <div class="c-card-8__group-5">
        <div class="c-card-8__group-6"></div>
      </div>
    </div>
  </section>
</div>

.c-card-8-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card-8 {
  display: inline-grid;
  align-items: center;
  gap: 75.2px;
  grid-template-columns: minmax(0px, 5fr) minmax(0px, 6fr);
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card-8__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
}

.c-card-8__text {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 17.05px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.c-card-8__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 39.9px;
  letter-spacing: -1.14px;
}

.c-card-8__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #A1A1A1;
  line-height: 27.2px;
}

.c-card-8__list {
  display: grid;
  gap: 6.4px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  color: #A1A1A1;
  font-size: 14.4px;
  line-height: 21.6px;
  list-style-type: none;
}

.c-card-8__item {
  display: list-item;
  box-sizing: border-box;
  position: relative;
  padding-left: 17.6px;
}

.c-card-8__group-2 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #171717;
  border: 1px solid #FFFFFF1A;
  border-radius: 11.2px;
  box-shadow: #00000066 0px 18px 40px -28px;
  text-align: left;
}

.c-card-8__group-3 {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 9.6px 14.4px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FFFFFF1A;
}

.c-card-8__group-4 {
  display: block;
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  background-color: #FFFFFF1A;
  border-radius: 50%;
}

.c-card-8__text-2 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 11px;
  line-height: 17.05px;
  letter-spacing: 0.44px;
  margin-left: 8px;
}

.c-card-8__group-5 {
  display: block;
  box-sizing: border-box;
  padding: 24px;
}

.c-card-8__group-6 {
  box-sizing: border-box;
}

.c-card-8:hover {
  transform-origin: 616px 170.047px;
}

.c-card-8:focus {
  transform-origin: 616px 170.047px;
}

States

hover: transform-origin 616px 170.047px
focus: transform-origin 616px 170.047px

Card (9)

Verification: verified against the live page at desktop.

Anatomy

card-9: the component root, a <a> (.c-card-9)
card-9-text: label text, 15 characters (.c-card-9__text)
card-9-text-2: label text, 20 characters (.c-card-9__text-2)
card-9-text-3: label text, 51 characters (.c-card-9__text-3)

Recipe

HTML · CSS

<div class="c-card-9-scope">
  <a class="c-card-9" href="#">
    <span class="c-card-9__text">lorem ipsum dol</span>
    <span class="c-card-9__text-2">lorem ipsum dolor si</span>
    <span class="c-card-9__text-3">lorem ipsum dolor sit amet consectetur adipiscing e</span>
  </a>
</div>

.c-card-9-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card-9 {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 24px;
  background-color: #171717;
  color: #FAFAFA;
  border: 1px solid #FFFFFF1A;
  border-radius: 11.2px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  text-decoration-line: none;
  text-align: left;
  transition-duration: 0.15s, 0.25s;
  transition-timing-function: ease, cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: border-color, transform;
}

.c-card-9__text {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 4.2px;
  box-sizing: border-box;
  padding: 6.4px 14.4px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-image: linear-gradient(90deg, #1F4DD6, #2F844A);
  color: #FFFFFF;
  border-radius: 9999px;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 18.6px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.c-card-9__text::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 151px;
  height: 31px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: 9999px;
  opacity: 0.12;
}

.c-card-9__text-2 {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 19.2px;
  font-weight: 600;
  line-height: 20.16px;
  letter-spacing: -0.576px;
}

.c-card-9__text-3 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 14.08px;
  line-height: 21.12px;
}

.c-card-9:hover {
  border: 1px solid #A1A1A1;
  transform: matrix(1, 0, 0, 1, 0, -2);
}

States

hover: border 1px solid #A1A1A1, transform matrix(1, 0, 0, 1, 0, -2)

Card (10)

Verification: verified against the live page at desktop.

Anatomy

card-10: the component root, a <a> (.c-card-10)
card-10-group: inner flex row (.c-card-10__group)
card-10-icon: icon placeholder, 20px (.c-card-10__icon)
card-10-text: label text, 7 characters (.c-card-10__text)
card-10-text-2: label text, 11 characters (.c-card-10__text-2)
card-10-text-3: label text, 0 characters (.c-card-10__text-3)
card-10-text-4: label text, 112 characters (.c-card-10__text-4, 5 instances)
card-10-text-5: label text, 0 characters (.c-card-10__text-5)

Recipe

HTML · CSS

<div class="c-card-10-scope">
  <a class="c-card-10" href="#">
    <span class="c-card-10__group">
      <span class="c-card-10__icon" aria-hidden="true"></span>
    </span>
    <span class="c-card-10__text">lorem i</span>
    <span class="c-card-10__text-2">lorem ipsum</span>
    <span class="c-card-10__text-3">
      <span class="c-card-10__text-4">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consecte</span>
      <span class="c-card-10__text-4">l</span>
    </span>
    <span class="c-card-10__text-5">
      <span class="c-card-10__text-4">lorem i</span>
      <span class="c-card-10__text-4">lorem ipsum</span>
      <span class="c-card-10__text-4">l</span>
    </span>
  </a>
</div>

.c-card-10-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-card-10 {
  display: inline-flex;
  flex-direction: column;
  flex-basis: 360px;
  gap: 12px;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: min(280px, 100%);
  padding: 45.6px 24px;
  background-color: #171717;
  color: #FAFAFA;
  border: 1px solid #FFFFFF1A;
  border-radius: 11.2px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  text-decoration-line: none;
  text-align: left;
  transition-duration: 0.15s, 0.25s;
  transition-timing-function: ease, cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: border-color, transform;
}

.c-card-10__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  background-color: #0A0A0A;
  border: 1px solid #FFFFFF1A;
  border-radius: 8px;
}

.c-card-10__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-card-10__text {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 17.05px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
}

.c-card-10__text-2 {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 22.4px;
  font-weight: 600;
  line-height: 25.76px;
  letter-spacing: -0.448px;
}

.c-card-10__text-3 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 15.2px;
  line-height: 24.32px;
}

.c-card-10__text-5 {
  display: block;
  box-sizing: border-box;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 22.32px;
  margin-top: auto;
}

.c-card-10:hover {
  border: 1px solid #A1A1A1;
  transform: matrix(1, 0, 0, 1, 0, -2);
}

States

hover: border 1px solid #A1A1A1, transform matrix(1, 0, 0, 1, 0, -2)

Testimonials

Testimonial

Verification: flagged, the render came out 3 px taller than the original (instance 2) after 2 correction attempts.

Anatomy

Group: 5 instances in a 22-column grid, 16px gap; the recipe carries the values they all share
testimonial: the component root, a <article> (.c-testimonial)
testimonial-group: inner flex row (.c-testimonial__group)
testimonial-group-2: inner flex row (.c-testimonial__group-2)
testimonial-media: image placeholder, 40px (.c-testimonial__media)
testimonial-group-3: inner flex column (.c-testimonial__group-3)
testimonial-text: label text, 10 characters (.c-testimonial__text)
testimonial-text-2: label text, 10 characters (.c-testimonial__text-2)
testimonial-icon: icon placeholder, 18px (.c-testimonial__icon)
testimonial-body: label text, 253 characters (.c-testimonial__body)

Recipe

HTML · CSS

<div class="c-testimonial-scope">
  <article class="c-testimonial">
    <div class="c-testimonial__group">
      <div class="c-testimonial__group-2">
        <span class="c-testimonial__media" aria-hidden="true"></span>
        <div class="c-testimonial__group-3">
          <span class="c-testimonial__text">lorem ipsu</span>
          <span class="c-testimonial__text-2">lorem ipsu</span>
        </div>
      </div>
      <span class="c-testimonial__icon" aria-hidden="true"></span>
    </div>
    <p class="c-testimonial__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit</p>
  </article>
</div>

.c-testimonial-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-testimonial {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 336px;
  min-height: 232px;
  padding: 17.6px 17.6px 19.2px;
  position: relative;
  background-color: #0A0A0A;
  color: #FAFAFA;
  border: 1px solid #FFFFFF1A;
  border-radius: 8px;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-testimonial__group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
}

.c-testimonial__group-2 {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  gap: 12.8px;
  box-sizing: border-box;
}

.c-testimonial__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  border-radius: 50%;
}

.c-testimonial__group-3 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.c-testimonial__text {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 18px;
}

.c-testimonial__text-2 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 12px;
  line-height: 15.6px;
}

.c-testimonial__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  opacity: 0.4;
}

.c-testimonial__body {
  display: flow-root;
  box-sizing: border-box;
  margin: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #A1A1A1;
  font-size: 14.4px;
  line-height: 23.328px;
}

.c-testimonial:focus {
  transform-origin: 168px 117.375px;
}

States

focus: transform-origin 168px 117.375px

Testimonial (2)

Verification: verified against the live page at desktop.

Anatomy

testimonial-2: the component root, a <footer> (.c-testimonial-2)
testimonial-2-text: label text, 30 characters (.c-testimonial-2__text)
testimonial-2-text-2: label text, 47 characters (.c-testimonial-2__text-2)

Recipe

HTML · CSS

<div class="c-testimonial-2-scope">
  <footer class="c-testimonial-2">
    <span class="c-testimonial-2__text">lorem ipsum dolor sit amet con</span>
    <span class="c-testimonial-2__text-2">lorem ipsum dolor sit amet consectetur adipisci</span>
  </footer>
</div>

.c-testimonial-2-scope {
  background-color: #171717;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-testimonial-2 {
  display: flex;
  flex-direction: column;
  gap: 2.4px;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  text-align: center;
}

.c-testimonial-2__text {
  display: block;
  box-sizing: border-box;
  font-size: 15.2px;
  font-weight: 600;
  line-height: 23.56px;
}

.c-testimonial-2__text-2 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 13.6px;
  line-height: 21.08px;
}

States

No hover or focus change was observed.

Announcement banners

Verification: verified against the live page at desktop.

Anatomy

announcement-banner: the component root, a <a> (.c-announcement-banner), 14-character label

Recipe

HTML · CSS

<div class="c-announcement-banner-scope">
  <a class="c-announcement-banner" href="#">lorem ipsum do</a>
</div>

.c-announcement-banner-scope {
  background-color: #FFFFFF;
  color: #0A0A0A;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-announcement-banner {
  display: inline-block;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 4.8px 13.6px;
  background-color: #0A0A0A;
  color: #FFFFFF;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 12.48px;
  font-weight: 600;
  line-height: 19.344px;
  text-decoration-line: none;
  transition: opacity 0.15s ease;
}

.c-announcement-banner:hover {
  opacity: 0.85;
}

States

hover: opacity 0.85

Verification: verified against the live page at desktop.

Anatomy

announcement-banner-2: the component root, a <button> (.c-announcement-banner-2)
announcement-banner-2-icon: icon placeholder, 12px (.c-announcement-banner-2__icon)

Recipe

HTML · CSS

<div class="c-announcement-banner-2-scope">
  <button class="c-announcement-banner-2" type="button">
    <span class="c-announcement-banner-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-announcement-banner-2-scope {
  background-color: #FFFFFF;
  color: #0A0A0A;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-announcement-banner-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0px;
  position: absolute;
  top: 50%;
  right: 12px;
  background-color: transparent;
  color: #0A0A0A;
  border: 0;
  border-radius: 9999px;
  opacity: 0.6;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, -14);
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: opacity, background;
}

.c-announcement-banner-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-announcement-banner-2:hover {
  background-color: #0A0A0A14;
  opacity: 1;
}

States

hover (announcement-banner-2-hover): background-color #0A0A0A14, opacity 1

Headers

Header (landing)

Verification: desktop flagged, the render matched 93% of the original pixels, below the 96% required after 2 correction attempts; mobile flagged, the render matched 89% of the original pixels, below the 96% required after 2 correction attempts.

Variant observed on https://paperclip.ing/.

Anatomy

header-landing: the component root, a <nav> (.c-header-landing)
header-landing-inner: inner flex row (.c-header-landing__inner)
header-landing-logo: link (.c-header-landing__logo)
header-landing-logo-icon: icon placeholder, 105x22px (.c-header-landing__logo-icon)
header-landing-nav: inner flex row (.c-header-landing__nav)
header-landing-nav-item: inner flex row (.c-header-landing__nav-item, 4 instances)
header-landing-cta: the button-ghost button, 7-character label (.c-header-landing__cta, 3 instances)
header-landing-button: button, 7-character label (.c-header-landing__button)
header-landing-group: inner flex row (.c-header-landing__group)
header-landing-menu-toggle: button (.c-header-landing__menu-toggle)
header-landing-menu-toggle-icon: icon placeholder, 18px (.c-header-landing__menu-toggle-icon)
header-landing-cta-2: the button-primary-2 button, 7-character label (.c-header-landing__cta-2)

Desktop recipe

HTML · CSS

<div class="c-header-landing-scope">
  <nav class="c-header-landing">
    <div class="c-header-landing__inner">
      <a class="c-header-landing__logo" href="#">
        <span class="c-header-landing__logo-icon" aria-hidden="true"></span>
      </a>
      <ul class="c-header-landing__nav">
        <li class="c-header-landing__nav-item">
          <button class="c-header-landing__cta" type="button">lorem i</button>
        </li>
        <li class="c-header-landing__nav-item">
          <button class="c-header-landing__cta" type="button">lorem ips</button>
        </li>
        <li class="c-header-landing__nav-item">
          <button class="c-header-landing__cta" type="button">lorem ips</button>
        </li>
        <li class="c-header-landing__nav-item">
          <button class="c-header-landing__button" type="button">lorem i</button>
        </li>
      </ul>
      <div class="c-header-landing__group">
        <button class="c-header-landing__menu-toggle" type="button">
          <span class="c-header-landing__menu-toggle-icon" aria-hidden="true"></span>
        </button>
        <button class="c-header-landing__cta-2" type="button">lorem i</button>
      </div>
    </div>
  </nav>
</div>

.c-header-landing-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-header-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  z-index: 100;
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FFFFFF1A;
  transition-duration: 0.3s, 0.3s;
  transition-timing-function: ease-out, ease-out;
  transition-property: background, border-color;
}

.c-header-landing__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  height: 80px;
  max-width: 1280px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  color: #FAFAFA;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-landing__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 105px;
  height: 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__nav {
  display: flex;
  align-self: stretch;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-landing__nav-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-landing__cta {
  display: flex;
  align-items: center;
  gap: 6.4px;
  box-sizing: border-box;
  padding: 9.6px 14.4px;
  background-color: transparent;
  color: #A1A1A1;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 15.2px;
  font-weight: 450;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: color, background;
}

.c-header-landing__button {
  display: flex;
  align-items: center;
  gap: 6.4px;
  box-sizing: border-box;
  padding: 9.6px 14.4px;
  background-color: transparent;
  color: #A1A1A1;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 15.2px;
  font-weight: 450;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: color, background;
}

.c-header-landing__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  box-sizing: border-box;
  margin-left: auto;
}

.c-header-landing__menu-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: transparent;
  color: #A1A1A1;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: color, background;
}

.c-header-landing__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__cta-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 9.6px 21.6px;
  background-color: #FAFAFA;
  color: #0A0A0A;
  border: 1px solid #FAFAFA;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 15.2px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: background, color;
}

.c-header-landing__cta:hover {
  background-color: #262626;
  color: #FAFAFA;
}

.c-header-landing__cta:focus {
  background-color: #262626;
  color: #FAFAFA;
}

.c-header-landing__button:hover {
  background-color: #262626;
  color: #FAFAFA;
}

.c-header-landing__button:focus {
  background-color: #262626;
  color: #FAFAFA;
}

.c-header-landing__menu-toggle:hover {
  background-color: #262626;
  color: #FAFAFA;
}

.c-header-landing__cta-2:hover {
  background-color: #0A0A0A;
  color: #FAFAFA;
}

.c-header-landing__cta-2:focus {
  outline: 2px solid #FAFAFA;
  outline-offset: 2px;
}

Mobile anatomy

header-landing-mobile: the component root, a <nav> (.c-header-landing-mobile)
header-landing-mobile-inner: inner flex row (.c-header-landing-mobile__inner)
header-landing-mobile-logo: link (.c-header-landing-mobile__logo)
header-landing-mobile-logo-icon: icon placeholder, 95x20px (.c-header-landing-mobile__logo-icon)
header-landing-mobile-group: inner flex row (.c-header-landing-mobile__group)
header-landing-mobile-menu-toggle: button (.c-header-landing-mobile__menu-toggle)
header-landing-mobile-menu-toggle-icon: icon placeholder, 18px (.c-header-landing-mobile__menu-toggle-icon)
header-landing-mobile-cta: button, 7-character label (.c-header-landing-mobile__cta)
header-landing-mobile-menu-toggle-2: button (.c-header-landing-mobile__menu-toggle-2)
header-landing-mobile-icon: icon placeholder, 20px (.c-header-landing-mobile__icon)

Mobile recipe

HTML · CSS

<div class="c-header-landing-mobile-scope">
  <nav class="c-header-landing-mobile">
    <div class="c-header-landing-mobile__inner">
      <a class="c-header-landing-mobile__logo" href="#">
        <span class="c-header-landing-mobile__logo-icon" aria-hidden="true"></span>
      </a>
      <div class="c-header-landing-mobile__group">
        <button class="c-header-landing-mobile__menu-toggle" type="button">
          <span class="c-header-landing-mobile__menu-toggle-icon" aria-hidden="true"></span>
        </button>
        <button class="c-header-landing-mobile__cta" type="button">lorem i</button>
        <button class="c-header-landing-mobile__menu-toggle-2" type="button">
          <span class="c-header-landing-mobile__icon" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </nav>
</div>

.c-header-landing-mobile-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-header-landing-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  z-index: 100;
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FFFFFF1A;
  transition-duration: 0.3s, 0.3s;
  transition-timing-function: ease-out, ease-out;
  transition-property: background, border-color;
}

.c-header-landing-mobile__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  height: 64px;
  max-width: 1280px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing-mobile__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  color: #FAFAFA;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-landing-mobile__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 95px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-mobile__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  box-sizing: border-box;
  margin-left: auto;
}

.c-header-landing-mobile__menu-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: transparent;
  color: #A1A1A1;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: color, background;
}

.c-header-landing-mobile__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-mobile__cta {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 6.4px 13.6px;
  background-color: #FAFAFA;
  color: #0A0A0A;
  border: 1px solid #FAFAFA;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 12.8px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: background, color;
}

.c-header-landing-mobile__menu-toggle-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  padding: 0px;
  background-color: transparent;
  color: #FAFAFA;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-header-landing-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-mobile__menu-toggle:hover {
  background-color: #262626;
  color: #FAFAFA;
}

.c-header-landing-mobile__cta:hover {
  background-color: #0A0A0A;
  color: #FAFAFA;
}

.c-header-landing-mobile__cta:focus {
  outline: 2px solid #FAFAFA;
  outline-offset: 2px;
}

States

header-landing-cta hover (header-landing-cta-hover): background-color #262626, color #FAFAFA
header-landing-cta focus (header-landing-cta-focus): background-color #262626, color #FAFAFA
header-landing-button hover (header-landing-button-hover): background-color #262626, color #FAFAFA
header-landing-button focus (header-landing-button-focus): background-color #262626, color #FAFAFA
header-landing-menu-toggle hover (header-landing-menu-toggle-hover): background-color #262626, color #FAFAFA
header-landing-cta-2 hover (header-landing-cta-2-hover): background-color #0A0A0A, color #FAFAFA
header-landing-cta-2 focus: outline 2px solid #FAFAFA, outline-offset 2px
mobile, header-landing-mobile-menu-toggle hover (header-landing-mobile-menu-toggle-hover): background-color #262626, color #FAFAFA
mobile, header-landing-mobile-cta hover (header-landing-mobile-cta-hover): background-color #0A0A0A, color #FAFAFA
mobile, header-landing-mobile-cta focus: outline 2px solid #FAFAFA, outline-offset 2px

Header (inner)

Verification: desktop flagged, the render matched 95% of the original pixels, below the 96% required after 2 correction attempts; mobile flagged, the render matched 93% of the original pixels, below the 96% required after 2 correction attempts.

Variant observed on https://paperclip.ing/product/governance/.

Anatomy

header-inner: the component root, a <nav> (.c-header-inner)
header-inner-inner: inner flex row (.c-header-inner__inner)
header-inner-logo: link (.c-header-inner__logo)
header-inner-logo-icon: icon placeholder, 105x22px (.c-header-inner__logo-icon)
header-inner-nav: inner flex row (.c-header-inner__nav)
header-inner-nav-item: inner flex row (.c-header-inner__nav-item, 4 instances)
header-inner-button: button, 7-character label (.c-header-inner__button, 4 instances)
header-inner-group: inner flex row (.c-header-inner__group)
header-inner-cta: the button-ghost-2 button (.c-header-inner__cta)
header-inner-cta-icon: icon placeholder, 18px (.c-header-inner__cta-icon)
header-inner-cta-2: the button-primary-2 button, 7-character label (.c-header-inner__cta-2)

Desktop recipe

HTML · CSS

<div class="c-header-inner-scope">
  <nav class="c-header-inner">
    <div class="c-header-inner__inner">
      <a class="c-header-inner__logo" href="#">
        <span class="c-header-inner__logo-icon" aria-hidden="true"></span>
      </a>
      <ul class="c-header-inner__nav">
        <li class="c-header-inner__nav-item">
          <button class="c-header-inner__button" type="button">lorem i</button>
        </li>
        <li class="c-header-inner__nav-item">
          <button class="c-header-inner__button" type="button">lorem ips</button>
        </li>
        <li class="c-header-inner__nav-item">
          <button class="c-header-inner__button" type="button">lorem ips</button>
        </li>
        <li class="c-header-inner__nav-item">
          <button class="c-header-inner__button" type="button">lorem i</button>
        </li>
      </ul>
      <div class="c-header-inner__group">
        <button class="c-header-inner__cta" type="button">
          <span class="c-header-inner__cta-icon" aria-hidden="true"></span>
        </button>
        <button class="c-header-inner__cta-2" type="button">lorem i</button>
      </div>
    </div>
  </nav>
</div>

.c-header-inner-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-header-inner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  z-index: 100;
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FFFFFF1A;
  transition-duration: 0.3s, 0.3s;
  transition-timing-function: ease-out, ease-out;
  transition-property: background, border-color;
}

.c-header-inner__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  height: 80px;
  max-width: 1280px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  color: #FAFAFA;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-inner__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 105px;
  height: 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__nav {
  display: flex;
  align-self: stretch;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner__nav-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-inner__button {
  display: flex;
  align-items: center;
  gap: 6.4px;
  box-sizing: border-box;
  padding: 9.6px 14.4px;
  background-color: transparent;
  color: #A1A1A1;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 15.2px;
  font-weight: 450;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: color, background;
}

.c-header-inner__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  box-sizing: border-box;
  margin-left: auto;
}

.c-header-inner__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: transparent;
  color: #A1A1A1;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: color, background;
}

.c-header-inner__cta-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__cta-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 9.6px 21.6px;
  background-color: #FAFAFA;
  color: #0A0A0A;
  border: 1px solid #FAFAFA;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 15.2px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: background, color;
}

.c-header-inner__button:hover {
  background-color: #262626;
  color: #FAFAFA;
}

.c-header-inner__button:focus {
  background-color: #262626;
  color: #FAFAFA;
}

.c-header-inner__cta:hover {
  background-color: #262626;
  color: #FAFAFA;
}

.c-header-inner__cta-2:hover {
  background-color: #0A0A0A;
  color: #FAFAFA;
}

.c-header-inner__cta-2:focus {
  outline: 2px solid #FAFAFA;
  outline-offset: 2px;
}

Mobile anatomy

header-inner-mobile: the component root, a <nav> (.c-header-inner-mobile)
header-inner-mobile-inner: inner flex row (.c-header-inner-mobile__inner)
header-inner-mobile-logo: link (.c-header-inner-mobile__logo)
header-inner-mobile-logo-icon: icon placeholder, 95x20px (.c-header-inner-mobile__logo-icon)
header-inner-mobile-group: inner flex row (.c-header-inner-mobile__group)
header-inner-mobile-cta: button (.c-header-inner-mobile__cta)
header-inner-mobile-cta-icon: icon placeholder, 18px (.c-header-inner-mobile__cta-icon)
header-inner-mobile-cta-2: button, 7-character label (.c-header-inner-mobile__cta-2)
header-inner-mobile-menu-toggle: button (.c-header-inner-mobile__menu-toggle)
header-inner-mobile-menu-toggle-icon: icon placeholder, 20px (.c-header-inner-mobile__menu-toggle-icon)

Mobile recipe

HTML · CSS

<div class="c-header-inner-mobile-scope">
  <nav class="c-header-inner-mobile">
    <div class="c-header-inner-mobile__inner">
      <a class="c-header-inner-mobile__logo" href="#">
        <span class="c-header-inner-mobile__logo-icon" aria-hidden="true"></span>
      </a>
      <div class="c-header-inner-mobile__group">
        <button class="c-header-inner-mobile__cta" type="button">
          <span class="c-header-inner-mobile__cta-icon" aria-hidden="true"></span>
        </button>
        <button class="c-header-inner-mobile__cta-2" type="button">lorem i</button>
        <button class="c-header-inner-mobile__menu-toggle" type="button">
          <span class="c-header-inner-mobile__menu-toggle-icon" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </nav>
</div>

.c-header-inner-mobile-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-header-inner-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  z-index: 100;
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FFFFFF1A;
  transition-duration: 0.3s, 0.3s;
  transition-timing-function: ease-out, ease-out;
  transition-property: background, border-color;
}

.c-header-inner-mobile__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  height: 64px;
  max-width: 1280px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-mobile__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  color: #FAFAFA;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-inner-mobile__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 95px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-mobile__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  box-sizing: border-box;
  margin-left: auto;
}

.c-header-inner-mobile__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: transparent;
  color: #A1A1A1;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: color, background;
}

.c-header-inner-mobile__cta-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-mobile__cta-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 6.4px 13.6px;
  background-color: #FAFAFA;
  color: #0A0A0A;
  border: 1px solid #FAFAFA;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 12.8px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: background, color;
}

.c-header-inner-mobile__menu-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  padding: 0px;
  background-color: transparent;
  color: #FAFAFA;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-header-inner-mobile__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-mobile__cta:hover {
  background-color: #262626;
  color: #FAFAFA;
}

.c-header-inner-mobile__cta-2:hover {
  background-color: #0A0A0A;
  color: #FAFAFA;
}

.c-header-inner-mobile__cta-2:focus {
  outline: 2px solid #FAFAFA;
  outline-offset: 2px;
}

States

header-inner-button hover (header-inner-button-hover): background-color #262626, color #FAFAFA
header-inner-button focus (header-inner-button-focus): background-color #262626, color #FAFAFA
header-inner-cta hover (header-inner-cta-hover): background-color #262626, color #FAFAFA
header-inner-cta-2 hover (header-inner-cta-2-hover): background-color #0A0A0A, color #FAFAFA
header-inner-cta-2 focus: outline 2px solid #FAFAFA, outline-offset 2px
mobile, header-inner-mobile-cta hover (header-inner-mobile-cta-hover): background-color #262626, color #FAFAFA
mobile, header-inner-mobile-cta-2 hover (header-inner-mobile-cta-2-hover): background-color #0A0A0A, color #FAFAFA
mobile, header-inner-mobile-cta-2 focus: outline 2px solid #FAFAFA, outline-offset 2px

Verification: desktop verified against the live page at desktop; mobile verified against the live page at mobile.

Anatomy

footer: the component root, a <footer> (.c-footer)
footer-columns: inner grid (.c-footer__columns)
footer-column: inner flex column (.c-footer__column)
footer-text: label text, 9 characters (.c-footer__text)
footer-group: inner flex row (.c-footer__group)
footer-link: link (.c-footer__link, 4 instances)
footer-link-icon: icon placeholder, 16px (.c-footer__link-icon, 3 instances)
footer-link-icon-2: icon placeholder, 18px (.c-footer__link-icon-2)
footer-column-2: inner grid (.c-footer__column-2)
footer-group-2: inner block (.c-footer__group-2, 5 instances)
footer-heading: heading, 7 characters (.c-footer__heading, 5 instances)
footer-link-2: link, 8-character label (.c-footer__link-2, 34 instances)
footer-columns-2: inner flex row (.c-footer__columns-2)
footer-text-2: label text, 0 characters (.c-footer__text-2)
footer-text-3: label text, 1 characters (.c-footer__text-3, 3 instances)
footer-columns-3: inner flex row (.c-footer__columns-3)
footer-link-3: link, 7-character label (.c-footer__link-3, 4 instances)

Desktop recipe

HTML · CSS

<div class="c-footer-scope">
  <footer class="c-footer">
    <div class="c-footer__columns">
      <div class="c-footer__column">
        <span class="c-footer__text">lorem ips</span>
        <div class="c-footer__group">
          <a class="c-footer__link" href="#">
            <span class="c-footer__link-icon" aria-hidden="true"></span>
          </a>
          <a class="c-footer__link" href="#">
            <span class="c-footer__link-icon" aria-hidden="true"></span>
          </a>
          <a class="c-footer__link" href="#">
            <span class="c-footer__link-icon-2" aria-hidden="true"></span>
          </a>
          <a class="c-footer__link" href="#">
            <span class="c-footer__link-icon" aria-hidden="true"></span>
          </a>
        </div>
      </div>
      <div class="c-footer__column-2">
        <div class="c-footer__group-2">
          <h2 class="c-footer__heading">lorem i</h2>
          <a class="c-footer__link-2" href="#">lorem ip</a>
          <a class="c-footer__link-2" href="#">lorem ipsu</a>
          <a class="c-footer__link-2" href="#">lorem ips</a>
          <a class="c-footer__link-2" href="#">lorem ipsu</a>
          <a class="c-footer__link-2" href="#">lorem ipsu</a>
          <a class="c-footer__link-2" href="#">lorem ipsum dol</a>
          <a class="c-footer__link-2" href="#">lorem ipsum dolor si</a>
          <a class="c-footer__link-2" href="#">lorem ipsum dolor si</a>
          <a class="c-footer__link-2" href="#">lorem ipsum dolor s</a>
        </div>
        <div class="c-footer__group-2">
          <h2 class="c-footer__heading">lorem ips</h2>
          <a class="c-footer__link-2" href="#">lorem ip</a>
          <a class="c-footer__link-2" href="#">lorem ipsum</a>
          <a class="c-footer__link-2" href="#">lorem ipsum</a>
          <a class="c-footer__link-2" href="#">lorem i</a>
          <a class="c-footer__link-2" href="#">lorem ipsum dolor</a>
          <a class="c-footer__link-2" href="#">lorem ipsu</a>
          <a class="c-footer__link-2" href="#">lorem i</a>
        </div>
        <div class="c-footer__group-2">
          <h2 class="c-footer__heading">lorem ipsu</h2>
          <a class="c-footer__link-2" href="#">lorem ipsum d</a>
          <a class="c-footer__link-2" href="#">lorem ipsum</a>
          <a class="c-footer__link-2" href="#">lorem ipsum d</a>
          <a class="c-footer__link-2" href="#">lorem</a>
          <a class="c-footer__link-2" href="#">lorem ipsum</a>
          <a class="c-footer__link-2" href="#">lorem i</a>
        </div>
        <div class="c-footer__group-2">
          <h2 class="c-footer__heading">lorem ips</h2>
          <a class="c-footer__link-2" href="#">lore</a>
          <a class="c-footer__link-2" href="#">lorem ips</a>
          <a class="c-footer__link-2" href="#">lorem ipsum</a>
          <a class="c-footer__link-2" href="#">lorem ipsum</a>
          <a class="c-footer__link-2" href="#">lorem ipsum dolor</a>
          <a class="c-footer__link-2" href="#">lorem ipsum</a>
        </div>
        <div class="c-footer__group-2">
          <h2 class="c-footer__heading">lorem i</h2>
          <a class="c-footer__link-2" href="#">lorem ip</a>
          <a class="c-footer__link-2" href="#">lorem i</a>
          <a class="c-footer__link-2" href="#">lorem ip</a>
          <a class="c-footer__link-2" href="#">lorem i</a>
          <a class="c-footer__link-2" href="#">lorem ipsum dolo</a>
          <a class="c-footer__link-2" href="#">lorem i</a>
        </div>
      </div>
    </div>
    <div class="c-footer__columns-2">
      <span class="c-footer__text-2">
        <span class="c-footer__text-3">l</span>
        <span class="c-footer__text-3">lore</span>
        <span class="c-footer__text-3">lorem ipsum dolor sit amet consectetur adipisc</span>
      </span>
      <div class="c-footer__columns-3">
        <a class="c-footer__link-3" href="#">lorem i</a>
        <a class="c-footer__link-3" href="#">lorem</a>
        <a class="c-footer__link-3" href="#">lorem</a>
        <a class="c-footer__link-3" href="#">lorem</a>
      </div>
    </div>
  </footer>
</div>

.c-footer-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-footer {
  display: flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF1A;
}

.c-footer__columns {
  display: grid;
  gap: 50.4px;
  grid-template-columns: minmax(220px, 0.8fr) 5fr;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 67.5px 24px 45px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  box-sizing: border-box;
}

.c-footer__text {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -1.98px;
}

.c-footer__group {
  display: flex;
  align-items: center;
  gap: 10.4px;
  box-sizing: border-box;
}

.c-footer__link {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  color: #A1A1A1;
  border: 1px solid #FFFFFF1A;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: color, border-color;
}

.c-footer__link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer__link-icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer__column-2 {
  display: grid;
  gap: 45.6px 24px;
  grid-template-columns: repeat(5, 1fr);
  box-sizing: border-box;
}

.c-footer__group-2 {
  display: block;
  box-sizing: border-box;
}

.c-footer__heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 7.2px;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 22.32px;
  letter-spacing: 0.144px;
}

.c-footer__link-2 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  cursor: pointer;
  font-size: 14.4px;
  line-height: 22.32px;
  text-decoration-line: none;
  transition: color 0.15s ease;
  padding-top: 7.2px;
  padding-bottom: 7.2px;
}

.c-footer__columns-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 24px;
  margin-right: auto;
  margin-left: auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF1A;
}

.c-footer__text-2 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 13.6px;
  line-height: 21.08px;
}

.c-footer__columns-3 {
  display: flex;
  gap: 24px;
  box-sizing: border-box;
}

.c-footer__link-3 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  cursor: pointer;
  font-size: 14.4px;
  line-height: 22.32px;
  text-decoration-line: none;
  transition: color 0.15s ease;
}

.c-footer__link:hover {
  color: #FAFAFA;
  border: 1px solid #A1A1A1;
}

.c-footer__link-2:hover {
  color: #FAFAFA;
}

.c-footer__link-3:hover {
  color: #FAFAFA;
}

Mobile anatomy

footer-mobile: the component root, a <footer> (.c-footer-mobile)
footer-mobile-columns: inner grid (.c-footer-mobile__columns)
footer-mobile-column: inner flex column (.c-footer-mobile__column)
footer-mobile-text: label text, 9 characters (.c-footer-mobile__text)
footer-mobile-group: inner flex row (.c-footer-mobile__group)
footer-mobile-link: link (.c-footer-mobile__link, 4 instances)
footer-mobile-link-icon: icon placeholder, 16px (.c-footer-mobile__link-icon, 3 instances)
footer-mobile-link-icon-2: icon placeholder, 18px (.c-footer-mobile__link-icon-2)
footer-mobile-column-2: inner grid (.c-footer-mobile__column-2)
footer-mobile-group-2: inner block (.c-footer-mobile__group-2, 5 instances)
footer-mobile-heading: heading, 7 characters (.c-footer-mobile__heading, 5 instances)
footer-mobile-link-2: link, 8-character label (.c-footer-mobile__link-2, 34 instances)
footer-mobile-inner: inner flex column (.c-footer-mobile__inner)
footer-mobile-text-2: label text, 0 characters (.c-footer-mobile__text-2)
footer-mobile-text-3: label text, 1 characters (.c-footer-mobile__text-3, 3 instances)
footer-mobile-columns-2: inner flex row (.c-footer-mobile__columns-2)
footer-mobile-link-3: link, 7-character label (.c-footer-mobile__link-3, 4 instances)

Mobile recipe

HTML · CSS

<div class="c-footer-mobile-scope">
  <footer class="c-footer-mobile">
    <div class="c-footer-mobile__columns">
      <div class="c-footer-mobile__column">
        <span class="c-footer-mobile__text">lorem ips</span>
        <div class="c-footer-mobile__group">
          <a class="c-footer-mobile__link" href="#">
            <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
          </a>
          <a class="c-footer-mobile__link" href="#">
            <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
          </a>
          <a class="c-footer-mobile__link" href="#">
            <span class="c-footer-mobile__link-icon-2" aria-hidden="true"></span>
          </a>
          <a class="c-footer-mobile__link" href="#">
            <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
          </a>
        </div>
      </div>
      <div class="c-footer-mobile__column-2">
        <div class="c-footer-mobile__group-2">
          <h2 class="c-footer-mobile__heading">lorem i</h2>
          <a class="c-footer-mobile__link-2" href="#">lorem ip</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsu</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ips</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsu</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsu</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum dol</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum dolor si</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum dolor si</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum dolor s</a>
        </div>
        <div class="c-footer-mobile__group-2">
          <h2 class="c-footer-mobile__heading">lorem ips</h2>
          <a class="c-footer-mobile__link-2" href="#">lorem ip</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum</a>
          <a class="c-footer-mobile__link-2" href="#">lorem i</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum dolor</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsu</a>
          <a class="c-footer-mobile__link-2" href="#">lorem i</a>
        </div>
        <div class="c-footer-mobile__group-2">
          <h2 class="c-footer-mobile__heading">lorem ipsu</h2>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum d</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum d</a>
          <a class="c-footer-mobile__link-2" href="#">lorem</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum</a>
          <a class="c-footer-mobile__link-2" href="#">lorem i</a>
        </div>
        <div class="c-footer-mobile__group-2">
          <h2 class="c-footer-mobile__heading">lorem ips</h2>
          <a class="c-footer-mobile__link-2" href="#">lore</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ips</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum dolor</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum</a>
        </div>
        <div class="c-footer-mobile__group-2">
          <h2 class="c-footer-mobile__heading">lorem i</h2>
          <a class="c-footer-mobile__link-2" href="#">lorem ip</a>
          <a class="c-footer-mobile__link-2" href="#">lorem i</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ip</a>
          <a class="c-footer-mobile__link-2" href="#">lorem i</a>
          <a class="c-footer-mobile__link-2" href="#">lorem ipsum dolo</a>
          <a class="c-footer-mobile__link-2" href="#">lorem i</a>
        </div>
      </div>
    </div>
    <div class="c-footer-mobile__inner">
      <span class="c-footer-mobile__text-2">
        <span class="c-footer-mobile__text-3">l</span>
        <span class="c-footer-mobile__text-3">lore</span>
        <span class="c-footer-mobile__text-3">lorem ipsum dolor sit amet consectetur adipisc</span>
      </span>
      <div class="c-footer-mobile__columns-2">
        <a class="c-footer-mobile__link-3" href="#">lorem i</a>
        <a class="c-footer-mobile__link-3" href="#">lorem</a>
        <a class="c-footer-mobile__link-3" href="#">lorem</a>
        <a class="c-footer-mobile__link-3" href="#">lorem</a>
      </div>
    </div>
  </footer>
</div>

.c-footer-mobile-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-footer-mobile {
  display: flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF1A;
}

.c-footer-mobile__columns {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 64px 24px 42.2px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-mobile__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  box-sizing: border-box;
}

.c-footer-mobile__text {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -1.98px;
}

.c-footer-mobile__group {
  display: flex;
  align-items: center;
  gap: 10.4px;
  box-sizing: border-box;
}

.c-footer-mobile__link {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  color: #A1A1A1;
  border: 1px solid #FFFFFF1A;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: color, border-color;
}

.c-footer-mobile__link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer-mobile__link-icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer-mobile__column-2 {
  display: grid;
  gap: 32px 24px;
  grid-template-columns: repeat(2, 1fr);
  box-sizing: border-box;
}

.c-footer-mobile__group-2 {
  display: block;
  box-sizing: border-box;
}

.c-footer-mobile__heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 7.2px;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 22.32px;
  letter-spacing: 0.144px;
}

.c-footer-mobile__link-2 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  cursor: pointer;
  font-size: 14.4px;
  line-height: 22.32px;
  text-decoration-line: none;
  transition: color 0.15s ease;
  padding-top: 7.2px;
  padding-bottom: 7.2px;
}

.c-footer-mobile__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  padding: 24px;
  margin-right: auto;
  margin-left: auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF1A;
}

.c-footer-mobile__text-2 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 13.6px;
  line-height: 21.08px;
}

.c-footer-mobile__columns-2 {
  display: flex;
  gap: 24px;
  box-sizing: border-box;
}

.c-footer-mobile__link-3 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  cursor: pointer;
  font-size: 14.4px;
  line-height: 22.32px;
  text-decoration-line: none;
  transition: color 0.15s ease;
}

.c-footer-mobile__link:hover {
  color: #FAFAFA;
  border: 1px solid #A1A1A1;
}

.c-footer-mobile__link-2:hover {
  color: #FAFAFA;
}

.c-footer-mobile__link-3:hover {
  color: #FAFAFA;
}

States

footer-link hover (footer-link-hover): color #FAFAFA, border 1px solid #A1A1A1
footer-link-2 hover (footer-link-2-hover): color #FAFAFA
footer-link-3 hover (footer-link-3-hover): color #FAFAFA
mobile, footer-mobile-link hover (footer-mobile-link-hover): color #FAFAFA, border 1px solid #A1A1A1
mobile, footer-mobile-link-2 hover (footer-mobile-link-2-hover): color #FAFAFA
mobile, footer-mobile-link-3 hover (footer-mobile-link-3-hover): color #FAFAFA

Hero

Verification: verified against the live page at desktop.

Anatomy

hero: the component root, a <header> (.c-hero)
hero-text: label text, 20 characters (.c-hero__text)
hero-title: heading, 28 characters (.c-hero__title)
hero-body: label text, 202 characters (.c-hero__body)
hero-group: inner flex row (.c-hero__group)
hero-cta: link, 17-character label (.c-hero__cta)
hero-cta-2: link, 13-character label (.c-hero__cta-2)
hero-group-2: inner block (.c-hero__group-2)
hero-group-3: inner block (.c-hero__group-3)
hero-group-4: inner flex row (.c-hero__group-4)
hero-group-5: inner group (.c-hero__group-5, 3 instances)
hero-text-2: label text, 16 characters (.c-hero__text-2)
hero-group-6: inner block (.c-hero__group-6)
hero-group-7: inner flex column (.c-hero__group-7), content not captured

Recipe

HTML · CSS

<div class="c-hero-scope">
  <header class="c-hero">
    <span class="c-hero__text">lorem ipsum dolor si</span>
    <h1 class="c-hero__title">lorem ipsum dolor sit amet c</h1>
    <p class="c-hero__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscin</p>
    <div class="c-hero__group">
      <a class="c-hero__cta" href="#">lorem ipsum dolor</a>
      <a class="c-hero__cta-2" href="#">lorem ipsum d</a>
    </div>
    <div class="c-hero__group-2">
      <div class="c-hero__group-3">
        <div class="c-hero__group-4">
          <span class="c-hero__group-5"></span>
          <span class="c-hero__group-5"></span>
          <span class="c-hero__group-5"></span>
          <span class="c-hero__text-2">lorem ipsum dolo</span>
        </div>
        <div class="c-hero__group-6">
          <div class="c-hero__group-7"></div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-hero-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-hero {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 1280px;
  padding: 104.8px 24px 75.2px;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  text-align: center;
}

.c-hero__text {
  display: inline-block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 17.05px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.c-hero__title {
  display: block;
  box-sizing: border-box;
  max-width: 1000px;
  margin: 16px auto 0px;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 76px;
  font-weight: 600;
  line-height: 79.8px;
  letter-spacing: -2.28px;
}

.c-hero__body {
  display: block;
  box-sizing: border-box;
  max-width: 680px;
  margin: 24px auto 0px;
  color: #A1A1A1;
  font-size: 18.4px;
  line-height: 30.36px;
}

.c-hero__group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  margin-top: 45.6px;
}

.c-hero__cta {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10.4px 22.4px;
  background-color: #FAFAFA;
  color: #0A0A0A;
  border: 1px solid #FAFAFA;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 22.32px;
  text-decoration-line: none;
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: background, color;
}

.c-hero__cta-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10.4px 22.4px;
  color: #FAFAFA;
  border: 1px solid #FAFAFA;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 14.4px;
  font-weight: 600;
  line-height: 22.32px;
  text-decoration-line: none;
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: background, color;
}

.c-hero__group-2 {
  display: block;
  box-sizing: border-box;
  max-width: 720px;
  margin-top: 75.2px;
  margin-right: auto;
  margin-left: auto;
}

.c-hero__group-3 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #171717;
  border: 1px solid #FFFFFF1A;
  border-radius: 11.2px;
  box-shadow: #00000066 0px 18px 40px -28px;
  text-align: left;
}

.c-hero__group-4 {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 9.6px 14.4px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FFFFFF1A;
}

.c-hero__group-5 {
  display: block;
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  background-color: #FFFFFF1A;
  border-radius: 50%;
}

.c-hero__text-2 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 11px;
  line-height: 17.05px;
  letter-spacing: 0.44px;
  margin-left: 8px;
}

.c-hero__group-6 {
  display: block;
  box-sizing: border-box;
  padding: 24px;
}

.c-hero__group-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9.6px;
  box-sizing: border-box;
}

States

No hover or focus change was observed.

Nav item

Verification: flagged, the render matched 35% of the original pixels, below the 96% required on focus after 2 correction attempts.

Anatomy

nav-item: the component root, a <button> (.c-nav-item), 7-character label

Recipe

HTML · CSS

<div class="c-nav-item-scope">
  <button class="c-nav-item" type="button">lorem i</button>
</div>

.c-nav-item-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6.4px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 9.6px 14.4px;
  background-color: transparent;
  color: #A1A1A1;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 15.2px;
  font-weight: 450;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  list-style-type: none;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: color, background;
}

.c-nav-item:hover {
  background-color: #262626;
  color: #FAFAFA;
}

.c-nav-item:focus {
  background-color: #262626;
  color: #FAFAFA;
}

States

hover (nav-item-hover): background-color #262626, color #FAFAFA
focus (nav-item-focus): background-color #262626, color #FAFAFA

Announcement bars

Announcement bar

Verification: verified against the live page at desktop.

Anatomy

announcement-bar: the component root, a <a> (.c-announcement-bar), 14-character label

Recipe

HTML · CSS

<div class="c-announcement-bar-scope">
  <a class="c-announcement-bar" href="#">lorem ipsum do</a>
</div>

.c-announcement-bar-scope {
  background-color: #FFFFFF;
  color: #0A0A0A;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-announcement-bar {
  display: inline-block;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 4.8px 13.6px;
  background-color: #0A0A0A;
  color: #FFFFFF;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 12.48px;
  font-weight: 600;
  line-height: 19.344px;
  text-decoration-line: none;
  transition: opacity 0.15s ease;
}

.c-announcement-bar:hover {
  opacity: 0.85;
}

States

hover: opacity 0.85

Announcement bar (2)

Verification: verified against the live page at desktop.

Anatomy

announcement-bar-2: the component root, a <button> (.c-announcement-bar-2)
announcement-bar-2-icon: icon placeholder, 12px (.c-announcement-bar-2__icon)

Recipe

HTML · CSS

<div class="c-announcement-bar-2-scope">
  <button class="c-announcement-bar-2" type="button">
    <span class="c-announcement-bar-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-announcement-bar-2-scope {
  background-color: #FFFFFF;
  color: #0A0A0A;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-announcement-bar-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0px;
  position: absolute;
  top: 50%;
  right: 12px;
  background-color: transparent;
  color: #0A0A0A;
  border: 0;
  border-radius: 9999px;
  opacity: 0.6;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, -14);
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition-duration: 0.15s, 0.15s;
  transition-timing-function: ease, ease;
  transition-property: opacity, background;
}

.c-announcement-bar-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-announcement-bar-2:hover {
  background-color: #0A0A0A14;
  opacity: 1;
}

States

hover (announcement-bar-2-hover): background-color #0A0A0A14, opacity 1

Input

Verification: flagged, verification timed out.

Anatomy

input: the component root, a <input> (.c-input), 21-character placeholder

Recipe

HTML · CSS

<div class="c-input-scope">
  <input class="c-input" type="search" placeholder="lorem ipsum dolor sit">
</div>

.c-input-scope {
  background-color: #0A0A0A;
  color: #A1A1A1;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20.15px;
}

.c-input {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 400px;
  height: 44px;
  padding: 10px 14px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #0A0A0A;
  color: #FAFAFA;
  border: 1px solid #FFFFFF1A;
  border-radius: 8px;
  cursor: text;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20.15px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
}

.c-input:hover {
  min-width: 0px;
  min-height: 0px;
}

.c-input:focus {
  min-width: 0px;
  min-height: 0px;
  outline: 3px solid #2563EB;
  outline-offset: 3px;
}

States

hover: min-width 0px, min-height 0px
focus: min-width 0px, min-height 0px, outline 3px solid #2563EB, outline-offset 3px

Category filters

Verification: verified against the live page at desktop.

Anatomy

category-filter-active: the component root, a <a> (.c-category-filter-active), 3-character label

Recipe

HTML · CSS

<div class="c-category-filter-active-scope">
  <a class="c-category-filter-active" href="#">lor</a>
</div>

.c-category-filter-active-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-category-filter-active {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10px 14px;
  background-color: #171717;
  color: #FAFAFA;
  border: 1px solid #A1A1A1;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20.15px;
  text-decoration-line: none;
}

.c-category-filter-active:focus {
  outline: 3px solid #2563EB;
  outline-offset: 3px;
}

States

focus: outline 3px solid #2563EB, outline-offset 3px

Verification: flagged, the render matched 93% of the original pixels, below the 96% required on focus after 2 correction attempts.

Anatomy

category-filter: the component root, a <a> (.c-category-filter), 2-character label

Recipe

HTML · CSS

<div class="c-category-filter-scope">
  <a class="c-category-filter" href="#">lo</a>
</div>

.c-category-filter-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-category-filter {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 10px 14px;
  color: #A1A1A1;
  border: 1px solid #FFFFFF1A;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20.15px;
  text-decoration-line: none;
}

.c-category-filter:focus {
  outline: 3px solid #2563EB;
  outline-offset: 3px;
}

States

focus: outline 3px solid #2563EB, outline-offset 3px

Agent persona card

Verification: flagged, the agent-persona-card-media-2 x did not reproduce the measured 49px after 2 correction attempts.

Anatomy

Group: 3 instances in a 1-column grid; the recipe carries the values they all share
agent-persona-card: the component root, a <div> (.c-agent-persona-card)
agent-persona-card-group: inner block (.c-agent-persona-card__group)
agent-persona-card-media: image placeholder, 132px (.c-agent-persona-card__media)
agent-persona-card-body: label text, 8 characters (.c-agent-persona-card__body)
agent-persona-card-group-2: inner grid (.c-agent-persona-card__group-2)
agent-persona-card-group-3: inner grid (.c-agent-persona-card__group-3, 6 instances)
agent-persona-card-media-2: image placeholder, 34px (.c-agent-persona-card__media-2, 6 instances)

Recipe

HTML · CSS

<div class="c-agent-persona-card-scope">
  <div class="c-agent-persona-card">
    <div class="c-agent-persona-card__group">
      <span class="c-agent-persona-card__media" aria-hidden="true"></span>
    </div>
    <p class="c-agent-persona-card__body">lorem ip</p>
    <div class="c-agent-persona-card__group-2">
      <div class="c-agent-persona-card__group-3">
        <span class="c-agent-persona-card__media-2" aria-hidden="true"></span>
      </div>
      <div class="c-agent-persona-card__group-3">
        <span class="c-agent-persona-card__media-2" aria-hidden="true"></span>
      </div>
      <div class="c-agent-persona-card__group-3">
        <span class="c-agent-persona-card__media-2" aria-hidden="true"></span>
      </div>
      <div class="c-agent-persona-card__group-3">
        <span class="c-agent-persona-card__media-2" aria-hidden="true"></span>
      </div>
      <div class="c-agent-persona-card__group-3">
        <span class="c-agent-persona-card__media-2" aria-hidden="true"></span>
      </div>
      <div class="c-agent-persona-card__group-3">
        <span class="c-agent-persona-card__media-2" aria-hidden="true"></span>
      </div>
    </div>
  </div>
</div>

.c-agent-persona-card-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-agent-persona-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-agent-persona-card__group {
  display: block;
  box-sizing: border-box;
  width: 132px;
  height: 132px;
  position: relative;
}

.c-agent-persona-card__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 132px;
  height: 132px;
  aspect-ratio: auto 264 / 264;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-agent-persona-card__body {
  display: block;
  box-sizing: border-box;
  height: 28px;
  margin: 0px;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
}

.c-agent-persona-card__group-2 {
  display: grid;
  gap: 8px;
  box-sizing: border-box;
}

.c-agent-persona-card__group-3 {
  display: grid;
  align-items: center;
  box-sizing: border-box;
  width: 58px;
  height: 58px;
  background-color: #FAFAFA;
  border-radius: 22%;
}

.c-agent-persona-card__media-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  max-width: 100%;
  aspect-ratio: auto 34 / 34;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Announcement link

Verification: verified against the live page at desktop.

Anatomy

announcement-link: the component root, a <a> (.c-announcement-link), 14-character label

Recipe

HTML · CSS

<div class="c-announcement-link-scope">
  <a class="c-announcement-link" href="#">lorem ipsum do</a>
</div>

.c-announcement-link-scope {
  background-color: #FFFFFF;
  color: #0A0A0A;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-announcement-link {
  display: inline-block;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 4.8px 13.6px;
  background-color: #0A0A0A;
  color: #FFFFFF;
  border-radius: 9999px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 12.48px;
  font-weight: 600;
  line-height: 19.344px;
  text-decoration-line: none;
  transition: opacity 0.15s ease;
}

.c-announcement-link:hover {
  opacity: 0.85;
}

States

hover: opacity 0.85

Feature section

Verification: flagged, the render came out 27 px taller than the original (instance 2) after 2 correction attempts.

Anatomy

Group: 4 instances in a 1-column grid, 102.8px gap; the recipe carries the values they all share
feature-section: the component root, a <section> (.c-feature-section)
feature-section-group: inner flex column (.c-feature-section__group)
feature-section-text: label text, 23 characters (.c-feature-section__text)
feature-section-title: heading, 20 characters (.c-feature-section__title)
feature-section-body: inner group (.c-feature-section__body)
feature-section-text-2: label text, 51 characters (.c-feature-section__text-2)
feature-section-text-3: label text, 227 characters (.c-feature-section__text-3, 5 instances)
feature-section-list: inner grid (.c-feature-section__list)
feature-section-item: label text, 31 characters (.c-feature-section__item, 4 instances)
feature-section-group-2: inner flex row (.c-feature-section__group-2)
feature-section-link: link (.c-feature-section__link, 2 instances)
feature-section-group-3: inner block (.c-feature-section__group-3)
feature-section-group-4: inner flex row (.c-feature-section__group-4)
feature-section-group-5: inner group (.c-feature-section__group-5, 3 instances)
feature-section-text-4: label text, 21 characters (.c-feature-section__text-4)
feature-section-group-6: inner block (.c-feature-section__group-6)
feature-section-group-7: inner block (.c-feature-section__group-7), content not captured

Recipe

HTML · CSS

<div class="c-feature-section-scope">
  <section class="c-feature-section">
    <div class="c-feature-section__group">
      <span class="c-feature-section__text">lorem ipsum dolor sit a</span>
      <h2 class="c-feature-section__title">lorem ipsum dolor si</h2>
      <p class="c-feature-section__body">
        <strong class="c-feature-section__text-2">lorem ipsum dolor sit amet consectetur adipiscing e</strong>
        <span class="c-feature-section__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tem</span>
      </p>
      <ul class="c-feature-section__list">
        <li class="c-feature-section__item">lorem ipsum dolor sit amet cons</li>
        <li class="c-feature-section__item">lorem ipsum dolor sit ame</li>
        <li class="c-feature-section__item">lorem ipsum dolor sit amet con</li>
        <li class="c-feature-section__item">lorem ipsum dolor sit amet consectetur</li>
      </ul>
      <div class="c-feature-section__group-2">
        <a class="c-feature-section__link" href="#">
          <span class="c-feature-section__text-3">lorem ipsum dolor si</span>
          <span class="c-feature-section__text-3">l</span>
        </a>
        <a class="c-feature-section__link" href="#">
          <span class="c-feature-section__text-3">lorem ipsu</span>
          <span class="c-feature-section__text-3">l</span>
        </a>
      </div>
    </div>
    <div class="c-feature-section__group-3">
      <div class="c-feature-section__group-4">
        <span class="c-feature-section__group-5"></span>
        <span class="c-feature-section__group-5"></span>
        <span class="c-feature-section__group-5"></span>
        <span class="c-feature-section__text-4">lorem ipsum dolor sit</span>
      </div>
      <div class="c-feature-section__group-6">
        <div class="c-feature-section__group-7"></div>
      </div>
    </div>
  </section>
</div>

.c-feature-section-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-feature-section {
  display: inline-grid;
  align-items: center;
  gap: 75.2px;
  grid-template-columns: minmax(0px, 5fr) minmax(0px, 6fr);
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-feature-section__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
}

.c-feature-section__text {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 17.05px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.c-feature-section__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 39.9px;
  letter-spacing: -1.14px;
}

.c-feature-section__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #A1A1A1;
  line-height: 27.2px;
}

.c-feature-section__text-2 {
  display: inline;
  box-sizing: border-box;
  font-weight: 700;
}

.c-feature-section__list {
  display: grid;
  gap: 6.4px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  color: #A1A1A1;
  font-size: 14.4px;
  line-height: 21.6px;
  list-style-type: none;
}

.c-feature-section__item {
  display: list-item;
  box-sizing: border-box;
  position: relative;
  padding-left: 17.6px;
}

.c-feature-section__group-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  box-sizing: border-box;
}

.c-feature-section__link {
  display: block;
  box-sizing: border-box;
  color: #FAFAFA;
  cursor: pointer;
  font-size: 15.2px;
  font-weight: 600;
  line-height: 23.56px;
  text-decoration-line: none;
}

.c-feature-section__group-3 {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #171717;
  border: 1px solid #FFFFFF1A;
  border-radius: 11.2px;
  box-shadow: #00000066 0px 18px 40px -28px;
  text-align: left;
}

.c-feature-section__group-4 {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 9.6px 14.4px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #FFFFFF1A;
}

.c-feature-section__group-5 {
  display: block;
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  background-color: #FFFFFF1A;
  border-radius: 50%;
}

.c-feature-section__text-4 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 11px;
  line-height: 17.05px;
  letter-spacing: 0.44px;
  margin-left: 8px;
}

.c-feature-section__group-6 {
  display: block;
  box-sizing: border-box;
  padding: 24px;
}

.c-feature-section__group-7 {
  box-sizing: border-box;
}

.c-feature-section:hover {
  transform-origin: 616px 193.023px;
}

.c-feature-section:focus {
  transform-origin: 616px 193.023px;
}

States

hover: transform-origin 616px 193.023px
focus: transform-origin 616px 193.023px

Product area cards

Product area card

Verification: verified against the live page at desktop.

Anatomy

product-area-card: the component root, a <a> (.c-product-area-card)
product-area-card-text: label text, 8 characters (.c-product-area-card__text)
product-area-card-text-2: label text, 20 characters (.c-product-area-card__text-2)
product-area-card-text-3: label text, 54 characters (.c-product-area-card__text-3)

Recipe

HTML · CSS

<div class="c-product-area-card-scope">
  <a class="c-product-area-card" href="#">
    <span class="c-product-area-card__text">lorem ip</span>
    <span class="c-product-area-card__text-2">lorem ipsum dolor si</span>
    <span class="c-product-area-card__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit</span>
  </a>
</div>

.c-product-area-card-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-product-area-card {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 24px;
  background-color: #171717;
  color: #FAFAFA;
  border: 1px solid #FFFFFF1A;
  border-radius: 11.2px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  text-decoration-line: none;
  text-align: left;
  transition-duration: 0.15s, 0.25s;
  transition-timing-function: ease, cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: border-color, transform;
}

.c-product-area-card__text {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 4.2px;
  box-sizing: border-box;
  padding: 6.4px 14.4px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-image: linear-gradient(90deg, #C94E38, #1F4ED4);
  color: #FFFFFF;
  border-radius: 9999px;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 18.6px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.c-product-area-card__text::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 94px;
  height: 31px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: 9999px;
  opacity: 0.12;
}

.c-product-area-card__text-2 {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 19.2px;
  font-weight: 600;
  line-height: 20.16px;
  letter-spacing: -0.576px;
}

.c-product-area-card__text-3 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 14.08px;
  line-height: 21.12px;
}

.c-product-area-card:hover {
  border: 1px solid #A1A1A1;
  transform: matrix(1, 0, 0, 1, 0, -2);
}

States

hover: border 1px solid #A1A1A1, transform matrix(1, 0, 0, 1, 0, -2)

Product area card (2)

Verification: verified against the live page at desktop.

Anatomy

product-area-card-2: the component root, a <a> (.c-product-area-card-2)
product-area-card-2-text: label text, 8 characters (.c-product-area-card-2__text)
product-area-card-2-text-2: label text, 23 characters (.c-product-area-card-2__text-2)
product-area-card-2-text-3: label text, 43 characters (.c-product-area-card-2__text-3)

Recipe

HTML · CSS

<div class="c-product-area-card-2-scope">
  <a class="c-product-area-card-2" href="#">
    <span class="c-product-area-card-2__text">lorem ip</span>
    <span class="c-product-area-card-2__text-2">lorem ipsum dolor sit a</span>
    <span class="c-product-area-card-2__text-3">lorem ipsum dolor sit amet consectetur adip</span>
  </a>
</div>

.c-product-area-card-2-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-product-area-card-2 {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 24px;
  background-color: #171717;
  color: #FAFAFA;
  border: 1px solid #FFFFFF1A;
  border-radius: 11.2px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  text-decoration-line: none;
  text-align: left;
  transition-duration: 0.15s, 0.25s;
  transition-timing-function: ease, cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: border-color, transform;
}

.c-product-area-card-2__text {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 4.2px;
  box-sizing: border-box;
  padding: 6.4px 14.4px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-image: linear-gradient(90deg, #F2D95F, #4FBCBA);
  color: #1A3A38;
  border-radius: 9999px;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 18.6px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.c-product-area-card-2__text::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 94px;
  height: 31px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: 9999px;
  opacity: 0.12;
}

.c-product-area-card-2__text-2 {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 19.2px;
  font-weight: 600;
  line-height: 20.16px;
  letter-spacing: -0.576px;
}

.c-product-area-card-2__text-3 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 14.08px;
  line-height: 21.12px;
}

.c-product-area-card-2:hover {
  border: 1px solid #A1A1A1;
  transform: matrix(1, 0, 0, 1, 0, -2);
}

States

hover: border 1px solid #A1A1A1, transform matrix(1, 0, 0, 1, 0, -2)

Product area card (3)

Verification: verified against the live page at desktop.

Anatomy

product-area-card-3: the component root, a <a> (.c-product-area-card-3)
product-area-card-3-text: label text, 13 characters (.c-product-area-card-3__text)
product-area-card-3-text-2: label text, 10 characters (.c-product-area-card-3__text-2)
product-area-card-3-text-3: label text, 43 characters (.c-product-area-card-3__text-3)

Recipe

HTML · CSS

<div class="c-product-area-card-3-scope">
  <a class="c-product-area-card-3" href="#">
    <span class="c-product-area-card-3__text">lorem ipsum d</span>
    <span class="c-product-area-card-3__text-2">lorem ipsu</span>
    <span class="c-product-area-card-3__text-3">lorem ipsum dolor sit amet consectetur adip</span>
  </a>
</div>

.c-product-area-card-3-scope {
  background-color: #0A0A0A;
  color: #FAFAFA;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
}

.c-product-area-card-3 {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 24px;
  background-color: #171717;
  color: #FAFAFA;
  border: 1px solid #FFFFFF1A;
  border-radius: 11.2px;
  cursor: pointer;
  font-family: Inter, sans-serif, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24.8px;
  text-decoration-line: none;
  text-align: left;
  transition-duration: 0.15s, 0.25s;
  transition-timing-function: ease, cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-property: border-color, transform;
}

.c-product-area-card-3__text {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 4.2px;
  box-sizing: border-box;
  padding: 6.4px 14.4px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-image: linear-gradient(90deg, #6B6BC7, #5E3450);
  color: #FFFFFF;
  border-radius: 9999px;
  font-family: "JetBrains Mono", monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 18.6px;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.c-product-area-card-3__text::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 135px;
  height: 31px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: 9999px;
  opacity: 0.12;
}

.c-product-area-card-3__text-2 {
  display: block;
  box-sizing: border-box;
  font-family: "Inter Tight", sans-serif, sans-serif;
  font-size: 19.2px;
  font-weight: 600;
  line-height: 20.16px;
  letter-spacing: -0.576px;
}

.c-product-area-card-3__text-3 {
  display: block;
  box-sizing: border-box;
  color: #A1A1A1;
  font-size: 14.08px;
  line-height: 21.12px;
}

.c-product-area-card-3:hover {
  border: 1px solid #A1A1A1;
  transform: matrix(1, 0, 0, 1, 0, -2);
}

States

hover: border 1px solid #A1A1A1, transform matrix(1, 0, 0, 1, 0, -2)

Do's and Don'ts

Do

Use Signal White (primary, #FFFFFF) as the fill only for the main CTA (button-primary). It marks the primary action and appears on no other measured component.
Give every button rounded.full. All measured buttons are pills: button-primary, button-primary-3, button-secondary, button-ghost-2, button-primary-4.
Keep control heights on the observed ladder:
- button-primary: 51px (hero);
- button-primary-3, button-secondary, button-primary-4: 45px;
- button-ghost-2, button-primary-2: 40px.
Invert pill CTAs on hover: button-primary-3 and button-primary-4 go from a #FAFAFA fill to transparent with #FAFAFA text, keeping the 1px #FAFAFA border.
Outline every container in a 1px #FFFFFF1A hairline, and brighten it to #A1A1A1 on hover (card-9, product-area-card).
Space sections with section-padding-y (50px) and keep all internal spacing on the base 4px step.
Pair an Inter Tight 600 title with muted (#A1A1A1) Inter body and a JetBrains Mono eyebrow (mono-label) in every card and section header.
Use surface-card (#262626) as the hover and focus fill for ghost controls (button-ghost-2, nav-item).

Don't

Don't introduce radii outside rounded.sm (8px), rounded.md (11.2px), rounded.lg (12px) and rounded.full.
Don't describe or rebuild the system as flat. Mock windows carry #00000066 0px 18px 40px -28px. Don't spread that shadow to ordinary cards either.
Don't use success, warning, error or accent-blue as large surface fills. They are status text and focus signals.
Don't drop the negative tracking on Inter Tight display (hero-display at -2.28px). Untracked display text loses the brand voice.
Don't track Inter body text. Positive letter-spacing belongs only to the mono tokens (mono-label at 1.1px).
Don't introduce a brand hue or gradient fills on buttons. Action color is white on canvas.
Don't use weight 700. The ladder stops at 600.
Don't lighten canvas (#0A0A0A) for sections. Separate sections with hairlines and the #171717 card step.

Responsive Behavior

This analysis is two-viewport (desktop and mobile). No intermediate breakpoints were captured, so breakpoint pixel values are unknown.

What changes on mobile

Header. It compresses from 81px (header-landing) to 65px (header-landing-mobile). The logo shrinks from 105×22px to 95×20px. Text nav links collapse into a hamburger (header-landing-mobile-menu-toggle-2, 34px, rounded.sm). The white pill CTA stays visible with a smaller 12.8px label (header-landing-mobile-cta). header-landing-mobile is flagged (flagged: the render matched 89% of the original pixels, below the 96% required after 2 correction attempts).
Footer. The multi-column footer stacks into a single column. Height grows from 545px (footer) to 1304px (footer-mobile). Column gaps tighten to 28px (footer-mobile-column-gap).
Content. Per the screenshots, the content changes as follows:
- two-column feature splits stack text above the mock window;
- the three-up process strip becomes stacked step cards;
- card grids collapse to one column;
- testimonials become a swipeable carousel.
Type. Display headlines shrink visually on mobile, but no separate mobile type tokens were measured.

Touch targets

Footer social links: 44px circles (footer-mobile-link). This meets the 44px guideline.
Icon buttons: 40px (header-inner-mobile-cta, button-ghost-2).
Mobile menu toggle: 34px (header-landing-mobile-menu-toggle-2). This is below 44px; pad its hit area if you rebuild it.

Iteration Guide

Reference tokens, never raw hex. Use canvas, ink, muted and primary for color. Use rounded.sm, rounded.md, rounded.lg and rounded.full for radii. Use section-padding-y and base for spacing. The only untokenized values you may reuse are the measured recipe values: the #171717 card fill, the #FFFFFF1A hairline and the #A1A1A1 hover border.
Keep the monochrome boundary. New features get white, gray and charcoal. Status colors (success, warning, error) are for state only. accent-blue is for links and focus only.
Respect the three-family split. Use Inter Tight 600 with negative tracking for headings, Inter for anything read or clicked, and JetBrains Mono at 10–12px with positive tracking for labels. Never set body copy in mono or display in Inter.
Build buttons from the pill variants.
- White primary for the main action (button-primary, or button-primary-3 at 45px).
- Outlined secondary (button-secondary, 1px #FAFAFA border, #171717 hover).
- Transparent ghost with surface-card hover (button-ghost-2).
- Do not add a fourth fill style.
Build cards from the recipes. Use a #171717 fill with rounded.md, a 1px #FFFFFF1A border that turns #A1A1A1 on hover, and a 24px internal padding (as on card-9). Stack a mono eyebrow, an Inter Tight title, muted body and a body-sm-strong link line.
Reserve the shadow. #00000066 0px 18px 40px -28px belongs only on product mock windows. Everything else gets its elevation from hairlines and the tonal step.
Treat flagged recipes as approximations. Check against the screenshots before treating them as exact. These include:
- card (flagged: the render came out 3 px taller than the original (instance 2) after 2 correction attempts);
- input (flagged: verification timed out);
- card-5 (flagged: verification timed out);
- button-ghost (flagged: the render matched 35% of the original pixels, below the 97% required on focus after 2 correction attempts).

Known Gaps

Viewports. Only desktop and mobile were captured, so tablet behavior and exact breakpoint values are unknown.
Unreproduced recipes. Several did not reproduce exactly:
- header-landing (flagged: the render matched 93% of the original pixels, below the 96% required after 2 correction attempts);
- header-inner (flagged: the render matched 95% of the original pixels, below the 96% required after 2 correction attempts);
- card-2 (flagged: the render matched 94% of the original pixels, below the 96% required (instance 1) after 2 correction attempts);
- card-8 (flagged: the render came out 48 px taller than the original (instance 2) after 2 correction attempts);
- feature-section (flagged: the render came out 27 px taller than the original (instance 2) after 2 correction attempts);
- agent-persona-card (flagged: the agent-persona-card-media-2 x did not reproduce the measured 49px after 2 correction attempts);
- nav-item (flagged: the render matched 35% of the original pixels, below the 96% required on focus after 2 correction attempts);
- category-filter (flagged: the render matched 93% of the original pixels, below the 96% required on focus after 2 correction attempts).
Timed-out verifications. input and card-5 (flagged: verification timed out) were never compared against the original render.
Gradients. The gradient tag pills visible in the screenshots were not measured; no gradient stops or angles are known.
Lazy-loaded content. Several large blocks rendered as empty dark placeholders (likely lazy-loaded media or animation). Mock-window internals such as hero-group-7 and card-8-group-6 were not captured.
Motion. Animation and transitions (the testimonial marquee speed, hover easing and durations) could not be measured.
Unclear token roles. tint-navy, muted-warm and focus-ring (#005FCC) appear at very low weight; their exact roles are uncertain.
Uncovered states. Active and pressed states, disabled states, form validation and error styling, and the open state of the mobile menu were not captured.
Coverage. The five product and marketing pages captured successfully. No auth-walled app surfaces were reached, so the in-product UI may differ.

File DESIGN.md ini berbahasa Inggris, bahasa yang dibaca oleh agen coding AI.

Diekstrak dari website publik Paperclip, bukan pedoman brand resmi. Cek font situs lain

Serupa dengan ini

Lihat semua

AI & Machine Learning · AI Products & Assistants

Anthropic

Sistem desain Anthropic adalah identitas yang sederhana dan berpusat pada tipografi, dibangun di atas dua tipografi kustom, Anthropic Serif dan Anthropic Sans, dengan latar krem hangat (#faf9f5). Palet warnanya sangat minimalis: hitam pekat (#141413) di atas putih gading hangat, dengan nuansa batu yang redup untuk teks sekunder dan garis tepi. Tipografi display serif berukuran besar menjadi jangkar suara editorialnya, sementara panel gelap (latar hitam pekat dengan teks gading) menghadirkan kontras yang dramatis. Secara keseluruhan, estetikanya menyampaikan keseriusan intelektual dan misi yang mengutamakan keselamatan, melalui ruang kosong yang lapang, kontras tipografi yang tinggi, dan tanpa ornamen dekoratif sama sekali.

AI & Machine Learning · AI Products & Assistants

Harvey

Sistem desain Harvey dibangun di sekitar identitas dua tipografi khusus: HarveySerifFont untuk kesan editorial yang berwibawa dan HarveySansFont untuk kejelasan fungsional. Keduanya ditempatkan pada bilah navigasi hitam hangat yang nyaris pekat (#0f0e0d) dan permukaan konten putih gading (#fafaf9). Palet warnanya sengaja monokromatik, menggunakan skala abu-abu hangat bertingkat (gray-50 hingga gray-950) tanpa warna aksen, untuk menyampaikan kepercayaan dan kesederhanaan yang sesuai dengan pekerjaan hukum berisiko tinggi. Elevasi dibentuk melalui kontras permukaan, bukan bayangan. Judul utama di halaman depan memakai serif besar berukuran 72px, sehingga langsung menghadirkan kewibawaan tipografis, sementara isi teks dan elemen UI memakai sans kustom. Spasi mengikuti grid dasar 8px dengan token skala bernama (xs, sm, md, xl, 2xl).

AI & Machine Learning · AI Products & Assistants

xAI

xAI menggunakan palet permukaan off-white yang hangat, dengan --color-ivory (#f9f8f6) dan --color-white (#ffffff) sebagai dasar, serta #0a0a0a yang hampir hitam sebagai warna teks dan latar depan yang dominan. Sistem tipografinya terbagi tiga: universalSansDisplay untuk judul display berukuran besar (60–72px) dengan letter-spacing negatif yang rapat, universalSans untuk teks isi dan UI, dan GeistMono untuk kode serta konteks terminal. Bahasa radius didominasi bentuk pill 9999px pada CTA dan tag, sementara kartu dan input memakai 12px dan 6px. Elevasinya minim: kartu memakai bayangan jatuh berlapis yang lembut, sedangkan sebagian besar permukaan dibiarkan datar. Secara keseluruhan nuansanya teknis dan premium: warna yang terkendali, ruang kosong yang lapang, dan estetika monospace kode yang kuat untuk menegaskan kredibilitas bagi pengembang.

Komunitas, Sosial & Personal · Community & Forum

Dribbble

Sistem desain Dribbble dibangun di atas navy hampir hitam yang dalam (#0d0c22) yang dipadukan dengan permukaan putih yang bersih, diselingi aksen pink-panas khas (#ea4c89) yang digunakan secukupnya untuk penekanan editorial dan sorotan interaktif. Seluruh sistem tipografinya hanya mengandalkan Mona Sans di semua ketebalan, sehingga hierarki dibentuk melalui ketebalan dan ukuran saja. Tombol berbentuk pil (border-radius: 1e+07px) dan kartu dengan sudut membulat (radius 12px) menjadi bahasa geometri utamanya. Tata letaknya lapang dengan grid dasar 8px, dan elevasi dihadirkan melalui drop shadow yang halus, bukan tumpukan lapisan yang berat.

Perjalanan, Transportasi & Logistik

Airbnb

Sistem desain Airbnb dibangun di sekitar satu font variabel milik sendiri (Airbnb Cereal VF), dengan palet netral hampir monokrom yang berpusat pada abu-abu arang tua (#222222) dan abu-abu terang. Warna coral-pink khas merek, "Rausch" (#ff385c), hanya digunakan untuk CTA utama dan logo. Tata letaknya berupa grid kartu foto yang responsif, dengan rasio gambar terhadap teks yang lega, sudut kartu membulat 20px yang lembut, serta sistem bayangan ambient berlapis banyak yang menciptakan kedalaman halus tanpa kontras yang keras. Bilah pencarian berbentuk pil yang menonjol menyatukan aksi utama pengguna.

Perdagangan & Ritel · E-commerce Store

IKEA

IKEA-Yellow (#ffdb00) berfungsi sebagai permukaan aksi utama dan IKEA Blue (#0058a3) sebagai aksen logo merek, dalam sistem desain IKEA yang tegas dan datar pada beranda globalnya. Seluruh sistem tipografi dibangun dengan satu huruf kustom, Noto IKEA, dengan bobot 400 dan 700 pada skala yang ketat, dari teks isi 14px hingga judul display 51px. Elevasi dibentuk sepenuhnya lewat kontras warna dan struktur tata letak, bukan bayangan. Tata letak memakai kontainer lebar maksimum 90rem dengan jarak grid desktop 1.5rem, serta token radius sudut 8px yang konsisten untuk elemen interaktif. Latar belakang off-white #fffefb memberi kesan hangat di samping teks #111111 yang tegas, sehingga pengalaman membaca tetap berkontras tinggi dan mudah diakses.

Design System Paperclip

Komponen

Buttons7

Cards10

Extras16

Headers6

Footers2

Input1

Overview

Colors

Brand & Action

Surface

Text

Status

Component & State Colors

Typography

Font Family

Hierarchy

Principles

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Components

Buttons

Cards

Testimonials

Announcement banners

Headers

Footer

Hero

Nav item

Announcement bars

Input

Category filters

Agent persona card

Announcement link

Feature section

Product area cards

Do's and Don'ts

Do

Don't

Responsive Behavior

What changes on mobile

Touch targets

Iteration Guide

Known Gaps

Serupa dengan ini

Anthropic

Harvey

xAI

Dribbble

Airbnb

IKEA

Situs lain yang memakai Inter