Paperclip Design System

paperclip.ing

PROEngine v4

Visual system

100% confidence

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% confidence

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% confidence

sm · 8px

md · 11.2px

lg · 12px

full · 9999px

Components

Button7

35% match

ghost · desktop

On focus, it renders 35% like the site, below the 97% bar.

At rest100% match21 measurements match

Original

Render

Hover98% match18 measurements match

Original

Render

Focus35% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match34 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match25 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Recipe in DESIGN.md

88% match

primary · desktop

It renders 96% like the site, below the 97% bar.

At rest96% match25 measurements match

Original

Render

Hover92% match22 measurements match

Original

Render

Focus88% match22 measurements match

Original

Render

Recipe in DESIGN.md

98% match

primary · desktop

At rest99% match25 measurements match

Original

Render

Hover98% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match25 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match25 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Recipe in DESIGN.md

Card10

99% match

desktop

It renders 99% like the site, below the 96% bar.

At rest100% match113 measurements match

Original Card on the site, at rest — Original

Isolated render of Card, at rest — Render

Focus100% match22 measurements match

Original Card on the site, focus — Original

At rest, instance 299% match113 measurements match

Original

No image stored

Render

No image stored

At rest, instance 399% match113 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match113 measurements match

Original

No image stored

Render

No image stored

At rest, instance 599% match113 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

99% match

desktop

At rest100% match80 measurements match

Original Card (10) on the site, at rest — Original

Isolated render of Card (10), at rest — Render

Hover99% match22 measurements match

Original Card (10) on the site, hover — Original

Isolated render of Card (10), hover — Render

Recipe in DESIGN.md

94% match

desktop

It renders 94% like the site, below the 96% bar.

At rest94% match45 measurements match

Original Card (2) on the site, at rest — Original

Isolated render of Card (2), at rest — Render

At rest, instance 294% match45 measurements match

Original

No image stored

Render

No image stored

At rest, instance 394% match45 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

99% match

desktop

At rest99% match37 measurements match

Original Card (3) on the site, at rest — Original

Isolated render of Card (3), at rest — Render

Recipe in DESIGN.md

99% match

desktop

At rest99% match37 measurements match

Original Card (4) on the site, at rest — Original

Isolated render of Card (4), at rest — Render

Recipe in DESIGN.md

Not checked

desktop

The check timed out.

Nothing was compared for this component.

Recipe in DESIGN.md

98% match

desktop

At rest99% match37 measurements match

Original Card (6) on the site, at rest — Original

Isolated render of Card (6), at rest — Render

Hover98% match22 measurements match

Original Card (6) on the site, hover — Original

Isolated render of Card (6), hover — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match26 measurements match

Original Card (7) on the site, at rest — Original

Isolated render of Card (7), at rest — Render

At rest, instance 2100% match26 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match26 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

98% match

desktop

It renders 98% like the site, below the 96% bar.

At rest99% match220 measurements match

Original Card (8) on the site, at rest — Original

Isolated render of Card (8), at rest — Render

Hover99% match18 measurements match

Original Card (8) on the site, hover — Original

Isolated render of Card (8), hover — Render

Focus99% match18 measurements match

Original Card (8) on the site, focus — Original

Isolated render of Card (8), focus — Render

At rest, instance 298% match220 measurements match

Original

No image stored

Render

No image stored

At rest, instance 399% match220 measurements match

Original

No image stored

Render

No image stored

At rest, instance 499% match220 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match32 measurements match

Original Card (9) on the site, at rest — Original

Isolated render of Card (9), at rest — Render

Hover100% match22 measurements match

Original Card (9) on the site, hover — Original

Isolated render of Card (9), hover — Render

Recipe in DESIGN.md

Extra16

100% match

desktop

Media 2 x is 37px, the site has 49px; Media 2 x is 37px, the site has 49px and 4 more.

At rest100% match6 of 286 measurements differ

Original Agent persona card on the site, at rest — Original

Isolated render of Agent persona card, at rest — Render

At rest, instance 2100% match6 of 286 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match6 of 286 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

98% match

desktop

At rest98% match21 measurements match

Original

Render

Hover98% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Recipe in DESIGN.md

98% match

desktop

At rest98% match21 measurements match

Original Announcement bar on the site, at rest — Original

Isolated render of Announcement bar, at rest — Render

Hover98% match18 measurements match

Original Announcement bar on the site, hover — Original

Isolated render of Announcement bar, hover — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Recipe in DESIGN.md

98% match

desktop

At rest98% match21 measurements match

Original Announcement link on the site, at rest — Original

Isolated render of Announcement link, at rest — Render

Hover98% match18 measurements match

Original Announcement link on the site, hover — Original

Isolated render of Announcement link, hover — Render

Recipe in DESIGN.md

93% match

desktop

On focus, it renders 93% like the site, below the 96% bar.

At rest100% match25 measurements match

