Neon Tasarım Sistemi

PROMotor v4

Neon'un tasarım sistemi, koyu temayı öncelikleyen bir geliştirici markası olarak, neredeyse siyah bir zemin (#000000, #18191b) üzerine kuruludur. Ana vurgu rengi canlı neon yeşil (#00e599), destekleyici renk ise orta tonlu yeşildir (#34d59a). Tipografi sisteminde arayüz ve gövde metinleri için Inter, kod ve veri gösterimleri için GeistMono kullanılır; her ikisinde de harf aralığı sıkı tutulmuştur. Boşluklar 4 piksellik temel ızgaraya göre belirlenir. Köşe yuvarlaklığı her yerde minimum düzeyde, 4 pikseldir. Yükseklik hissi gölgelerle değil, kenarlık kontrastıyla yaratılır; tek bir ortam gölgesi ise seyrek kullanılır. Hero bölümünde, veritabanı ve altyapı odaklı marka kimliğini pekiştiren, tam genişlikte animasyonlu bir veri görselleştirme arka planı yer alır.

Görsel sistem

%100 güven

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 güven

footer-mobile-gap
40px

section-padding-y
128px

footer-mobile-inner-max-width
448px

%100 güven

xs · 4px

sm · 5px

md · 8px

lg · 10px

xl · 16px

full · 9999px

Bileşenler

Buttons7

%92 eşleşme

ghost · desktop

Focus durumunda, siteye %92 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%100 eşleşme35 ölçüm eşleşiyor

Orijinal

Render

Focus%92 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%90 eşleşme

ghost · desktop

Focus durumunda, siteye %90 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%100 eşleşme35 ölçüm eşleşiyor

Orijinal

Render

Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

Focus%90 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%91 eşleşme

ghost · desktop

Focus durumunda, siteye %91 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%100 eşleşme35 ölçüm eşleşiyor

Orijinal

Render

Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

Focus%91 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%90 eşleşme

ghost · desktop

Focus durumunda, siteye %90 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%100 eşleşme35 ölçüm eşleşiyor

Orijinal

Render

Focus%90 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

ghost · desktop

Durağan%100 eşleşme23 ölçüm eşleşiyor

Orijinal

Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%27 eşleşme

primary · desktop

Siteye %27 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%27 eşleşme34 ölçüm eşleşiyor

Orijinal

Render

Hover%27 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

Focus%27 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

primary · desktop

Durağan%100 eşleşme68 ölçüm eşleşiyor

Orijinal

Render

Focus%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

Cards2

%100 eşleşme

desktop

Body height değeri 90px, sitede ise 68px; Text 2 y değeri 23px, sitede ise 0px ve 2 tane daha.

Durağan%100 eşleşme80 ölçümden 4 tanesi farklı

Sitedeki orijinal Card, durağan — Orijinal

Hover%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card, hover — Orijinal

Focus%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card, focus — Orijinal

Durağan, örnek 2%100 eşleşme80 ölçümden 4 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme80 ölçümden 4 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Siteye %100 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%100 eşleşme41 ölçüm eşleşiyor

Sitedeki orijinal Card (2), durağan — Orijinal

Card (2) için ayrı render, durağan — Render

Hover%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card (2), hover — Orijinal

Card (2) için ayrı render, hover — Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card (2), focus — Orijinal

Card (2) için ayrı render, focus — Render

Durağan, örnek 2%100 eşleşme41 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme41 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Extras7

%100 eşleşme

desktop

Durağan%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Group y değeri 1329px, sitede ise 42px; Group 2 x değeri -16px, sitede ise -226px ve 5 tane daha.

Durağan%100 eşleşme328 ölçümden 7 tanesi farklı

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Group y değeri 1329px, sitede ise 42px; Group 2 x değeri -16px, sitede ise -226px ve 5 tane daha.

Durağan%100 eşleşme328 ölçümden 7 tanesi farklı

Sitedeki orijinal Navigation, durağan — Orijinal

Navigation için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme46 ölçüm eşleşiyor

Sitedeki orijinal Section heading, durağan — Orijinal

Section heading için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme46 ölçüm eşleşiyor

Sitedeki orijinal Section heading (2), durağan — Orijinal

Section heading (2) için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme130 ölçüm eşleşiyor

Sitedeki orijinal Section heading (3), durağan — Orijinal

Section heading (3) için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme34 ölçüm eşleşiyor

Orijinal

Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

Headers2

%93 eşleşme

desktop

Nav y değeri 834px, sitede ise 814px.

Durağan%93 eşleşme611 ölçümden 1 tanesi farklı

Sitedeki orijinal Header, durağan — Orijinal

