Neon 设计系统

PRO引擎 v4

Neon 的设计系统以深色为先，是一个面向开发者的品牌。页面以近黑色底色为主（#000000、#18191b），搭配醒目的霓虹绿主色（#00e599）和中间层级的绿色辅助色（#34d59a）。排版体系将 Inter 用于界面与正文，GeistMono 用于代码与数据，两者都采用紧凑的负字间距。间距遵循 4px 基础网格。圆角统一保持在极简的 4px。层级主要通过边框对比来体现，而非阴影，仅偶尔使用一层环境投影。首屏区域采用铺满整个画布的动态数据可视化背景，进一步强化了其数据库与基础设施的品牌形象。

视觉系统

100% 置信度

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% 置信度

footer-mobile-gap
40px

section-padding-y
128px

footer-mobile-inner-max-width
448px

100% 置信度

xs · 4px

sm · 5px

md · 8px

lg · 10px

xl · 16px

full · 9999px

组件

Buttons7

92% 匹配度

ghost · desktop

聚焦时，它的渲染与网站的相似度为 92%，低于 97% 的标准。

默认匹配度 100%35 项测量全部一致

原始

渲染

聚焦匹配度 92%18 项测量全部一致

原始

渲染

DESIGN.md 中的配方

90% 匹配度

ghost · desktop

聚焦时，它的渲染与网站的相似度为 90%，低于 97% 的标准。

默认匹配度 100%35 项测量全部一致

原始

渲染

悬停匹配度 100%18 项测量全部一致

原始

渲染

聚焦匹配度 90%18 项测量全部一致

原始

渲染

DESIGN.md 中的配方

91% 匹配度

ghost · desktop

聚焦时，它的渲染与网站的相似度为 91%，低于 97% 的标准。

默认匹配度 100%35 项测量全部一致

原始

渲染

悬停匹配度 100%18 项测量全部一致

原始

渲染

聚焦匹配度 91%18 项测量全部一致

原始

渲染

DESIGN.md 中的配方

90% 匹配度

ghost · desktop

聚焦时，它的渲染与网站的相似度为 90%，低于 97% 的标准。

默认匹配度 100%35 项测量全部一致

原始

渲染

聚焦匹配度 90%18 项测量全部一致

原始

渲染

DESIGN.md 中的配方

100% 匹配度

ghost · desktop

默认匹配度 100%23 项测量全部一致

原始

渲染

聚焦匹配度 100%18 项测量全部一致

原始

渲染

DESIGN.md 中的配方

27% 匹配度

primary · desktop

它的渲染与网站的相似度为 27%，低于 97% 的标准。

默认匹配度 27%34 项测量全部一致

原始

渲染

悬停匹配度 27%18 项测量全部一致

原始

渲染

聚焦匹配度 27%18 项测量全部一致

原始

渲染

DESIGN.md 中的配方

100% 匹配度

primary · desktop

默认匹配度 100%68 项测量全部一致

原始

渲染

聚焦匹配度 100%22 项测量全部一致

原始

渲染

DESIGN.md 中的配方

Cards2

100% 匹配度

desktop

Body 的 height 为 90px，网站上为 68px; Text 2 的 y 为 23px，网站上为 0px，另有 2 项。

默认匹配度 100%80 项测量中有 4 项不同

悬停匹配度 100%18 项测量全部一致

聚焦匹配度 100%18 项测量全部一致

默认，实例 2匹配度 100%80 项测量中有 4 项不同

原始

没有存储图片

渲染

没有存储图片

默认，实例 3匹配度 100%80 项测量中有 4 项不同

原始

没有存储图片

渲染

没有存储图片

DESIGN.md 中的配方

100% 匹配度

desktop

它的渲染与网站的相似度为 100%，低于 96% 的标准。

默认匹配度 100%41 项测量全部一致

悬停匹配度 100%18 项测量全部一致

聚焦匹配度 100%18 项测量全部一致

默认，实例 2匹配度 100%41 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

默认，实例 3匹配度 100%41 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

DESIGN.md 中的配方

Extras7

100% 匹配度

desktop

默认匹配度 100%22 项测量全部一致