Original

Render

Focus93% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match25 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

98% match

desktop

It renders 99% like the site, below the 96% bar.

At rest100% match305 measurements match

Original Feature section on the site, at rest — Original

Isolated render of Feature section, at rest — Render

Hover100% match18 measurements match

Original Feature section on the site, hover — Original

Isolated render of Feature section, hover — Render

Focus100% match18 measurements match

Original Feature section on the site, focus — Original

Isolated render of Feature section, focus — Render

At rest, instance 299% match305 measurements match

Original

No image stored

Render

No image stored

At rest, instance 399% match305 measurements match

Original

No image stored

Render

No image stored

At rest, instance 498% match305 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match287 measurements match

Original Hero on the site, at rest — Original

Isolated render of Hero, at rest — Render

Recipe in DESIGN.md

35% match

desktop

On focus, it renders 35% like the site, below the 96% bar.

At rest100% match21 measurements match

Original

Render

Hover98% match18 measurements match

Original

Render

Focus35% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match32 measurements match

Original Product area card on the site, at rest — Original

Isolated render of Product area card, at rest — Render

Hover100% match22 measurements match

Original Product area card on the site, hover — Original

Isolated render of Product area card, hover — Render

Recipe in DESIGN.md

99% match

desktop

At rest99% match32 measurements match

Original Product area card (2) on the site, at rest — Original

Isolated render of Product area card (2), at rest — Render

Hover99% match22 measurements match

Original Product area card (2) on the site, hover — Original

Isolated render of Product area card (2), hover — Render

Recipe in DESIGN.md

99% match

desktop

At rest99% match32 measurements match

Original Product area card (3) on the site, at rest — Original

Isolated render of Product area card (3), at rest — Render

Hover99% match22 measurements match

Original Product area card (3) on the site, hover — Original

Isolated render of Product area card (3), hover — Render

Recipe in DESIGN.md

99% match

desktop

It renders 99% like the site, below the 96% bar.

At rest100% match113 measurements match

Original Testimonial on the site, at rest — Original

Isolated render of Testimonial, at rest — Render

Focus100% match22 measurements match

Original Testimonial on the site, focus — Original

Isolated render of Testimonial, focus — Render

At rest, instance 299% match113 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match113 measurements match

Original

No image stored

Render

No image stored

At rest, instance 499% match113 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match113 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match26 measurements match

Original Testimonial (2) on the site, at rest — Original

Isolated render of Testimonial (2), at rest — Render

Recipe in DESIGN.md

Header6

Not checked

desktop

No recipe was made: reading the element timed out.

Nothing was compared for this component.

93% match

desktop

It renders 95% like the site, below the 96% bar.

At rest95% match333 measurements match

Original Header (inner) on the site, at rest — Original

Isolated render of Header (inner), at rest — Render

Hovernot checked

Original Header (inner) on the site, hover — Original

Isolated render of Header (inner), hover — Render

Focusnot checked

Original Header (inner) on the site, focus — Original

Isolated render of Header (inner), focus — Render

Focus on button93% match18 measurements match

Original

No image stored

Render

No image stored

Hover on button96% match18 measurements match

Original

No image stored

Render

No image stored

Focus on cta 295% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta 295% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta95% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

91% match

desktop

It renders 93% like the site, below the 96% bar.

At rest93% match333 measurements match

Original Header (landing) on the site, at rest — Original

Isolated render of Header (landing), at rest — Render

Hovernot checked

Original Header (landing) on the site, hover — Original

Isolated render of Header (landing), hover — Render

Focusnot checked

Original Header (landing) on the site, focus — Original

Isolated render of Header (landing), focus — Render

Focus on button91% match18 measurements match

Original

No image stored

Render

No image stored

Hover on button96% match18 measurements match

Original

No image stored

Render

No image stored

Focus on cta 293% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta 293% match22 measurements match

Original

No image stored

Render

No image stored

Focus on cta91% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta96% match18 measurements match

Original

No image stored

Render

No image stored

Hover on menu toggle93% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

mobile

No recipe was made: reading the element timed out.

Nothing was compared for this component.

92% match

mobile

It renders 93% like the site, below the 96% bar.

At rest93% match186 measurements match

Hovernot checked

Focusnot checked

Focus on cta 292% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta 293% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta93% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

88% match

mobile

It renders 89% like the site, below the 96% bar.

At rest89% match186 measurements match

Hovernot checked

Focusnot checked

Focus on cta88% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta88% match22 measurements match

Original

No image stored

Render

No image stored

Hover on menu toggle89% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Footer2

100% match

desktop

At rest100% match1267 measurements match

Original Footer on the site, at rest — Original

Isolated render of Footer, at rest — Render

Hovernot checked

Original Footer on the site, hover — Original

Isolated render of Footer, hover — Render

Hover on link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match22 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match1267 measurements match

Hovernot checked