Header için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Header, hover — Orijinal

Focuskontrol edilmedi

Sitedeki orijinal Header, focus — Orijinal

cta 2 üzerinde Focus%93 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta 3 üzerinde Focus%93 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta 4 üzerinde Focus%93 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta 4 üzerinde Hover%93 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta 5 üzerinde Focus%93 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta 5 üzerinde Hover%93 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta üzerinde Focus%93 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Focus%93 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Hover%93 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

logo üzerinde Focus%93 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

nav link üzerinde Focus%93 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%92 eşleşme

mobile

Nav y değeri 778px, sitede ise 758px.

Durağan%92 eşleşme158 ölçümden 1 tanesi farklı

Focuskontrol edilmedi

logo üzerinde Focus%92 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Footers2

%99 eşleşme

desktop

Text 3 height değeri 53px, sitede ise 12px; List y değeri 114px, sitede ise 73px ve 51 tane daha.

Durağan%99 eşleşme1682 ölçümden 53 tanesi farklı

Sitedeki orijinal Footer, durağan — Orijinal

Footer için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Footer, hover — Orijinal

Focuskontrol edilmedi

Sitedeki orijinal Footer, focus — Orijinal

link 2 üzerinde Focus%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link 2 üzerinde Hover%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link 3 üzerinde Focus%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link 4 üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link 4 üzerinde Hover%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%98 eşleşme

mobile

Durağan%98 eşleşme347 ölçüm eşleşiyor

Hoverkontrol edilmedi

Focuskontrol edilmedi

link 2 üzerinde Focus%98 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link 2 üzerinde Hover%98 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Focus%98 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Inputs3

%78 eşleşme

desktop

Siteye %78 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%78 eşleşme26 ölçüm eşleşiyor

Sitedeki orijinal Input, durağan — Orijinal

Input için ayrı render, durağan — Render

Focus%78 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal Input, focus — Orijinal

DESIGN.md içindeki tarif

%93 eşleşme

desktop

Kök width değeri 422px, sitede ise 414px.

Durağan%99 eşleşme22 ölçümden 1 tanesi farklı

Sitedeki orijinal Input (2), durağan — Orijinal

Input (2) için ayrı render, durağan — Render

Hover%99 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Input (2), hover — Orijinal

Input (2) için ayrı render, hover — Render

Focus%93 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Input (2), focus — Orijinal

Input (2) için ayrı render, focus — Render

DESIGN.md içindeki tarif

%84 eşleşme

desktop

Focus durumunda, siteye %84 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%100 eşleşme56 ölçüm eşleşiyor

Orijinal

Render

Focus%84 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

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.

Bu DESIGN.md dosyası, AI kodlama ajanlarının onu okuduğu dil olan İngilizcedir.

Neon web sitesinin herkese açık sayfalarından çıkarıldı, resmi marka yönergeleri değildir. Başka bir sitenin fontlarını kontrol et

Benzerleri

Tümüne göz at

Geliştirici ve Altyapı · Developer Tools & IDEs

Railway

Railway'in tasarım sistemi, derin, neredeyse siyah lacivert yüzeylere (#13111c, #0b0b0f) dayanan, karanlık temalı öncelikli bir geliştirici platformu arayüzüdür. Yüksek kontrastlı kırık beyaz metin (#f7f7f8) ve belirgin bir mor marka vurgusu (#853bce / #553f83) kullanır. Kahraman bölümünde editoryal bir ağırlık için IBM Plex Serif kullanılır; tüm arayüz metinleri Inter ile yazılır, kod alanlarında ise JetBrains Mono ve SF Mono tercih edilir. Yükseklik hissi gölge yerine, rgba(255,255,255,0.2) 1.5px inset beyaz parıltılı kenarlıklarla sağlanır; bu da arayüze cam panel estetiği kazandırır. Boşluk sistemi 4px temellidir ve 8/12/16/24/32 ritmiyle sıkı bir düzen izler. Köşe yuvarlaklıkları dar tutulur: baskın olan 4px'tir, kartlar ve kahraman kapsayıcılarında ise seçici olarak 8px ve 16px kullanılır.

Geliştirici ve Altyapı · Developer Tools & IDEs

Supabase