原始

渲染

聚焦匹配度 100%18 项测量全部一致

原始

渲染

DESIGN.md 中的配方

100% 匹配度

desktop

Group 的 y 为 1329px，网站上为 42px; Group 2 的 x 为 -16px，网站上为 -226px，另有 5 项。

默认匹配度 100%328 项测量中有 7 项不同

原始

渲染

DESIGN.md 中的配方

100% 匹配度

desktop

Group 的 y 为 1329px，网站上为 42px; Group 2 的 x 为 -16px，网站上为 -226px，另有 5 项。

默认匹配度 100%328 项测量中有 7 项不同

DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%46 项测量全部一致

DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%46 项测量全部一致

DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%130 项测量全部一致

DESIGN.md 中的配方

100% 匹配度

desktop

默认匹配度 100%34 项测量全部一致

原始

渲染

聚焦匹配度 100%18 项测量全部一致

原始

渲染

DESIGN.md 中的配方

Headers2

93% 匹配度

desktop

Nav 的 y 为 834px，网站上为 814px。

默认匹配度 93%611 项测量中有 1 项不同

悬停未检查

聚焦未检查

cta 2 上的聚焦匹配度 93%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

cta 3 上的聚焦匹配度 93%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

cta 4 上的聚焦匹配度 93%22 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

cta 4 上的悬停匹配度 93%22 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

cta 5 上的聚焦匹配度 93%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

cta 5 上的悬停匹配度 93%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

cta 上的聚焦匹配度 93%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

link 上的聚焦匹配度 93%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

link 上的悬停匹配度 93%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

logo 上的聚焦匹配度 93%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

nav link 上的聚焦匹配度 93%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

DESIGN.md 中的配方

92% 匹配度

mobile

Nav 的 y 为 778px，网站上为 758px。

默认匹配度 92%158 项测量中有 1 项不同

聚焦未检查

logo 上的聚焦匹配度 92%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

DESIGN.md 中的配方

Footers2

99% 匹配度

desktop

Text 3 的 height 为 53px，网站上为 12px; List 的 y 为 114px，网站上为 73px，另有 51 项。

默认匹配度 99%1682 项测量中有 53 项不同

悬停未检查

聚焦未检查

link 2 上的聚焦匹配度 99%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

link 2 上的悬停匹配度 99%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

link 3 上的聚焦匹配度 99%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

link 4 上的聚焦匹配度 100%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

link 4 上的悬停匹配度 99%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

DESIGN.md 中的配方

98% 匹配度

mobile

默认匹配度 98%347 项测量全部一致

悬停未检查

聚焦未检查

link 2 上的聚焦匹配度 98%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

link 2 上的悬停匹配度 98%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

link 上的聚焦匹配度 98%18 项测量全部一致

原始

没有存储图片

渲染

没有存储图片

DESIGN.md 中的配方

Inputs3

78% 匹配度

desktop

它的渲染与网站的相似度为 78%，低于 97% 的标准。

默认匹配度 78%26 项测量全部一致

聚焦匹配度 78%22 项测量全部一致

DESIGN.md 中的配方

93% 匹配度

desktop

根元素的 width 为 422px，网站上为 414px。

默认匹配度 99%22 项测量中有 1 项不同

悬停匹配度 99%18 项测量全部一致

聚焦匹配度 93%18 项测量全部一致

DESIGN.md 中的配方

84% 匹配度

desktop

聚焦时，它的渲染与网站的相似度为 84%，低于 97% 的标准。

默认匹配度 100%56 项测量全部一致

原始

渲染

聚焦匹配度 84%18 项测量全部一致

原始

渲染

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.

Buttons

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

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

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

Cards

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 headings

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

Inputs

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

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

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

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.

这份 DESIGN.md 文件使用英文，因为 AI 编程智能体以英文读取它。

提取自 Neon 的公开网站，并非官方品牌规范。查看其他网站的字体

相似示例

浏览全部

开发者与基础设施 · Developer Tools & IDEs

Railway