Hover on link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match22 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Input1

Not checked

desktop

The check timed out.

Nothing was compared for this component.

Recipe in 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.

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

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.

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

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

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

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

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

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.

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

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 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

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

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

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

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

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

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)

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 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.

Extracted from Paperclip’s public website, not official brand guidelines.

More like this

Browse all

AI & Machine Learning · AI Products & Assistants

Anthropic

Anthropic's design system is a restrained, typographically-led identity built around two custom typefaces — Anthropic Serif and Anthropic Sans — set against a warm ivory background (#faf9f5). The palette is deliberately minimal: near-black (#141413) on warm off-white, with muted stone tones for secondary text and borders. Large-scale serif display type anchors the editorial voice, while a dark-panel section (near-black background with ivory text) creates dramatic contrast. The overall aesthetic communicates intellectual seriousness and safety-first mission through generous whitespace, high typographic contrast, and zero decorative ornamentation.

AI & Machine Learning · AI Products & Assistants

Harvey

Harvey's design system is built around a bespoke dual-typeface identity — HarveySerifFont for editorial authority and HarveySansFont for functional clarity — set against a warm near-black (#0f0e0d) navigation bar and an off-white ivory (#fafaf9) content surface. The palette is deliberately monochromatic, using a graduated warm gray scale (gray-50 through gray-950) with no accent hues, signaling trust and restraint appropriate for high-stakes legal work. Elevation is conveyed through surface contrast rather than shadows. The hero headline uses a large serif at 72px, creating immediate typographic authority, while body copy and UI elements use the custom sans. Spacing follows an 8px base grid with named scale tokens (xs, sm, md, xl, 2xl).

AI & Machine Learning · AI Products & Assistants

xAI

xAI's marketing site uses a warm off-white surface palette anchored by --color-ivory (#f9f8f6) and --color-white (#ffffff), with near-black #0a0a0a as the dominant text and foreground color. The typographic system is split between universalSansDisplay for large display headings (60–72px, tight negative letter-spacing), universalSans for body and UI copy, and GeistMono for code and terminal contexts. Radius language is dominated by 9999px pill shapes on CTAs and tags, with 12px and 6px for cards and inputs. Elevation is minimal — cards use a soft multi-layer drop shadow while most surfaces are flat. The overall tone is technical-premium: restrained color, generous whitespace, and a strong monospace code aesthetic signaling developer credibility.

Community, Social & Personal · Community & Forum

Dribbble

Dribbble's design system is built on a deep near-black navy (#0d0c22) paired with a crisp white surface, punctuated by a signature hot-pink (#ea4c89) accent used sparingly for editorial emphasis and interactive highlights. The entire typographic system relies exclusively on Mona Sans across all weights, creating hierarchy through weight and size alone. Pill-shaped buttons (border-radius: 1e+07px) and rounded cards (12px radius) define the geometry language. The layout is spacious with an 8px base grid, and elevation is conveyed through subtle drop shadows rather than heavy layering.

Travel, Transport & Logistics

Airbnb

Airbnb's design system is built around a single proprietary variable font (Airbnb Cereal VF), a near-monochrome neutral palette anchored by deep charcoal (#222222) and light grays, with the brand's signature "Rausch" coral-pink (#ff385c) reserved exclusively for primary CTAs and the logo. The layout is a responsive photo-card grid with generous image-to-text ratios, soft 20px rounded corners on cards, and a multi-layer ambient shadow system that creates subtle depth without harsh contrast. The search bar is a prominent pill-shaped container that unifies the core user action.

Commerce & Retail · E-commerce Store

IKEA

IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface — Noto IKEA — spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings. Elevation is conveyed entirely through color contrast and layout structure rather than shadows. The layout uses a max-width container of 90rem with a 1.5rem desktop grid gap, and a consistent 8px border-radius token applied to interactive elements. The off-white background (#fffefb) provides warmth against the stark #111111 text, creating a high-contrast, accessible reading experience.

Paperclip Design System

Button7

Card10

Extra16

Header6

Footer2

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

Button, primary

Button, primary (2)

Button, ghost

Card

Card (2)

Testimonial

Announcement banner

Announcement banner (2)

Header (landing)

Footer

Button, primary (3)

Button, secondary

Button, ghost (2)

Card (3)

Card (4)

Hero

Nav item

Testimonial (2)

Announcement bar

Announcement bar (2)

Header (inner)

Button, primary (4)

Input

Card (5)

Category filter

Category filter

Agent persona card

Announcement link

Card (6)

Card (7)

Card (8)

Card (9)

Card (10)

Feature section

Product area card

Product area card (2)

Product area card (3)

Do's and Don'ts

Do

Don't

Responsive Behavior

What changes on mobile

Touch targets

Iteration Guide

Known Gaps

More like this

Anthropic

Harvey

xAI

Dribbble

Airbnb

IKEA