Neon Design System

neon.com

PROEngine v4

Visual system

100% confidence

mono-displayDesign is intelligence made visibleGeist Mono128px / 400 / 1

hero-displayDesign is intelligence made visibleInter56px / 400 / 1.15

mono-statDesign is intelligence made visibleGeist Mono52px / 400 / 1

display-lgDesign is intelligence made visibleInter48px / 500 / 1.15

title-lgDesign is intelligence made visibleInter28px / 500 / 1.25

title-mdDesign is intelligence made visibleInter28px / 400 / 1.25

title-smDesign is intelligence made visibleInter24px / 400 / 1.25

headingDesign is intelligence made visibleInter20px / 500 / 1.4

body-lgDesign is intelligence made visibleInter18px / 400 / 1.5

label-lgDesign is intelligence made visibleInter18px / 500 / 1

bodyDesign is intelligence made visibleInter16px / 400 / 1.5

buttonDesign is intelligence made visibleInter15px / 400 / 1.5

footer-linkDesign is intelligence made visibleInter15px / 400 / 1

body-smDesign is intelligence made visibleInter14px / 400 / 1.4

label-strongDesign is intelligence made visibleInter14px / 500 / 1

codeDesign is intelligence made visibleGeist Mono14px / 400 / 1.45

nav-linkDesign is intelligence made visibleInter13px / 400 / 1.25

microDesign is intelligence made visibleInter10px / 500 / 1

100% confidence

footer-mobile-gap
40px

section-padding-y
128px

footer-mobile-inner-max-width
448px

100% confidence

xs · 4px

sm · 5px

md · 8px

lg · 10px

xl · 16px

full · 9999px

Components

Button7

92% match

ghost · desktop

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

At rest100% match35 measurements match

Original

Render

Focus92% match18 measurements match

Original

Render

Recipe in DESIGN.md

90% match

ghost · desktop

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

At rest100% match35 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus90% match18 measurements match

Original

Render

Recipe in DESIGN.md

91% match

ghost · desktop

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

At rest100% match35 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Focus91% match18 measurements match

Original

Render

Recipe in DESIGN.md

90% match

ghost · desktop

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

At rest100% match35 measurements match

Original

Render

Focus90% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match23 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

27% match

primary · desktop

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

At rest27% match34 measurements match

Original

Render

Hover27% match18 measurements match

Original

Render

Focus27% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match68 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

Card2

100% match

desktop

Body height is 90px, the site has 68px; Text 2 y is 23px, the site has 0px and 2 more.

At rest100% match4 of 80 measurements differ

Original Card on the site, at rest — Original

Isolated render of Card, at rest — Render

Hover100% match18 measurements match

Original Card on the site, hover — Original

Focus100% match18 measurements match

Original Card on the site, focus — Original

At rest, instance 2100% match4 of 80 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match4 of 80 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

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

At rest100% match41 measurements match

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

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

Hover100% match18 measurements match

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

Isolated render of Card (2), hover — Render

Focus100% match18 measurements match

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

Isolated render of Card (2), focus — Render

At rest, instance 2100% match41 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match41 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Extra7

100% match

desktop

At rest100% match22 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

Group y is 1329px, the site has 42px; Group 2 x is -16px, the site has -226px and 5 more.

At rest100% match7 of 328 measurements differ

Original

Render

Recipe in DESIGN.md

100% match

desktop

Group y is 1329px, the site has 42px; Group 2 x is -16px, the site has -226px and 5 more.

At rest100% match7 of 328 measurements differ

Original Navigation on the site, at rest — Original

Isolated render of Navigation, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match46 measurements match

Original Section heading on the site, at rest — Original

Isolated render of Section heading, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match46 measurements match

Original Section heading (2) on the site, at rest — Original

Isolated render of Section heading (2), at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match130 measurements match

Original Section heading (3) on the site, at rest — Original

Isolated render of Section heading (3), at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

Header2

93% match

desktop

Nav y is 834px, the site has 814px.

At rest93% match1 of 611 measurements differ

Original Header on the site, at rest — Original

Isolated render of Header, at rest — Render

Hovernot checked

Original Header on the site, hover — Original

Isolated render of Header, hover — Render

Focusnot checked

Original Header on the site, focus — Original

Isolated render of Header, focus — Render

Focus on cta 293% match18 measurements match

Original

No image stored

Render

No image stored

Focus on cta 393% match18 measurements match

Original

No image stored

Render

No image stored

Focus on cta 493% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta 493% match22 measurements match

Original

No image stored

Render

No image stored

Focus on cta 593% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta 593% match18 measurements match

Original

No image stored

Render

No image stored

Focus on cta93% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link93% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link93% match18 measurements match

Original

No image stored

Render

No image stored

Focus on logo93% match18 measurements match

Original

No image stored

Render

No image stored

Focus on nav link93% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

92% match

mobile

Nav y is 778px, the site has 758px.

At rest92% match1 of 158 measurements differ

Focusnot checked

Focus on logo92% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Footer2

99% match

desktop

Text 3 height is 53px, the site has 12px; List y is 114px, the site has 73px and 51 more.

At rest99% match53 of 1682 measurements differ

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

Focusnot checked

Original Footer on the site, focus — Original

Isolated render of Footer, focus — Render

Focus on link 299% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 299% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link 399% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link 4100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 499% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

98% match

mobile

At rest98% match347 measurements match

Hovernot checked

Focusnot checked

Focus on link 298% match18 measurements match

Original

No image stored

Render

No image stored

Hover on link 298% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link98% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Input3

78% match

desktop

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

At rest78% match26 measurements match

Original Input on the site, at rest — Original

Isolated render of Input, at rest — Render

Focus78% match22 measurements match

Original Input on the site, focus — Original

Isolated render of Input, focus — Render

Recipe in DESIGN.md

93% match

desktop

Root width is 422px, the site has 414px.

At rest99% match1 of 22 measurements differ

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

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

Hover99% match18 measurements match

Original Input (2) on the site, hover — Original

Isolated render of Input (2), hover — Render

Focus93% match18 measurements match

Original Input (2) on the site, focus — Original

Isolated render of Input (2), focus — Render

Recipe in DESIGN.md

84% match

desktop

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

At rest100% match56 measurements match

Original

Render

Focus84% match18 measurements match

Original

Render

Recipe in DESIGN.md

DESIGN.md

Neon

Overview