Railway 的设计系统是一套以深色为主的开发者平台界面，底色是近乎黑色的深海军蓝（#13111c、#0b0b0f），文字采用高对比度的米白色（#f7f7f8），品牌强调色为独特的紫色（#853bce / #553f83）。首屏使用 IBM Plex Serif 呈现编辑式的厚重感，界面文案统一使用 Inter，代码场景则使用 JetBrains Mono 与 SF Mono。层级关系主要依靠内嵌的白色发光描边（rgba(255,255,255,0.2) 1.5px inset）来实现，而非投影，使界面呈现玻璃面板般的质感。间距系统以 4px 为基础，节奏紧凑而明确，常用 8/12/16/24/32。圆角普遍较小，以 4px 为主，卡片与首屏容器则有选择地使用 8px 和 16px。

开发者与基础设施 · Developer Tools & IDEs

Supabase

Supabase 采用以深色为先的设计系统，以接近纯黑的深色背景（oklch 约 0.19）为基底，搭配鲜明的绿色品牌强调色（#3ecf8e / #3fcf8e）。版面以响应式功能卡片网格组织，展示型标题使用 Manrope，正文与界面文字使用 Inter。所有等宽字体与代码场景均采用 Source Code Pro。色彩体系基于 oklch 自定义属性构建，并采用语义化命名。卡片圆角为 12px，边框处理较为柔和；按钮圆角为 6–8px。整体信息密度适中，基础间距遵循 8px 网格。

旅行、交通与物流

Airbnb

Airbnb 的设计系统以一款专有的可变字体（Airbnb Cereal VF）为核心，配色接近单色的中性色调，以深炭色（#222222）和浅灰色为基调。品牌标志性的珊瑚粉色"Rausch"（#ff385c）仅用于主要行动按钮和标志。布局采用响应式图片卡片网格，图片与文字的比例宽松，卡片带有 20px 的柔和圆角，并通过多层环境阴影营造细微的层次感，避免强烈的明暗对比。搜索栏是一个醒目的胶囊形容器，统一了用户的核心操作。

电商与零售 · E-commerce Store

IKEA

IKEA的全球首页采用大胆、扁平的设计系统，以标志性的IKEA黄色（#ffdb00）作为主要操作区域，并以IKEA蓝色（#0058a3）作为品牌标识的点缀色。整个字体体系基于一款定制字体Noto IKEA构建，使用400和700两种字重，字号等级划分严谨，从14px的正文到51px的展示标题。层级主要通过色彩对比和版面结构来体现，而非依靠阴影。版面采用最大宽度为90rem的容器，桌面端网格间距为1.5rem，交互元素统一应用8px的圆角。米白色背景（#fffefb）与纯粹的#111111文字形成温和对比，营造出高对比度、易于阅读的无障碍浏览体验。

软件与 SaaS · Productivity & Notes

Notion

Notion 营销首页以深海军蓝（#02093a）的首屏区块搭配浅色（#f6f5f4）的主体背景，所有文字层级统一使用定制字体 NotionInter。设计采用 12 栏网格，栏间距为 28px，圆角体系兼顾两种规格：卡片使用 8px，药丸形按钮使用 9999px。浮层元素则采用多层递进式阴影系统。品牌蓝（#2537b1）用于行动按钮与重点强调，从 gray-200 到 gray-900 的语义化灰阶则负责所有文字与背景面的层级划分。

商业与专业服务

Shopify

Shopify 营销首页采用极具冲击力的全幅视频主视觉，近黑色背景（#02090a）与上方白色导航栏形成鲜明对比。品牌主色为醒目的薄荷绿（#36f4a4），克制地用于高亮和交互状态。字体分工明确：展示与编辑类标题使用 NeueHaasGrotesk，界面正文使用 Inter-Variable。CTA 按钮采用全圆角药丸形（border-radius: 9999px）。整体风格自信、高对比、充满憧憬，旨在将访客转化为商家。

Neon 设计系统

组件

Buttons7

Cards2

Extras7

Headers2

Footers2

Inputs3

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

Buttons

Cards

Section headings

Nav

Header

Footer

Inputs

Navigation

Share buttons

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

相似示例

Railway

Supabase

Airbnb

IKEA

Notion

Shopify

其他使用 Inter 的网站