Supabase, koyu öncelikli bir tasarım sistemi kullanır; temel olarak neredeyse siyaha yakın derin bir arka plan (oklch ~0.19) ve canlı bir yeşil marka vurgusu (#3ecf8e / #3fcf8e) üzerine kuruludur. Düzen, duyarlı bir özellik kartı ızgarası etrafında yapılandırılmıştır; başlıklarda Manrope, gövde ve arayüz metinlerinde Inter kullanılır. Source Code Pro ise tüm sabit genişlikli yazı ve kod alanlarını karşılar. Renk sistemi, anlamsal adlandırılmış oklch özel özelliklerine dayanır. Kartlarda 12px köşe yuvarlaklığı ve ince kenarlık kullanılırken, düğmelerde 6–8px yuvarlaklık tercih edilir; genel yoğunluk orta düzeydedir ve 8px temel boşluk ızgarası esas alınır.

Seyahat, Ulaşım ve Lojistik

Airbnb

Airbnb'nin tasarım sistemi, tek bir özel değişken yazı tipi (Airbnb Cereal VF) etrafında kurulmuş. Renk paleti neredeyse tek renkli; derin kömür grisi (#222222) ve açık gri tonlar bu paletin omurgasını oluşturuyor. Markanın imza rengi olan "Rausch" mercan-pembesi (#ff385c) yalnızca birincil eylem düğmeleri ve logo için ayrılmış. Yerleşim, geniş görsel-metin oranlarına sahip, duyarlı bir fotoğraf kartı ızgarası. Kartlarda 20px yumuşak köşe yuvarlaması var; sert bir kontrast yaratmadan ince bir derinlik veren çok katmanlı ortam gölge sistemi kullanılıyor. Arama çubuğu, temel kullanıcı eylemini bir araya getiren, dikkat çekici hap şeklinde bir kapsayıcı.

Ticaret ve Perakende · E-commerce Store

IKEA

IKEA'nın küresel ana sayfası, birincil eylem yüzeyi olarak ikonik IKEA Sarısı'nı (#ffdb00) ve marka logosundaki vurgu rengi olarak IKEA Mavisi'ni (#0058a3) kullanan, cesur ve düz bir tasarım sistemine dayanıyor. Tüm tipografik sistem, 14px gövde metninden 51px görüntü başlıklarına uzanan sıkı tanımlı bir ölçek üzerinde, 400 ve 700 ağırlıklarını kapsayan tek bir özel yazı tipi olan Noto IKEA üzerine kurulu. Yükseklik hissi gölge yerine tamamen renk kontrastı ve yerleşim yapısıyla sağlanıyor. Düzen, 90rem maksimum genişlikli bir kapsayıcı ve masaüstünde 1.5rem ızgara boşluğu kullanıyor; etkileşimli öğelerde tutarlı şekilde 8px köşe yarıçapı tokenı uygulanıyor. Saf #111111 metin rengiyle buluşan #fffefb kırık beyaz arka plan sıcaklık katarak yüksek kontrastlı ve erişilebilir bir okuma deneyimi yaratıyor.

Yazılım ve SaaS · Productivity & Notes

Notion

Notion'ın pazarlama ana sayfası, koyu lacivert (#02093a) bir kahraman bölümünü açık (#f6f5f4) bir gövdeyle birleştirir ve tüm metin rolleri için özel bir yazı tipi (NotionInter) kullanır. Tasarım, 28px oluklu 12 sütunlu bir ızgara, kartlar için 8px ve haplar için 9999px olmak üzere çift köşe yarıçapı dili ve yüzen arayüz öğeleri için çok katmanlı kademeli bir gölge sistemi kullanır. Marka mavisi (#2537b1) CTA'ları ve vurgu noktalarını yönlendirir; anlamsal gri tonları basamağı (gray-200'den gray-900'e) tüm metin ve yüzey hiyerarşisini düzenler.

İş ve Profesyonel Hizmetler

Shopify

Shopify'ın pazarlama ana sayfası, üstteki beyaz gezinme çubuğuyla keskin bir kontrast oluşturan, tam genişlikte ve dramatik bir video kahraman alanına sahip. Arka plan neredeyse siyah (#02090a). Birincil marka vurgusu canlı bir nane yeşili (#36f4a4) ve bu renk vurgulamalarda ve etkileşimli durumlarda ölçülü biçimde kullanılıyor. Tipografi, görünen başlık ve editoryal metinler için NeueHaasGrotesk, arayüz gövde metinleri için ise Inter-Variable arasında bölünmüş. Eylem çağrıları (CTA) tamamen yuvarlatılmış hap şeklinde (border-radius: 9999px). Genel sistem özgüven veren, yüksek kontrastlı ve ilham verici; ziyaretçileri satıcıya dönüştürmek üzere tasarlanmış.

Neon Tasarım Sistemi

Bileşenler

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

Benzerleri

Railway

Supabase

Airbnb

IKEA

Notion

Shopify

Inter kullanan diğer siteler