Neon reads like a terminal that went to design school. The canvas is pure black, the type is white Inter tracked tight, and almost everything else is a careful step down a cool gray ramp. Color is rationed: Neon Green (primary, #34D59A) shows up as highlighted text and interactive emphasis, never as a wash. Supporting visuals such as barcode-like data graphics, glowing green hero imagery and dimmed product mockups carry the sci-fi edge, so the UI chrome can stay quiet.

Density is low and confident. Sections breathe on a 128px vertical rhythm (section-padding-y). Headlines are big and light-weight rather than bold, and supporting copy recedes into grays. Numbered sections pair a small monospace eyebrow and an oversized ghosted Geist Mono numeral with a large Inter headline offset to the right.

Hierarchy comes from three levers, in this order:

Gray value. White ink for what matters, muted (#AFB1B6) and subtle (#797D86) for what doesn't. The verified section-heading recipe sets the same 44px line in two tones: a subtle #797D86 lead-in followed by a white #FFFFFF continuation.
Size. A wide ladder from micro up to mono-display.
Family switch. Inter for language, Geist Mono for numbers, code and eyebrows.

Weight barely participates. Elevation is tonal and hairline-based, with a light ring and soft-shadow tier where cards and floating elements need separation.

Key Characteristics:

Dark-first: canvas #000000 under surface #0C0D0D and surface-raised #18191B panels.
One electric accent, primary #34D59A, used sparingly. A deeper primary-focus #38A57D is reserved for the 2px focus ring.
Inter at weights 400 and 500 only, with negative tracking at nearly every size.
Geist Mono for code (code), stats (mono-stat) and giant numerals (mono-display).
1px hairline #303236 rules separate header, nav and footer from content.
Crisp 4px corners (rounded.xs) on links, ghost buttons and controls. Pills (rounded.full) are reserved for CTA-style buttons.
Generous section spacing, with left-aligned editorial composition on desktop.

Colors

The palette is a single green accent on a black-to-white neutral ramp. Use neutrals for structure and the greens for meaning.

Brand & Accent

Neon Green (primary, #34D59A): the signature accent. Use it for highlighted words, active or interactive emphasis and small glyphs. It mostly appears as text color on dark surfaces, not as large fills.
Signal Green (primary-focus, #38A57D): the focus ring only. Every measured focusable part takes outline: 2px solid #38A57D, normally offset 2px; header-logo uses a 4px offset. It never appears in the page palette.
Mint Tint (primary-tint, #CAE6DC): soft callout text.
- In the verified section-heading-3, mint Geist Mono numerals sit on a deep green-black group fill of #0D221A (section-heading-3-group-2).
Highlight Yellow (highlight, #FFED9C): a rare secondary highlight, seen on one page only. Treat it as an annotation color, not a second brand color.

Surface

Void (canvas, #000000): the page, header, footer and nav bar fills.
Graphite (surface, #0C0D0D): the first raised panel tone. It is also the label color on the white button-primary.
Charcoal (surface-raised, #18191B): cards, code panels and raised blocks. It also draws the inner footer divider (footer-group-3 border-top).

Text

Ink (ink, #FFFFFF): headlines, primary labels, active nav items and the fill of high-emphasis CTAs (header-cta-5).
Ink Soft (ink-soft, #EFEFF1) and Ink Secondary (ink-secondary, #E4E5E7): near-white body text in long-form contexts.
Body Light (body-light, #D7D8DB) and Body (body, #C9CBCF): paragraph copy.
- body doubles as the hover fill of white buttons (button-primary hover, header-cta-5 hover).
Muted (muted, #AFB1B6): the default for inactive nav and footer links (nav-button, footer-link-2). These links brighten to #FFFFFF on hover.
Muted Strong (muted-strong, #94979E): secondary descriptions, card-body text and footer taglines (footer-text).
Subtle (subtle, #797D86): de-emphasized lead-ins in section headings (section-heading-title) and card body copy (card-2-body).
Faint (faint, #61646B): legal and fine print (footer-inner-2, footer-link).
On Primary (on-primary, #000000): text on white or green fills, e.g. the header-cta-5 label.

Hairlines & Borders

Hairline (hairline, #303236): the one structural border color.
- Used for the 1px bottom border of nav-group and header-group-4, the 1px top border of footer and the input border.
faint #61646B serves as the outlined-button border on header-cta-4, which brightens to 1px solid #FFFFFF on hover.
The input border shifts to subtle #797D86 on focus.

Component & State Colors

These were measured on components, not in the page sampling:

Card well: #111315 (card-group), ringed by #FFFFFF0D.
Frosted input: #13141599 (input).
Green-black stat panel: #0D221A (section-heading-3-group-2).
Focus ring: #38A57D.

The /discord capture also returned Discord's own UI: #5865F2 on button-primary-2 and #798DF9 on button-ghost-5. Those colors are not Neon's palette and must not be reused.

Gradients

No CSS gradient was measured on any UI element. Gradients live only in the green hero and illustration imagery seen in the screenshots. Keep buttons, cards and backgrounds solid.

Typography

Font Family

Inter: the entire interface voice, covering headlines, body, navigation, buttons and footer. The fallback stack is "Inter Fallback", ui-sans-serif, system-ui, sans-serif.
Geist Mono (loaded as GeistMono): code blocks (code), oversized stat numerals (mono-stat), the giant ghosted section numbers (mono-display) and mono eyebrows.

Both are open-source families, so no substitution is needed. (The "gg sans" family seen in the evidence belongs to the captured Discord page, not Neon.)

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`mono-display`	128px	400	1	-5.12px	Ghosted oversized section numerals (01, 02, 03)
`hero-display`	56px	400	1.15	-2.24px	Homepage hero headline
`mono-stat`	52px	400	1	normal	Numeric stats in mint callouts
`display-lg`	48px	500	1.15	-1.92px	Page-level H1 (blog/article)
`title-lg`	28px	500	1.25	-1.12px	Section H2s
`title-md`	28px	400	1.25	-0.56px	Lighter H3 titles
`title-sm`	24px	400	1.25	-0.96px	Small H1s and card titles
`heading`	20px	500	1.4	-0.4px	Feature and card headings
`body-lg`	18px	400	1.5	-0.36px	Lead paragraphs, card descriptions
`label-lg`	18px	500	1	-0.26px	Emphasized single-line labels
`body`	16px	400	1.5	normal	Default paragraph and list text
`button`	15px	400	1.5	-0.15px	Ghost buttons and nav triggers
`footer-link`	15px	400	1	-0.375px	Footer link lists
`body-sm`	14px	400	1.4	-0.28px	Secondary copy, meta
`label-strong`	14px	500	1	-0.28px	Header CTAs (Log in / Sign up)
`code`	14px	400	1.45	normal	Inline and block code
`nav-link`	13px	400	1.25	-0.26px	Dense navigation links
`micro`	10px	500	1	-0.1px	Tiny badges and tags

Principles

Weights.

Only 400 and 500 exist in the ladder. Large display type is set at 400, and 500 is used for H2-level titles and labels.
A single 600 appears on footer column headings (footer-text-3, 12px).
Never go bolder. Emphasis comes from white vs gray, not weight.

Tracking.

Inter is always tightened.
Display and title sizes track at roughly -4% of the font size:
- -2.24px at 56px
- -1.92px at 48px
- -1.12px at 28px
- -0.96px at 24px
body-lg, body-sm and nav-link sit at about -2%.
button sits at -1%.
Only body at 16px, code and mono-stat stay normal.
mono-display keeps the -4% rule even in mono.

Line height.

Display lines are tight (1 to 1.15).
Titles use 1.25.
Reading text opens to 1.5.
Single-line UI labels (label-lg, label-strong, footer-link, micro) collapse to 1 so they center cleanly in controls.

Two-tone headlines.

The verified section-heading recipes set a 44px/400 line with -1.76px tracking.
The first phrase is in subtle #797D86 and the continuation is in ink #FFFFFF. Use this instead of bolding a keyword.

Layout

Spacing System

Three spacing tokens were measured:

Token	Value	Where it was measured
`section-padding-y`	128px	The vertical padding between the page's major sections, measured on the page itself
`footer-mobile-gap`	40px	The gap of `footer-mobile-group-2` in the mobile footer
`footer-mobile-inner-max-width`	448px	The cap on the mobile footer's inner column (`footer-mobile-inner-2`)

section-padding-y is the rhythm to protect: every full-width section gets that breathing room above and below.

Grid & Container

No page-level container max width was verified. The only measured cap is footer-mobile-inner-max-width (448px) on the mobile footer.
On desktop the screenshots show a wide, left-aligned frame:
- Numbered sections put a mono eyebrow and ghosted numeral in a narrow left column, with the headline and content offset into the wider right area.
- Feature cards sit side by side in a row of staggered-height columns.
- A logo strip is bracketed by hairline rules.
- The footer arranges link groups as columns beside a brand block.
Blog pages narrow to a single centered reading column with a sticky "On this page" table of contents on the right.

Whitespace Philosophy

Whitespace is the primary separator. Sections are divided by the section-padding-y gap on the black canvas, not by background bands; hairlines are used only at the header, nav and footer edges. Inside sections, keep content left-aligned and let the right side of wide rows stay open. Never fill empty canvas with decoration that isn't data imagery.

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.

section-padding-y: 128px (vertical padding repeated on the page sections: 2 section edges on 1 page)
footer-mobile-gap: 40px (footer-mobile, gap of footer-mobile-group-2)
footer-mobile-inner-max-width: 448px (footer-mobile, max width of footer-mobile-inner-2)

Elevation & Depth

Level	Treatment	Use
0 Flat	Solid `canvas` #000000, no border	Page background, `header`, `footer`, nav bar fills
1 Tonal	`surface` #0C0D0D, `surface-raised` #18191B, or the #111315 card well (`card-group`)	Panels, code blocks, card media wells
2 Hairline	1px solid `hairline` #303236 as border-bottom (`nav-group`, `header-group-4`) or border-top (`footer`). An inner #18191B top border is used on `footer-group-3`	Structural edges between chrome and content
3 Ring	Box-shadow `#FFFFFF0D 0px 0px 0px 1px` (white at 5%) on `card-group`. On the page an inset variant is used: `rgb(48, 50, 54) 0px 0px 0px 1px inset`	Card outlines that read as a faint glow edge rather than a border
4 Soft lift	`rgba(0, 0, 0, 0.2) 0px 2px 10px 0px` and `rgba(0, 0, 0, 0.4) 0px 8px 20px 0px`	Floating elements such as popovers and menus; observed once each on the page
5 Frosted	`backdrop-filter: blur(16px)` over a translucent #13141599 fill with a 1px solid #303236 border (`input`, flagged: the render matched 78% of the original pixels)	Inputs and overlays sitting on imagery
Focus	`outline: 2px solid #38A57D`, offset 2px (4px on logos)	Every focusable link, button and logo

Shadow philosophy. Depth starts tonal: lighter charcoals stacked on black, then hairlines. Shadows are a real but restrained tier on top of that. The workhorse is the 1px ring (#FFFFFF0D 0px 0px 0px 1px), a shadow used as a border, giving cards a luminous edge on black without any spread. True drop shadows (0px 2px 10px at 0.2, 0px 8px 20px at 0.4) are pure black and only make sense on floating layers. Backdrop blur (blur(16px)) is part of the system for translucent controls. Glow belongs to imagery, never to CSS shadows.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.xs`	4px	The default and by far the most frequent radius
`rounded.sm`	5px	Occasional small chips and tags
`rounded.md`	8px	Mid-size containers
`rounded.lg`	10px	Rare larger panels
`rounded.xl`	16px	Rare large feature containers
`rounded.full`	9999px	Pill buttons and chips

Where rounded.xs (4px) is measured:

Ghost buttons (button-ghost, button-ghost-2)
Nav triggers and links (nav-button, nav-link)
Header and footer links (header-link, footer-link-2)

The 8px radius on button-primary-2 comes from the captured Discord page, not Neon's own UI. Do not read it as Neon's button radius.

The geometry is deliberately mixed.

Structural elements stay crisp: cards, code panels, stat boxes and highlighted text blocks read as hard-edged or barely rounded rectangles, matching the angular logo and terminal feel.
Action elements go fully pill: in the screenshots, Get started, Sign up and Log in are pills (rounded.full).

Keep that contrast. Pills mean "click me" and rectangles mean "content". Avoid the in-between radii (rounded.lg, rounded.xl) unless a container genuinely needs softening. Circles are used only for icon-scale elements.

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

Verification: flagged, the render matched 92% 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)
button-ghost-label: label text, 7 characters (.c-button-ghost__label)
button-ghost-icon: icon placeholder, 14x15px (.c-button-ghost__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <span class="c-button-ghost__label">lorem i</span>
    <span class="c-button-ghost__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-ghost {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-button-ghost::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0.015625px;
  bottom: -17.5px;
  left: 0px;
}

.c-button-ghost__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 15px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  opacity: 0.6;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-ghost:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

States

focus: outline 2px solid #38A57D, outline-offset 2px

Button, ghost (2)

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

Anatomy

button-ghost-2: the component root, a <button> (.c-button-ghost-2)
button-ghost-2-label: label text, 9 characters (.c-button-ghost-2__label)
button-ghost-2-icon: icon placeholder, 14x15px (.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__label">lorem ips</span>
    <span class="c-button-ghost-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-ghost-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #AFB1B6;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-button-ghost-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 110px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: -17.5px;
  left: 0px;
}

.c-button-ghost-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 15px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  opacity: 0.6;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-ghost-2:hover {
  color: #FFFFFF;
}

.c-button-ghost-2:hover::before {
  color: #FFFFFF;
}

.c-button-ghost-2:focus {
  color: #FFFFFF;
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

.c-button-ghost-2:focus::before {
  color: #FFFFFF;
}

States

hover (button-ghost-2-hover): color #FFFFFF, ::before color #FFFFFF
focus (button-ghost-2-focus): color #FFFFFF, outline 2px solid #38A57D, outline-offset 2px, ::before color #FFFFFF

Button, ghost (3)

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

Anatomy

button-ghost-3: the component root, a <button> (.c-button-ghost-3)
button-ghost-3-label: label text, 9 characters (.c-button-ghost-3__label)
button-ghost-3-icon: icon placeholder, 14x15px (.c-button-ghost-3__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-3-scope">
  <button class="c-button-ghost-3" type="button">
    <span class="c-button-ghost-3__label">lorem ips</span>
    <span class="c-button-ghost-3__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-3-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-ghost-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #AFB1B6;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-button-ghost-3::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 119px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: -17.5px;
  left: 0px;
}

.c-button-ghost-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 15px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  opacity: 0.6;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-ghost-3:hover {
  color: #FFFFFF;
}

.c-button-ghost-3:hover::before {
  color: #FFFFFF;
}

.c-button-ghost-3:focus {
  color: #FFFFFF;
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

.c-button-ghost-3:focus::before {
  color: #FFFFFF;
}

States

hover (button-ghost-3-hover): color #FFFFFF, ::before color #FFFFFF
focus (button-ghost-3-focus): color #FFFFFF, outline 2px solid #38A57D, outline-offset 2px, ::before color #FFFFFF

Card

Verification: flagged, the card-body height did not reproduce the measured 68px after 2 correction attempts.

Anatomy

Group: 3 instances in a 1-column grid, 16px gap; the recipe carries the values they all share
card: the component root, a <li> (.c-card)
card-body: inner group (.c-card__body)
card-text: label text, 0 characters (.c-card__text)
card-text-2: label text, 17 characters (.c-card__text-2, 3 instances)
card-group: inner group (.c-card__group)
card-media: image placeholder, 262x259px (.c-card__media)

Recipe

HTML · CSS

<div class="c-card-scope">
  <li class="c-card">
    <p class="c-card__body">
      <span class="c-card__text">
        <span class="c-card__text-2">lorem ipsum dolor</span>
        <span class="c-card__text-2">l</span>
      </span>
      <span class="c-card__text-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmo</span>
    </p>
    <span class="c-card__group">
      <span class="c-card__media" aria-hidden="true"></span>
    </span>
  </li>
</div>

.c-card-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  opacity: 0.8;
  cursor: default;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-card__body {
  display: block;
  box-sizing: border-box;
  max-width: 256px;
  margin: 0px;
  color: #94979E;
  font-size: 18px;
  line-height: 22.5px;
  letter-spacing: -0.36px;
}

.c-card__text {
  display: inline;
  box-sizing: border-box;
  color: #FFFFFF;
  font-weight: 500;
}

.c-card__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #111315;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #FFFFFF0D 0px 0px 0px 1px, transparent 0px 0px 0px 0px;
  margin-top: 32px;
}

.c-card__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 262px;
  height: 259px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card:hover {
  opacity: 1;
}

.c-card:focus {
  opacity: 1;
}

States

hover: opacity 1
focus: opacity 1

Card (2)

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

Anatomy

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

Recipe

HTML · CSS

<div class="c-card-2-scope">
  <li class="c-card-2">
    <h3 class="c-card-2__title">lorem ipsum dolor</h3>
    <p class="c-card-2__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet</p>
  </li>
</div>

.c-card-2-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-card-2 {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  list-style-type: none;
}

.c-card-2__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.32px;
}

.c-card-2__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #797D86;
  line-height: 20px;
  letter-spacing: -0.32px;
}

.c-card-2:hover {
  transform-origin: 128px 54px;
}

.c-card-2:focus {
  transform-origin: 128px 54px;
}

States

hover: transform-origin 128px 54px
focus: transform-origin 128px 54px

Section heading

Verification: verified against the live page at desktop.

Anatomy

section-heading: the component root, a <header> (.c-section-heading)
section-heading-title: heading, 0 characters (.c-section-heading__title)
section-heading-text: label text, 24 characters (.c-section-heading__text)
section-heading-text-2: label text, 97 characters (.c-section-heading__text-2)

Recipe

HTML · CSS

<div class="c-section-heading-scope">
  <header class="c-section-heading">
    <h2 class="c-section-heading__title">
      <span class="c-section-heading__text">lorem ipsum dolor sit am</span>
      <span class="c-section-heading__text-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor si</span>
    </h2>
  </header>
</div>

.c-section-heading-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-section-heading {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-section-heading__title {
  display: block;
  box-sizing: border-box;
  max-width: 1182px;
  margin: 0px 0px 0px 1px;
  color: #797D86;
  font-size: 44px;
  font-weight: 400;
  line-height: 49.5px;
  letter-spacing: -1.76px;
}

.c-section-heading__text {
  display: inline;
  box-sizing: border-box;
  color: #FFFFFF;
}

States

No hover or focus change was observed.

Section heading (2)

Verification: verified against the live page at desktop.

Anatomy

section-heading-2: the component root, a <header> (.c-section-heading-2)
section-heading-2-title: heading, 0 characters (.c-section-heading-2__title)
section-heading-2-text: label text, 47 characters (.c-section-heading-2__text)
section-heading-2-text-2: label text, 82 characters (.c-section-heading-2__text-2)

Recipe

HTML · CSS

<div class="c-section-heading-2-scope">
  <header class="c-section-heading-2">
    <h2 class="c-section-heading-2__title">
      <span class="c-section-heading-2__text">lorem ipsum dolor sit amet consectetur adipisci</span>
      <span class="c-section-heading-2__text-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem</span>
    </h2>
  </header>
</div>

.c-section-heading-2-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-section-heading-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-section-heading-2__title {
  display: block;
  box-sizing: border-box;
  max-width: 1184px;
  margin: 0px;
  position: relative;
  left: 1px;
  color: #797D86;
  font-size: 44px;
  font-weight: 400;
  line-height: 49.5px;
  letter-spacing: -1.76px;
}

.c-section-heading-2__text {
  display: inline;
  box-sizing: border-box;
  color: #FFFFFF;
}

States

No hover or focus change was observed.

Section heading (3)

Verification: verified against the live page at desktop.

Anatomy

section-heading-3: the component root, a <header> (.c-section-heading-3)
section-heading-3-title: heading, 0 characters (.c-section-heading-3__title)
section-heading-3-group: inner group (.c-section-heading-3__group)
section-heading-3-group-2: inner group (.c-section-heading-3__group-2, 2 instances)
section-heading-3-text: label text, 14 characters (.c-section-heading-3__text, 2 instances)
section-heading-3-group-3: inner group (.c-section-heading-3__group-3)
section-heading-3-body: label text, 61 characters (.c-section-heading-3__body)

Recipe

HTML · CSS

<div class="c-section-heading-3-scope">
  <header class="c-section-heading-3">
    <h3 class="c-section-heading-3__title">
      <span class="c-section-heading-3__group">
        <span class="c-section-heading-3__group-2"></span>
        <span class="c-section-heading-3__text">lorem ipsum do</span>
      </span>
      <span class="c-section-heading-3__group-3">
        <span class="c-section-heading-3__group-2"></span>
        <span class="c-section-heading-3__text">lorem</span>
      </span>
    </h3>
    <p class="c-section-heading-3__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do</p>
  </header>
</div>

.c-section-heading-3-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-section-heading-3 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-section-heading-3__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #CAE6DC;
  font-family: GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 52px;
  font-weight: 400;
  line-height: 52px;
}

.c-section-heading-3__group {
  display: block;
  box-sizing: border-box;
  width: 608px;
  height: 63px;
  max-width: 100%;
  position: relative;
}

.c-section-heading-3__group-2 {
  display: block;
  box-sizing: border-box;
  height: 56px;
  position: absolute;
  top: 1px;
  right: 0px;
  left: 0px;
  background-color: #0D221A;
}

.c-section-heading-3__text {
  display: block;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  line-height: 63px;
  white-space: nowrap;
  padding-left: 32px;
}

.c-section-heading-3__group-3 {
  display: block;
  box-sizing: border-box;
  width: 384px;
  height: 63px;
  max-width: 100%;
  position: relative;
}

.c-section-heading-3__body {
  display: block;
  box-sizing: border-box;
  max-width: 440px;
  margin: 14px 0px 0px 32px;
  color: #CAE6DC;
  font-family: GeistMono, ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 20px;
  line-height: 22.5px;
  text-transform: uppercase;
}

States

No hover or focus change was observed.

Nav

Verification: flagged, the nav-group y did not reproduce the measured 42px after 2 correction attempts.

Anatomy

nav: the component root, a <nav> (.c-nav)
nav-list: inner flex row (.c-nav__list)
nav-item: inner group (.c-nav__item, 3 instances)
nav-button: button (.c-nav__button)
nav-text: label text, 7 characters (.c-nav__text, 3 instances)
nav-icon: icon placeholder, 14x15px (.c-nav__icon, 3 instances)
nav-button-2: button (.c-nav__button-2)
nav-link: link, 4-character label (.c-nav__link, 2 instances)
nav-button-3: button (.c-nav__button-3)
nav-group: inner block (.c-nav__group)
nav-group-2: inner block (.c-nav__group-2)
nav-group-active: inner block (.c-nav__group-active)
nav-group-3: inner flex row (.c-nav__group-3), content not captured

Recipe

HTML · CSS

<div class="c-nav-scope">
  <nav class="c-nav">
    <ul class="c-nav__list">
      <li class="c-nav__item">
        <button class="c-nav__button" type="button">
          <span class="c-nav__text">lorem i</span>
          <span class="c-nav__icon" aria-hidden="true"></span>
        </button>
      </li>
      <button class="c-nav__button-2" type="button">
        <span class="c-nav__text">lorem ips</span>
        <span class="c-nav__icon" aria-hidden="true"></span>
      </button>
      <a class="c-nav__link" href="#">lore</a>
      <li class="c-nav__item">
        <a class="c-nav__link" href="#">lorem i</a>
      </li>
      <li class="c-nav__item">
        <button class="c-nav__button-3" type="button">
          <span class="c-nav__text">lorem ips</span>
          <span class="c-nav__icon" aria-hidden="true"></span>
        </button>
      </li>
    </ul>
    <div class="c-nav__group">
      <div class="c-nav__group-2">
        <div class="c-nav__group-active">
          <div class="c-nav__group-3"></div>
        </div>
      </div>
    </div>
  </nav>
</div>

.c-nav-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-nav {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-nav__list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-nav__item {
  display: list-item;
  box-sizing: border-box;
}

.c-nav__button {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #AFB1B6;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  appearance: button;
  margin-left: -14px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-nav__button::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0.015625px;
  bottom: -17.5px;
  left: 0px;
}

.c-nav__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 15px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  opacity: 0.6;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-nav__button-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #AFB1B6;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-nav__button-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 110px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: -17.5px;
  left: 0px;
}

.c-nav__link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  position: relative;
  color: #AFB1B6;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-decoration-line: none;
  text-align: center;
  white-space: pre;
  padding-right: 14px;
  padding-left: 14px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-nav__button-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  appearance: button;
  margin-right: -14px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-nav__button-3::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 119px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: -17.5px;
  left: 0px;
}

.c-nav__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 449px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 40;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #000000;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: -1px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #303236;
}

.c-nav__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-nav__group-active {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-nav__group-3 {
  display: flex;
  column-gap: 160px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1856px;
  padding: 28px 32px 80px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-right: auto;
  margin-left: auto;
}

States

No hover or focus change was observed.

Header

Verification: desktop flagged, the header-nav y did not reproduce the measured 814px after 2 correction attempts; mobile flagged, the header-mobile-nav y did not reproduce the measured 758px after 2 correction attempts.

Anatomy

header: the component root, a <header> (.c-header)
header-inner: inner flex row (.c-header__inner)
header-group: inner flex row (.c-header__group)
header-group-2: inner block (.c-header__group-2)
header-logo: link (.c-header__logo)
header-logo-text: label text, 4 characters (.c-header__logo-text)
header-logo-icon: icon placeholder, 102x28px (.c-header__logo-icon)
header-group-3: inner block (.c-header__group-3)
header-nav: inner flex column (.c-header__nav)
header-nav-2: inner group (.c-header__nav-2)
header-nav-list: inner flex row (.c-header__nav-list)
header-nav-item: inner group (.c-header__nav-item, 2 instances)
header-cta: the button-ghost button (.c-header__cta)
header-text: label text, 7 characters (.c-header__text, 3 instances)
header-cta-icon: icon placeholder, 14x15px (.c-header__cta-icon)
header-cta-2: the button-ghost-2 button (.c-header__cta-2)
header-icon: icon placeholder, 14x15px (.c-header__icon, 2 instances)
header-nav-link: link, 4-character label (.c-header__nav-link, 2 instances)
header-cta-3: the button-ghost-3 button (.c-header__cta-3)
header-group-4: inner block (.c-header__group-4)
header-group-5: inner block (.c-header__group-5)
header-group-6: inner flex row (.c-header__group-6)
header-group-7: inner flex row (.c-header__group-7)
header-link: link (.c-header__link, 2 instances)
header-link-icon: icon placeholder, 18px (.c-header__link-icon, 2 instances)
header-text-2: label text, 7 characters (.c-header__text-2)
header-group-8: inner group (.c-header__group-8)
header-text-3: label text, 5 characters (.c-header__text-3)
header-group-9: inner flex row (.c-header__group-9)
header-cta-4: link, 6-character label (.c-header__cta-4)
header-cta-5: link, 7-character label (.c-header__cta-5)

Desktop recipe

HTML · CSS

<div class="c-header-scope">
  <header class="c-header">
    <div class="c-header__inner">
      <div class="c-header__group">
        <div class="c-header__group-2">
          <a class="c-header__logo" href="#">
            <span class="c-header__logo-text">lore</span>
            <span class="c-header__logo-icon" aria-hidden="true"></span>
          </a>
          <div class="c-header__group-3">
            <ol class="c-header__nav"></ol>
          </div>
        </div>
        <nav class="c-header__nav-2">
          <ul class="c-header__nav-list">
            <li class="c-header__nav-item">
              <button class="c-header__cta" type="button">
                <span class="c-header__text">lorem i</span>
                <span class="c-header__cta-icon" aria-hidden="true"></span>
              </button>
            </li>
            <button class="c-header__cta-2" type="button">
              <span class="c-header__text">lorem ips</span>
              <span class="c-header__icon" aria-hidden="true"></span>
            </button>
            <a class="c-header__nav-link" href="#">lore</a>
            <a class="c-header__nav-link" href="#">lorem i</a>
            <li class="c-header__nav-item">
              <button class="c-header__cta-3" type="button">
                <span class="c-header__text">lorem ips</span>
                <span class="c-header__icon" aria-hidden="true"></span>
              </button>
            </li>
          </ul>
          <div class="c-header__group-4">
            <div class="c-header__group-5"></div>
          </div>
        </nav>
      </div>
      <div class="c-header__group-6">
        <div class="c-header__group-7">
          <a class="c-header__link" href="#">
            <span class="c-header__link-icon" aria-hidden="true"></span>
            <span class="c-header__text-2">lorem i</span>
          </a>
          <a class="c-header__link" href="#">
            <span class="c-header__link-icon" aria-hidden="true"></span>
            <span class="c-header__group-8">
              <span class="c-header__text-3">lorem</span>
            </span>
          </a>
        </div>
        <div class="c-header__group-9">
          <a class="c-header__cta-4" href="#">lorem</a>
          <a class="c-header__cta-5" href="#">lorem i</a>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 64px;
  position: sticky;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 50;
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 1440px;
  height: 1px;
  position: absolute;
  top: 63px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #303236;
}

.c-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1856px;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-header__group {
  display: flex;
  align-items: center;
  column-gap: 92px;
  box-sizing: border-box;
}

.c-header__group-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-header__logo {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header__logo-text {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-header__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 102px;
  height: 28px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header__group-3 {
  display: block;
  box-sizing: border-box;
}

.c-header__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: 245px;
  max-width: 1440px;
  padding: 25px;
  margin: 0px;
  position: fixed;
  right: 0px;
  bottom: 0px;
  z-index: 2147483647;
  list-style-type: none;
}

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

.c-header__nav-list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header__nav-item {
  display: list-item;
  box-sizing: border-box;
}

.c-header__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  appearance: button;
  margin-left: -14px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header__cta::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0.015625px;
  bottom: -17.5px;
  left: 0px;
}

.c-header__cta-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 15px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  opacity: 0.6;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header__cta-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 110px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: -17.5px;
  left: 0px;
}

.c-header__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 15px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  opacity: 0.6;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header__nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  position: relative;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-decoration-line: none;
  text-align: center;
  white-space: pre;
  padding-right: 14px;
  padding-left: 14px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  appearance: button;
  margin-right: -14px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header__cta-3::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 119px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: -17.5px;
  left: 0px;
}

.c-header__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 40;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #000000;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: -1px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #303236;
}

.c-header__group-5 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header__group-6 {
  display: flex;
  align-items: center;
  column-gap: 32px;
  box-sizing: border-box;
}

.c-header__group-7 {
  display: flex;
  align-items: center;
  column-gap: 24px;
  box-sizing: border-box;
}

.c-header__link {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: -0.32px;
  text-decoration-line: none;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header__link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header__text-2 {
  display: block;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.28px;
}

.c-header__group-8 {
  display: block;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.28px;
}

.c-header__text-3 {
  display: inline;
  box-sizing: border-box;
  white-space: nowrap;
}

.c-header__group-9 {
  display: flex;
  column-gap: 14px;
  box-sizing: border-box;
}

.c-header__cta-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 36px;
  color: #FFFFFF;
  border: 1px solid #61646B;
  border-radius: 3.35544e+07px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -0.28px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  padding-right: 18px;
  padding-left: 18px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header__cta-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 36px;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 3.35544e+07px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: -0.28px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  padding-right: 18px;
  padding-left: 18px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header__logo:focus {
  outline: 2px solid #38A57D;
  outline-offset: 4px;
}

.c-header__cta:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

.c-header__cta-2:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

.c-header__nav-link:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

.c-header__cta-3:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

.c-header__link:hover {
  color: #AFB1B6;
}

.c-header__link:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

.c-header__cta-4:hover {
  border: 1px solid #FFFFFF;
}

.c-header__cta-4:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

.c-header__cta-5:hover {
  background-color: #C9CBCF;
}

.c-header__cta-5:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

Mobile anatomy

header-mobile: the component root, a <header> (.c-header-mobile)
header-mobile-group: inner flex row (.c-header-mobile__group)
header-mobile-group-2: inner flex row (.c-header-mobile__group-2)
header-mobile-group-3: inner block (.c-header-mobile__group-3)
header-mobile-logo: link (.c-header-mobile__logo)
header-mobile-logo-text: label text, 4 characters (.c-header-mobile__logo-text)
header-mobile-logo-icon: icon placeholder, 102x28px (.c-header-mobile__logo-icon)
header-mobile-group-4: inner block (.c-header-mobile__group-4)
header-mobile-nav: inner flex column (.c-header-mobile__nav)

Mobile recipe

HTML · CSS

<div class="c-header-mobile-scope">
  <header class="c-header-mobile">
    <div class="c-header-mobile__group">
      <div class="c-header-mobile__group-2">
        <div class="c-header-mobile__group-3">
          <a class="c-header-mobile__logo" href="#">
            <span class="c-header-mobile__logo-text">lore</span>
            <span class="c-header-mobile__logo-icon" aria-hidden="true"></span>
          </a>
          <div class="c-header-mobile__group-4">
            <ol class="c-header-mobile__nav"></ol>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-mobile-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-mobile {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 56px;
  position: relative;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 50;
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-header-mobile::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 390px;
  height: 1px;
  position: absolute;
  top: 55px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #303236;
}

.c-header-mobile__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-mobile__group-2 {
  display: flex;
  align-items: center;
  column-gap: 40px;
  box-sizing: border-box;
}

.c-header-mobile__group-3 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-header-mobile__logo {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-mobile__logo-text {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-header-mobile__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 102px;
  height: 28px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-mobile__group-4 {
  display: block;
  box-sizing: border-box;
}

.c-header-mobile__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: 245px;
  max-width: 390px;
  padding: 25px;
  margin: 0px;
  position: fixed;
  right: 0px;
  bottom: 0px;
  z-index: 2147483647;
  list-style-type: none;
}

.c-header-mobile__logo:focus {
  outline: 2px solid #38A57D;
  outline-offset: 4px;
}

States

header-logo focus: outline 2px solid #38A57D, outline-offset 4px
header-cta focus: outline 2px solid #38A57D, outline-offset 2px
header-cta-2 focus: outline 2px solid #38A57D, outline-offset 2px
header-nav-link focus: outline 2px solid #38A57D, outline-offset 2px
header-cta-3 focus: outline 2px solid #38A57D, outline-offset 2px
header-link hover (header-link-hover): color #AFB1B6
header-link focus: outline 2px solid #38A57D, outline-offset 2px
header-cta-4 hover: border 1px solid #FFFFFF
header-cta-4 focus: outline 2px solid #38A57D, outline-offset 2px
header-cta-5 hover (header-cta-5-hover): background-color #C9CBCF
header-cta-5 focus: outline 2px solid #38A57D, outline-offset 2px
mobile, header-mobile-logo focus: outline 2px solid #38A57D, outline-offset 4px

Verification: desktop flagged, the footer-text-3 height did not reproduce the measured 12px after 2 correction attempts; mobile verified against the live page at mobile.

Anatomy

footer: the component root, a <footer> (.c-footer)
footer-inner: inner block (.c-footer__inner)
footer-columns: inner flex row (.c-footer__columns)
footer-column: inner flex column (.c-footer__column)
footer-group: inner block (.c-footer__group)
footer-image: image placeholder, 177x28px (.c-footer__image)
footer-text: label text, 39 characters (.c-footer__text)
footer-inner-2: inner group (.c-footer__inner-2)
footer-text-2: label text, 153 characters (.c-footer__text-2, 13 instances)
footer-link: link, 26-character label (.c-footer__link)
footer-column-2: inner flex row (.c-footer__column-2)
footer-columns-2: inner grid (.c-footer__columns-2, 4 instances)
footer-text-3: label text, 7 characters (.c-footer__text-3, 4 instances)
footer-list: inner flex column (.c-footer__list, 4 instances)
footer-item: inner flex row (.c-footer__item, 23 instances)
footer-link-2: link, 5-character label (.c-footer__link-2, 24 instances)
footer-group-2: inner group (.c-footer__group-2, 5 instances)
footer-text-4: label text, 9 characters (.c-footer__text-4, 6 instances)
footer-item-2: inner flex row (.c-footer__item-2)
footer-logo: icon placeholder, 14x15px (.c-footer__logo)
footer-group-3: inner block (.c-footer__group-3)
footer-columns-3: inner flex row (.c-footer__columns-3)
footer-link-3: link (.c-footer__link-3)
footer-group-4: inner group (.c-footer__group-4)
footer-text-5: label text, 22 characters (.c-footer__text-5)
footer-inner-3: inner flex column (.c-footer__inner-3)
footer-columns-4: inner flex row (.c-footer__columns-4)
footer-link-4: link, 14-character label (.c-footer__link-4, 5 instances)

Desktop recipe

HTML · CSS

<div class="c-footer-scope">
  <footer class="c-footer">
    <div class="c-footer__inner">
      <div class="c-footer__columns">
        <div class="c-footer__column">
          <div class="c-footer__group">
            <span class="c-footer__image" aria-hidden="true"></span>
            <span class="c-footer__text">lorem ipsum dolor sit amet consectetur</span>
          </div>
          <p class="c-footer__inner-2">
            <span class="c-footer__text-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor</span>
            <a class="c-footer__link" href="#">lorem ipsum dolor sit amet</a>
            <span class="c-footer__text-2">l</span>
          </p>
        </div>
        <div class="c-footer__column-2">
          <div class="c-footer__columns-2">
            <span class="c-footer__text-3">lorem i</span>
            <ul class="c-footer__list">
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lorem</a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lore</a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lorem i</a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lorem ip</a>
              </li>
            </ul>
          </div>
          <div class="c-footer__columns-2">
            <span class="c-footer__text-3">lorem ips</span>
            <ul class="c-footer__list">
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lore</a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lorem ips</a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lorem i</a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lorem ipsum dolo</a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lore</a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lorem ip</a>
              </li>
            </ul>
          </div>
          <div class="c-footer__columns-2">
            <span class="c-footer__text-3">lorem ips</span>
            <ul class="c-footer__list">
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">
                  <span class="c-footer__group-2"></span>
                  <span class="c-footer__text-2">lorem i</span>
                </a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">
                  <span class="c-footer__group-2"></span>
                  <span class="c-footer__text-2">lorem</span>
                </a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">
                  <span class="c-footer__group-2"></span>
                  <span class="c-footer__text-2">lorem</span>
                </a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">
                  <span class="c-footer__group-2"></span>
                  <span class="c-footer__text-2">lorem ip</span>
                </a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">
                  <span class="c-footer__group-2"></span>
                  <span class="c-footer__text-2">lorem i</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="c-footer__columns-2">
            <span class="c-footer__text-3">lorem ipsu</span>
            <ul class="c-footer__list">
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">
                  <span class="c-footer__text-2">lore</span>
                  <span class="c-footer__text-4">lorem ips</span>
                </a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">
                  <span class="c-footer__text-2">lore</span>
                  <span class="c-footer__text-4">lorem ips</span>
                </a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">
                  <span class="c-footer__text-2">lorem ips</span>
                  <span class="c-footer__text-4">lorem ips</span>
                </a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">
                  <span class="c-footer__text-2">lorem ips</span>
                  <span class="c-footer__text-4">lorem ips</span>
                </a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">
                  <span class="c-footer__text-2">lorem</span>
                  <span class="c-footer__text-4">lorem ips</span>
                </a>
              </li>
              <li class="c-footer__item-2">
                <a class="c-footer__link-2" href="#">
                  <span class="c-footer__text-2">lorem</span>
                  <span class="c-footer__text-4">lorem ips</span>
                  <span class="c-footer__logo" aria-hidden="true"></span>
                </a>
              </li>
              <li class="c-footer__item">
                <a class="c-footer__link-2" href="#">lorem ipsum</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="c-footer__group-3">
      <div class="c-footer__columns-3">
        <a class="c-footer__link-3" href="#">
          <span class="c-footer__group-4"></span>
          <span class="c-footer__text-5">lorem ipsum dolor sit</span>
        </a>
        <div class="c-footer__inner-3">
          <p class="c-footer__columns-4">
            <a class="c-footer__link-4" href="#">lorem ipsum do</a>
            <a class="c-footer__link-4" href="#">lorem ipsum</a>
            <a class="c-footer__link-4" href="#">lorem ipsum dolor s</a>
            <a class="c-footer__link-4" href="#">lorem ipsum dolor sit am</a>
            <a class="c-footer__link-4" href="#">lorem ipsum dolor</a>
          </p>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #303236;
}

.c-footer__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1856px;
  position: relative;
  padding-top: 32px;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer__columns {
  display: flex;
  justify-content: space-between;
  column-gap: 40px;
  box-sizing: border-box;
}

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

.c-footer__group {
  display: block;
  box-sizing: border-box;
  margin-bottom: auto;
}

.c-footer__image {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 177px;
  height: 28px;
  max-width: 100%;
  aspect-ratio: auto 177 / 28;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer__text {
  display: block;
  box-sizing: border-box;
  color: #94979E;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: -0.26px;
  margin-top: 14px;
}

.c-footer__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 584px;
  margin: 0px;
  color: #61646B;
  font-size: 13px;
  line-height: 17.875px;
  letter-spacing: -0.26px;
}

.c-footer__link {
  display: inline;
  box-sizing: border-box;
  color: #61646B;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #61646B;
}

.c-footer__column-2 {
  display: flex;
  column-gap: 88px;
  box-sizing: border-box;
  width: fit-content;
}

.c-footer__columns-2 {
  display: grid;
  row-gap: 28px;
  box-sizing: border-box;
}

.c-footer__text-3 {
  display: block;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
  text-transform: uppercase;
}

.c-footer__list {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer__item {
  display: flex;
  box-sizing: border-box;
  min-width: 148px;
  padding-top: 1px;
  padding-bottom: 1px;
  margin-top: -1px;
  margin-bottom: -1px;
}

.c-footer__link-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  color: #AFB1B6;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  line-height: 15px;
  letter-spacing: -0.3px;
  text-decoration-line: none;
  white-space: nowrap;
  padding-top: 1px;
  padding-bottom: 1px;
  margin-top: -1px;
  margin-bottom: -1px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer__group-2 {
  display: block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background-color: #AFB1B6;
  margin-right: 10px;
}

.c-footer__text-4 {
  display: block;
  box-sizing: border-box;
  color: #61646B;
  padding-top: 1px;
  padding-bottom: 1px;
  margin-left: 6px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-footer__item-2 {
  display: flex;
  box-sizing: border-box;
  min-width: 148px;
  position: relative;
  padding-top: 1px;
  padding-bottom: 1px;
  margin-top: -1px;
  margin-bottom: -1px;
}

.c-footer__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 15px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  opacity: 0.8;
  margin-left: 2px;
}

.c-footer__group-3 {
  display: block;
  box-sizing: border-box;
  padding-top: 32px;
  padding-bottom: 32px;
  margin-top: 40px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #18191B;
}

.c-footer__columns-3 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  box-sizing: border-box;
  max-width: 1856px;
  position: relative;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer__link-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 6px;
  box-sizing: border-box;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer__group-4 {
  display: block;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  background-color: #797D86;
  border-radius: 3.35544e+07px;
}

.c-footer__text-5 {
  display: block;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.28px;
  white-space: nowrap;
}

.c-footer__inner-3 {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 856px;
  color: #94979E;
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: -0.3px;
}

.c-footer__columns-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  line-height: 15px;
}

.c-footer__link-4 {
  display: block;
  box-sizing: border-box;
  color: #AFB1B6;
  cursor: pointer;
  text-decoration-line: none;
}

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

.c-footer__link-2:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

.c-footer__link-3:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

.c-footer__link-4:hover {
  color: #FFFFFF;
}

.c-footer__link-4:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

Mobile anatomy

footer-mobile: the component root, a <footer> (.c-footer-mobile)
footer-mobile-group: inner block (.c-footer-mobile__group)
footer-mobile-group-2: inner flex row (.c-footer-mobile__group-2)
footer-mobile-group-3: inner flex column (.c-footer-mobile__group-3)
footer-mobile-group-4: inner block (.c-footer-mobile__group-4)
footer-mobile-logo: image placeholder, 152x24px (.c-footer-mobile__logo)
footer-mobile-text: label text, 39 characters (.c-footer-mobile__text)
footer-mobile-inner: label text, 0 characters (.c-footer-mobile__inner)
footer-mobile-text-2: label text, 153 characters (.c-footer-mobile__text-2, 3 instances)
footer-mobile-group-5: inner block (.c-footer-mobile__group-5)
footer-mobile-group-6: inner flex column (.c-footer-mobile__group-6)
footer-mobile-link: link (.c-footer-mobile__link)
footer-mobile-group-7: inner group (.c-footer-mobile__group-7)
footer-mobile-text-3: label text, 22 characters (.c-footer-mobile__text-3)
footer-mobile-inner-2: inner flex column (.c-footer-mobile__inner-2)
footer-mobile-columns: inner flex row (.c-footer-mobile__columns)
footer-mobile-link-2: link, 14-character label (.c-footer-mobile__link-2, 5 instances)

Mobile recipe

HTML · CSS

<div class="c-footer-mobile-scope">
  <footer class="c-footer-mobile">
    <div class="c-footer-mobile__group">
      <div class="c-footer-mobile__group-2">
        <div class="c-footer-mobile__group-3">
          <div class="c-footer-mobile__group-4">
            <span class="c-footer-mobile__logo" aria-hidden="true"></span>
            <span class="c-footer-mobile__text">lorem ipsum dolor sit amet consectetur</span>
          </div>
          <p class="c-footer-mobile__inner">
            <span class="c-footer-mobile__text-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor</span>
            <span class="c-footer-mobile__text-2">lorem ipsum dolor sit amet</span>
            <span class="c-footer-mobile__text-2">l</span>
          </p>
        </div>
      </div>
    </div>
    <div class="c-footer-mobile__group-5">
      <div class="c-footer-mobile__group-6">
        <a class="c-footer-mobile__link" href="#">
          <span class="c-footer-mobile__group-7"></span>
          <span class="c-footer-mobile__text-3">lorem ipsum dolor sit</span>
        </a>
        <div class="c-footer-mobile__inner-2">
          <p class="c-footer-mobile__columns">
            <a class="c-footer-mobile__link-2" href="#">lorem ipsum do</a>
            <a class="c-footer-mobile__link-2" href="#">lorem ipsum</a>
            <a class="c-footer-mobile__link-2" href="#">lorem ipsum dolor s</a>
            <a class="c-footer-mobile__link-2" href="#">lorem ipsum dolor sit am</a>
            <a class="c-footer-mobile__link-2" href="#">lorem ipsum dolor</a>
          </p>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-mobile-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-footer-mobile {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #303236;
}

.c-footer-mobile__group {
  display: block;
  box-sizing: border-box;
  position: relative;
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-mobile__group-2 {
  display: flex;
  justify-content: space-between;
  column-gap: 40px;
  box-sizing: border-box;
}

.c-footer-mobile__group-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-mobile__group-4 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 44px;
}

.c-footer-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 152px;
  height: 24px;
  max-width: 100%;
  aspect-ratio: auto 177 / 28;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-mobile__text {
  display: block;
  box-sizing: border-box;
  color: #94979E;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: -0.26px;
  margin-top: 12px;
}

.c-footer-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 584px;
  margin: 0px;
  color: #61646B;
  font-size: 13px;
  line-height: 17.875px;
  letter-spacing: -0.26px;
}

.c-footer-mobile__group-5 {
  display: block;
  box-sizing: border-box;
  padding-bottom: 32px;
  margin-top: 16px;
}

.c-footer-mobile__group-6 {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-mobile__link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 6px;
  box-sizing: border-box;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-mobile__group-7 {
  display: block;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  background-color: #797D86;
  border-radius: 3.35544e+07px;
}

.c-footer-mobile__text-3 {
  display: block;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: -0.28px;
  white-space: nowrap;
}

.c-footer-mobile__inner-2 {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  box-sizing: border-box;
  width: 100%;
  max-width: 448px;
  color: #94979E;
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: -0.3px;
}

.c-footer-mobile__columns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  margin: 0px;
  line-height: 15px;
}

.c-footer-mobile__link-2 {
  display: block;
  box-sizing: border-box;
  color: #AFB1B6;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-mobile__link:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

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

.c-footer-mobile__link-2:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

States

footer-link-2 hover (footer-link-2-hover): color #FFFFFF
footer-link-2 focus: outline 2px solid #38A57D, outline-offset 2px
footer-link-3 focus: outline 2px solid #38A57D, outline-offset 2px
footer-link-4 hover (footer-link-4-hover): color #FFFFFF
footer-link-4 focus: outline 2px solid #38A57D, outline-offset 2px
mobile, footer-mobile-link focus: outline 2px solid #38A57D, outline-offset 2px
mobile, footer-mobile-link-2 hover (footer-mobile-link-2-hover): color #FFFFFF
mobile, footer-mobile-link-2 focus: outline 2px solid #38A57D, outline-offset 2px

Button, primary

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

Anatomy

button-primary: the component root, a <button> (.c-button-primary)
button-primary-icon: icon placeholder, 18px (.c-button-primary__icon)

Recipe

HTML · CSS

<div class="c-button-primary-scope">
  <button class="c-button-primary" type="button">
    <span class="c-button-primary__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-primary-scope {
  background-color: #13141599;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-primary {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 6px;
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  background-color: #FFFFFF;
  color: #0C0D0D;
  border: 0;
  border-radius: 3.35544e+07px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-button-primary__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

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

.c-button-primary:focus {
  outline: none;
}

States

hover (button-primary-hover): background-color #C9CBCF
focus: outline none

Button, ghost (4)

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

Anatomy

button-ghost-4: the component root, a <button> (.c-button-ghost-4)
button-ghost-4-label: label text, 9 characters (.c-button-ghost-4__label)
button-ghost-4-icon: icon placeholder, 14x15px (.c-button-ghost-4__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-4-scope">
  <button class="c-button-ghost-4" type="button">
    <span class="c-button-ghost-4__label">lorem ips</span>
    <span class="c-button-ghost-4__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-4-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-button-ghost-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-button-ghost-4::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 110px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: -17.5px;
  left: 0px;
}

.c-button-ghost-4__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 15px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  opacity: 0.6;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-ghost-4:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

States

focus: outline 2px solid #38A57D, outline-offset 2px

Input

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

Anatomy

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

Recipe

HTML · CSS

<div class="c-input-scope">
  <input class="c-input" type="email" placeholder="lorem ipsum d">
</div>

.c-input-scope {
  background-color: #13141599;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-input {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 199px;
  height: 38px;
  padding: 0px 48px 0px 16px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #13141599;
  color: #FFFFFF;
  border: 1px solid #303236;
  border-radius: 3.35544e+07px;
  backdrop-filter: blur(16px);
  cursor: text;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
  letter-spacing: -0.26px;
  text-transform: none;
  text-align: start;
  appearance: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-input:focus {
  border: 1px solid #797D86;
  outline: none;
}

States

focus: border 1px solid #797D86, outline none

Verification: flagged, the navigation-group y did not reproduce the measured 42px after 2 correction attempts.

Anatomy

navigation: the component root, a <nav> (.c-navigation)
navigation-list: inner flex row (.c-navigation__list)
navigation-item: inner group (.c-navigation__item, 3 instances)
navigation-button: button (.c-navigation__button)
navigation-text: label text, 7 characters (.c-navigation__text, 3 instances)
navigation-icon: icon placeholder, 14x15px (.c-navigation__icon, 3 instances)
navigation-button-2: button (.c-navigation__button-2)
navigation-link: link, 4-character label (.c-navigation__link, 2 instances)
navigation-button-3: button (.c-navigation__button-3)
navigation-group: inner block (.c-navigation__group)
navigation-group-2: inner block (.c-navigation__group-2)
navigation-group-active: inner block (.c-navigation__group-active)
navigation-group-3: inner flex row (.c-navigation__group-3), content not captured

Recipe

HTML · CSS

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <ul class="c-navigation__list">
      <li class="c-navigation__item">
        <button class="c-navigation__button" type="button">
          <span class="c-navigation__text">lorem i</span>
          <span class="c-navigation__icon" aria-hidden="true"></span>
        </button>
      </li>
      <button class="c-navigation__button-2" type="button">
        <span class="c-navigation__text">lorem ips</span>
        <span class="c-navigation__icon" aria-hidden="true"></span>
      </button>
      <a class="c-navigation__link" href="#">lore</a>
      <li class="c-navigation__item">
        <a class="c-navigation__link" href="#">lorem i</a>
      </li>
      <li class="c-navigation__item">
        <button class="c-navigation__button-3" type="button">
          <span class="c-navigation__text">lorem ips</span>
          <span class="c-navigation__icon" aria-hidden="true"></span>
        </button>
      </li>
    </ul>
    <div class="c-navigation__group">
      <div class="c-navigation__group-2">
        <div class="c-navigation__group-active">
          <div class="c-navigation__group-3"></div>
        </div>
      </div>
    </div>
  </nav>
</div>

.c-navigation-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-navigation__list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-navigation__item {
  display: list-item;
  box-sizing: border-box;
}

.c-navigation__button {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #AFB1B6;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  appearance: button;
  margin-left: -14px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-navigation__button::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0.015625px;
  bottom: -17.5px;
  left: 0px;
}

.c-navigation__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 15px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  opacity: 0.6;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-navigation__button-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #AFB1B6;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  appearance: button;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-navigation__button-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 110px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: -17.5px;
  left: 0px;
}

.c-navigation__link {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  position: relative;
  color: #AFB1B6;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-decoration-line: none;
  text-align: center;
  white-space: pre;
  padding-right: 14px;
  padding-left: 14px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-navigation__button-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 4px;
  box-sizing: border-box;
  padding: 0px 14px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 15px;
  font-weight: 400;
  line-height: 22.5px;
  letter-spacing: -0.15px;
  text-transform: none;
  text-align: center;
  white-space: pre;
  appearance: button;
  margin-right: -14px;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-navigation__button-3::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 119px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: -17.5px;
  left: 0px;
}

.c-navigation__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 449px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 40;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #000000;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: -1px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #303236;
}

.c-navigation__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-navigation__group-active {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-navigation__group-3 {
  display: flex;
  column-gap: 160px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1856px;
  padding: 28px 32px 80px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-right: auto;
  margin-left: auto;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

share-button: the component root, a <button> (.c-share-button)
share-button-icon: icon placeholder, 16px (.c-share-button__icon)

Recipe

HTML · CSS

<div class="c-share-button-scope">
  <button class="c-share-button" type="button">
    <span class="c-share-button__icon" aria-hidden="true"></span>
  </button>
</div>

.c-share-button-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.c-share-button {
  display: inline-flex;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  font-family: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-share-button__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-share-button:focus {
  outline: 2px solid #38A57D;
  outline-offset: 2px;
}

States

focus: outline 2px solid #38A57D, outline-offset 2px

Button, primary (2)

Verification: verified against the live page at desktop.

Anatomy

button-primary-2: the component root, a <button> (.c-button-primary-2)
button-primary-2-group: inner flex row (.c-button-primary-2__group)
button-primary-2-group-2: inner flex row (.c-button-primary-2__group-2)
button-primary-2-label: label text, 14 characters (.c-button-primary-2__label)

Recipe

HTML · CSS

<div class="c-button-primary-2-scope">
  <button class="c-button-primary-2" type="button">
    <div class="c-button-primary-2__group">
      <div class="c-button-primary-2__group-2">
        <span class="c-button-primary-2__label">lorem ipsum do</span>
      </div>
    </div>
  </button>
</div>

.c-button-primary-2-scope {
  background-color: #242429;
  color: #96979E;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
}

.c-button-primary-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: 100px;
  max-width: 100%;
  max-height: min-content;
  padding: 0px;
  position: relative;
  background-color: #5865F2;
  color: #FFFFFF;
  border: 1px solid #FFFFFF14;
  border-radius: 8px;
  opacity: 0.5;
  cursor: pointer;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.05s, 0.05s, 0.05s, 0.05s;
  transition-timing-function: ease-in, ease-in, ease-in, ease-in;
  transition-property: background-color, color, border-color, opacity;
}

.c-button-primary-2__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 38px;
  min-height: 38px;
  padding: 7px 15px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 8px;
}

.c-button-primary-2__group-2 {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: hidden;
  overflow-y: hidden;
  transform: matrix(1, 0, 0, 1, 0, 0);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: ease-out, ease-out;
  transition-property: opacity, transform;
}

.c-button-primary-2__label {
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
}

.c-button-primary-2:focus {
  outline: none;
}

States

focus: outline none

Button, ghost (5)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-5: the component root, a <button> (.c-button-ghost-5)
button-ghost-5-label: label text, 31 characters (.c-button-ghost-5__label)

Recipe

HTML · CSS

<div class="c-button-ghost-5-scope">
  <button class="c-button-ghost-5" type="button">
    <span class="c-button-ghost-5__label">lorem ipsum dolor sit amet cons</span>
  </button>
</div>

.c-button-ghost-5-scope {
  background-color: #242429;
  color: #96979E;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
}

.c-button-ghost-5 {
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: min-content;
  max-width: 100%;
  padding: 0px;
  background-color: transparent;
  color: #798DF9;
  border: 0;
  cursor: pointer;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
}

.c-button-ghost-5__label {
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-ghost-5:focus {
  outline: none;
}

States

focus: outline none

Input (2)

Verification: flagged, the input-2 width did not reproduce the measured 414px after 2 correction attempts.

Anatomy

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

Recipe

HTML · CSS

<div class="c-input-2-scope">
  <input class="c-input-2" type="text" placeholder="lorem ipsum dolor sit amet con">
</div>

.c-input-2-scope {
  background-color: #0000001F;
  color: #EFEFF1;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-input-2 {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 414px;
  height: 38px;
  min-width: 30%;
  padding: 1px 12px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #EFEFF1;
  border: 0;
  cursor: text;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
}

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

.c-input-2:focus {
  min-height: 0px;
  outline: none;
}

States

hover: min-height 0px
focus: min-height 0px, outline none

Input (3)

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

Anatomy

input-3: the component root, a <button> (.c-input-3)
input-3-group: inner group (.c-input-3__group)
input-3-icon: icon placeholder, 20px (.c-input-3__icon)

Recipe

HTML · CSS

<div class="c-input-3-scope">
  <button class="c-input-3" type="button">
    <span class="c-input-3__group">
      <span class="c-input-3__icon" aria-hidden="true"></span>
    </span>
  </button>
</div>

.c-input-3-scope {
  background-color: #0000001F;
  color: #EFEFF1;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
}

.c-input-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 36px;
  padding: 0px 4px 0px 0px;
  background-color: transparent;
  color: #FBFBFB;
  border: 0;
  cursor: pointer;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.3333px;
  font-weight: 500;
  line-height: 0px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-input-3__group {
  display: block;
  width: 20px;
  height: 20px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition: transform 0.2s ease-out;
}

.c-input-3__icon {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-input-3:focus {
  outline: none;
}

States

focus: outline none

Checkbox

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

<div class="c-checkbox-scope">
  <input class="c-checkbox" type="text" placeholder="lorem ips">
</div>

.c-checkbox-scope {
  background-color: #242429;
  color: #96979E;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-checkbox {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  padding: 0px;
  margin: 3px 3px 3px 4px;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: default;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  white-space: nowrap;
}

.c-checkbox:focus {
  outline: none;
}

States

focus: outline none

Do's and Don'ts

Do

Do build every page on canvas #000000. Raise panels with surface #0C0D0D or surface-raised #18191B, and separate chrome with 1px hairline #303236. This is what header-group-4, nav-group and footer do.
Do use only weights 400 and 500 from the type ladder, with 600 reserved for 12px footer column headings (footer-text-3).
Do track Inter negative at display sizes (about -4%: hero-display -2.24px, display-lg -1.92px, title-lg -1.12px). Leave body, code and mono-stat at normal.
Do build hierarchy with gray steps. Use ink for primary text, muted #AFB1B6 for resting links that brighten to #FFFFFF on hover (footer-link-2, button-ghost-2), and subtle #797D86 for two-tone heading lead-ins (section-heading-title).
Do give every focusable element the primary-focus ring: 2px solid #38A57D at 2px offset, as on header-cta, footer-link-2 and share-button.
Do keep the white high-emphasis CTA pattern:
- Fill #FFFFFF with #000000 on-primary text, hovering to body #C9CBCF (header-cta-5).
- The outlined sibling uses a 1px solid #61646B border that turns #FFFFFF on hover (header-cta-4).
Do keep the frosted input treatment: blur(16px) over #13141599 with a #303236 border that shifts to #797D86 on focus.
Do separate sections with the 128px vertical rhythm (section-padding-y).

Don't

Don't flood surfaces with primary #34D59A. It is an accent for text and small emphasis, not a button or section background.
Don't use primary-focus #38A57D for anything but focus rings.
Don't describe or rebuild the system as flat. Cards carry the #FFFFFF0D 0px 0px 0px 1px ring, and floating layers use rgba(0, 0, 0, 0.4) 0px 8px 20px 0px.
Don't add colored or glowing CSS shadows. Glow belongs to imagery.
Don't introduce CSS gradients on buttons or panels.
Don't round cards and code panels into soft pills. Keep content containers crisp (rounded.xs) and pills (rounded.full) for actions.
Don't import #5865F2, #798DF9 or the "gg sans" family from button-primary-2 / button-ghost-5. They belong to the captured Discord page.
Don't set headlines in bold. Use hero-display at 400 and the two-tone gray technique instead.

Responsive Behavior

Scope

This analysis is two-viewport only (one desktop and one mobile capture). No breakpoint values were observed, so none are stated.

What Changes on Mobile

Header: shrinks from 64px (header) to 56px (header-mobile). The inline nav collapses into a hamburger, and the logo icon keeps its 102x28px size (header-mobile-logo-icon).
Announcement bar: truncates rather than wrapping.
Sections: collapse to a single column. Headlines shrink but stay large and tightly tracked.
Feature cards: the side-by-side row becomes a horizontal scroller instead of stacking.
Footer:
- Compresses from 430px (footer) to 337px (footer-mobile).
- Groups stack with a 40px gap (footer-mobile-gap).
- The inner column is capped at 448px (footer-mobile-inner-max-width).
- The footer logo shrinks to 152x24px (footer-mobile-logo).
Blog pages: the sticky table of contents gives way to the single reading column.

Touch Targets

Measured control heights are small:

Control	Height
Ghost buttons and nav triggers (`button-ghost`)	23px
`button-primary`	30px
`input`	38px

On touch layouts, add padding around ghost links and icon buttons to reach a comfortable hit area without changing their visual size.

Iteration Guide

Reference tokens, never raw hex.
- Text steps go through ink → body → muted → subtle → faint.
- Surfaces go through canvas → surface → surface-raised.
- Borders use hairline.
- If a new gray seems necessary, pick the nearest existing step instead.
Keep primary (#34D59A) rare and keep it accent-only. Focus is always primary-focus as a 2px outline at 2px offset. Mint callouts use primary-tint on the green-black #0D221A panel pattern from section-heading-3.
Add type only by reusing ladder tokens (hero-display, title-lg, body-lg, label-strong, …).
- Any new size must use weight 400 or 500, with negative tracking near -4% for display or -2% for small text.
- Mono is for numbers, code and eyebrows only.
Elevation escalates in a fixed order: tonal surface, then hairline, then the 1px #FFFFFF0D ring, then a black soft shadow for floating layers only, then blur(16px) for translucent controls. Never skip to a drop shadow for a static card.
Radius rule: content containers and links use rounded.xs; CTA buttons and chips use rounded.full. Don't invent intermediate radii for new components.
Button variants live in the header recipes.
- White fill: header-cta-5 and button-primary.
- Outlined: header-cta-4.
- Ghost gray-to-white: button-ghost-2 and nav-button.
- Derive new buttons from these. Ignore button-primary-2, button-ghost-5, input-2, input-3 and checkbox, which come from the Discord page.
Preserve rhythm and composition. Sections are separated by section-padding-y. Desktop layouts stay left-aligned with numbered mono eyebrows. Mobile collapses to one column with horizontal scrollers for card rows.

Known Gaps

Third-party contamination

The https://neon.com/discord capture rendered Discord's invite UI. These recipes reflect Discord, not Neon, and the grounded rule about an 8px button radius and the #5865F2 primary fill comes only from that page:
- button-primary-2 (#5865F2, gg sans, 8px radius, 40px tall)
- button-ghost-5
- input-2 (flagged: the input-2 width did not reproduce the measured 414px after 2 correction attempts)
- input-3 (flagged: the render matched 84% of the original pixels, below the 97% required on focus after 2 correction attempts)
- checkbox

Flagged Neon components

These components did not reproduce exactly:

button-primary (flagged: the render matched 27% of the original pixels, below the 97% required after 2 correction attempts). Its pill radius and label typography were not captured.
button-ghost, button-ghost-2, button-ghost-3 and button-ghost-4 (flagged: renders matched 90–92% of the original pixels, below the 97% required on focus after 2 correction attempts).
card (flagged: the card-body height did not reproduce the measured 68px after 2 correction attempts).
card-2 (flagged: the render came out 20 px taller than the original (instance 3) after 2 correction attempts).
nav and navigation (flagged: the group y did not reproduce the measured 42px after 2 correction attempts). nav-group-3 content was not captured.
header (flagged: the header-nav y did not reproduce the measured 814px after 2 correction attempts), likely an open mega-menu state.
header-mobile (flagged: the header-mobile-nav y did not reproduce the measured 758px after 2 correction attempts).
footer (flagged: the footer-text-3 height did not reproduce the measured 12px after 2 correction attempts).
input (flagged: the render matched 78% of the original pixels, below the 97% required after 2 correction attempts).

Unmeasured values

States: card hover and focus states are listed but carry no measured values. Mega-menu dropdown contents and the hamburger menu's open state were not measured.
Radii: the radius of the pill CTAs (header-cta-4, header-cta-5) was not measured on the recipe. Pill usage comes from the screenshots and the page-level rounded.full frequency.
Spacing: no base spacing unit, page container max width or desktop grid gutter was verified.
Breakpoints: responsive behavior is inferred from two viewports only, so no breakpoint values are known.
Accent usage: highlight #FFED9C and primary-tint #CAE6DC were each seen on a single page, so their full usage rules are uncertain.
Shadows: the two soft drop shadows were each observed once and could not be tied to a named component.

Not captured at all

Animation and motion, including any hero imagery motion and transition timings.
Authenticated surfaces such as the Neon console.
Gradient imagery, which was treated as artwork rather than tokens.

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

More like this

Browse all

Developer & Infrastructure · Developer Tools & IDEs

Railway

Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono / SF Mono serve code contexts. Elevation is achieved through inset white-glow borders (rgba(255,255,255,0.2) 1.5px inset) rather than drop shadows, giving the UI a glass-panel aesthetic. The spacing system is 4px-based with a strong 8/12/16/24/32 rhythm. Border radii are tight (4px dominant) with selective 8px and 16px for cards and hero containers.

Developer & Infrastructure · Developer Tools & IDEs

Supabase

Supabase uses a dark-first design system anchored by a deep near-black background (oklch ~0.19) with a vivid green brand accent (#3ecf8e / #3fcf8e). The layout is structured around a responsive feature card grid, with Manrope for display headings and Inter for body/UI text. Source Code Pro handles all monospace/code contexts. The color system is built on oklch custom properties with semantic naming. Cards use 12px radius with subtle border treatment, buttons use 6–8px radius, and the overall density is moderate with an 8px base spacing grid.

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.

Software & SaaS · Productivity & Notes

Notion

Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements. Brand blue (#2537b1) drives CTAs and accent highlights, while a semantic gray-scale ladder (gray-200 through gray-900) structures all text and surface hierarchy.

Business & Professional Services

Shopify

Shopify's marketing homepage uses a dramatic full-bleed video hero with a near-black (#02090a) background that contrasts sharply with the white navigation bar above. The primary brand accent is a vivid mint green (#36f4a4) used sparingly for highlights and interactive states. Typography is split between NeueHaasGrotesk for display/editorial headings and Inter-Variable for UI body copy. CTAs use fully-rounded pill shapes (border-radius: 9999px). The overall system is confident, high-contrast, and aspirational — built to convert visitors into merchants.

Neon Design System

Button7

Card2

Extra7

Header2

Footer2

Input3

Overview

Colors

Brand & Accent

Surface

Text

Hairlines & Borders

Component & State Colors

Gradients

Typography

Font Family

Hierarchy

Principles

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Components

Button, ghost

Button, ghost (2)

Button, ghost (3)

Card

Card (2)

Section heading

Section heading (2)

Section heading (3)

Nav

Header

Footer

Button, primary

Button, ghost (4)

Input

Navigation

Share buttons

Button, primary (2)

Button, ghost (5)

Input (2)

Input (3)

Checkbox

Do's and Don'ts

Do

Don't

Responsive Behavior

Scope

What Changes on Mobile

Touch Targets

Iteration Guide

Known Gaps

Third-party contamination

Flagged Neon components

Unmeasured values

Not captured at all

More like this

Railway

Supabase

Airbnb

IKEA

Notion

Shopify