Neon Designsystem

PROEngine v4

Das Designsystem von Neon ist eine dunkel-zentrierte Entwickler-Marke, aufgebaut auf einer nahezu schwarzen Fläche (#000000, #18191b) mit einer leuchtenden neongrünen Primärfarbe (#00e599) und einem unterstützenden mittleren Grün (#34d59a). Das typografische System kombiniert Inter (UI/Fließtext) mit GeistMono (Code/Daten), beide mit engem negativem Buchstabenabstand. Der Abstand folgt einem 4px-Raster. Der Eckenradius ist durchgängig minimal bei 4px. Erhebung entsteht über Rahmenkontraste statt über Schatten, mit einem einzigen, sparsam eingesetzten weichen Schlagschatten. Der Hero-Bereich zeigt einen randlos gestalteten, animierten Hintergrund mit Datenvisualisierung, der die Markenidentität rund um Datenbank und Infrastruktur unterstreicht.

Visuelles System

100 % Konfidenz

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

footer-mobile-gap
40px

section-padding-y
128px

footer-mobile-inner-max-width
448px

100 % Konfidenz

xs · 4px

sm · 5px

md · 8px

lg · 10px

xl · 16px

full · 9999px

Komponenten

Buttons7

92 % Übereinstimmung

ghost · desktop

Bei Fokus entspricht es der Website zu 92 % und liegt damit unter der Schwelle von 97 %.

Ruhezustand100 % Übereinstimmung35 Messwerte stimmen überein

Original

Render

Fokus92 % Übereinstimmung18 Messwerte stimmen überein

Original

Render

Rezept in der DESIGN.md

90 % Übereinstimmung

ghost · desktop

Bei Fokus entspricht es der Website zu 90 % und liegt damit unter der Schwelle von 97 %.

Ruhezustand100 % Übereinstimmung35 Messwerte stimmen überein

Original

Render

Hover100 % Übereinstimmung18 Messwerte stimmen überein

Original

Render

Fokus90 % Übereinstimmung18 Messwerte stimmen überein

Original

Render

Rezept in der DESIGN.md

91 % Übereinstimmung

ghost · desktop

Bei Fokus entspricht es der Website zu 91 % und liegt damit unter der Schwelle von 97 %.

Ruhezustand100 % Übereinstimmung35 Messwerte stimmen überein

Original

Render

Hover100 % Übereinstimmung18 Messwerte stimmen überein

Original

Render

Fokus91 % Übereinstimmung18 Messwerte stimmen überein

Original

Render

Rezept in der DESIGN.md

90 % Übereinstimmung

ghost · desktop

Bei Fokus entspricht es der Website zu 90 % und liegt damit unter der Schwelle von 97 %.

Ruhezustand100 % Übereinstimmung35 Messwerte stimmen überein

Original

Render

Fokus90 % Übereinstimmung18 Messwerte stimmen überein

Original

Render

Rezept in der DESIGN.md

100 % Übereinstimmung

ghost · desktop

Ruhezustand100 % Übereinstimmung23 Messwerte stimmen überein

Original

Render

Fokus100 % Übereinstimmung18 Messwerte stimmen überein

Original

Render

Rezept in der DESIGN.md

27 % Übereinstimmung

primary · desktop

Es entspricht der Website zu 27 % und liegt damit unter der Schwelle von 97 %.

Ruhezustand27 % Übereinstimmung34 Messwerte stimmen überein

Original

Render

Hover27 % Übereinstimmung18 Messwerte stimmen überein

Original

Render

Fokus27 % Übereinstimmung18 Messwerte stimmen überein

Original

Render

Rezept in der DESIGN.md

100 % Übereinstimmung

primary · desktop

Ruhezustand100 % Übereinstimmung68 Messwerte stimmen überein

Original

Render

Fokus100 % Übereinstimmung22 Messwerte stimmen überein

Original

Render

Rezept in der DESIGN.md

Cards2

100 % Übereinstimmung

desktop

Body height ist 90px, die Website hat 68px; Text 2 y ist 23px, die Website hat 0px und 2 weitere.

Ruhezustand100 % Übereinstimmung4 von 80 Messwerten weichen ab

Original von Card auf der Website, ruhezustand — Original

Isolierter Render von Card, ruhezustand — Render

Hover100 % Übereinstimmung18 Messwerte stimmen überein

Original von Card auf der Website, hover — Original

Isolierter Render von Card, hover — Render

Fokus100 % Übereinstimmung18 Messwerte stimmen überein

Original von Card auf der Website, fokus — Original

Isolierter Render von Card, fokus — Render

Ruhezustand, Instanz 2100 % Übereinstimmung4 von 80 Messwerten weichen ab

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Ruhezustand, Instanz 3100 % Übereinstimmung4 von 80 Messwerten weichen ab

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Rezept in der DESIGN.md

100 % Übereinstimmung

desktop

Es entspricht der Website zu 100 % und liegt damit unter der Schwelle von 96 %.

Ruhezustand100 % Übereinstimmung41 Messwerte stimmen überein

Original von Card (2) auf der Website, ruhezustand — Original

Isolierter Render von Card (2), ruhezustand — Render

Hover100 % Übereinstimmung18 Messwerte stimmen überein

Original von Card (2) auf der Website, hover — Original

Isolierter Render von Card (2), hover — Render

Fokus100 % Übereinstimmung18 Messwerte stimmen überein

Original von Card (2) auf der Website, fokus — Original

Isolierter Render von Card (2), fokus — Render

Ruhezustand, Instanz 2100 % Übereinstimmung41 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Ruhezustand, Instanz 3100 % Übereinstimmung41 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Rezept in der DESIGN.md

Extras7

100 % Übereinstimmung

desktop

Ruhezustand100 % Übereinstimmung22 Messwerte stimmen überein

Original

Render

Fokus100 % Übereinstimmung18 Messwerte stimmen überein

Original

Render

Rezept in der DESIGN.md

100 % Übereinstimmung

desktop

Group y ist 1329px, die Website hat 42px; Group 2 x ist -16px, die Website hat -226px und 5 weitere.

Ruhezustand100 % Übereinstimmung7 von 328 Messwerten weichen ab

Original

Render

Rezept in der DESIGN.md

100 % Übereinstimmung

desktop

Group y ist 1329px, die Website hat 42px; Group 2 x ist -16px, die Website hat -226px und 5 weitere.

Ruhezustand100 % Übereinstimmung7 von 328 Messwerten weichen ab

Original von Navigation auf der Website, ruhezustand — Original

Isolierter Render von Navigation, ruhezustand — Render

Rezept in der DESIGN.md

100 % Übereinstimmung

desktop

Ruhezustand100 % Übereinstimmung46 Messwerte stimmen überein

Original von Section heading auf der Website, ruhezustand — Original

Isolierter Render von Section heading, ruhezustand — Render

Rezept in der DESIGN.md

100 % Übereinstimmung

desktop

Ruhezustand100 % Übereinstimmung46 Messwerte stimmen überein

Original von Section heading (2) auf der Website, ruhezustand — Original

Isolierter Render von Section heading (2), ruhezustand — Render

Rezept in der DESIGN.md

100 % Übereinstimmung

desktop

Ruhezustand100 % Übereinstimmung130 Messwerte stimmen überein

Original von Section heading (3) auf der Website, ruhezustand — Original

Isolierter Render von Section heading (3), ruhezustand — Render

Rezept in der DESIGN.md

100 % Übereinstimmung

desktop

Ruhezustand100 % Übereinstimmung34 Messwerte stimmen überein

Original

Render

Fokus100 % Übereinstimmung18 Messwerte stimmen überein

Original

Render

Rezept in der DESIGN.md

Headers2

93 % Übereinstimmung

desktop

Nav y ist 834px, die Website hat 814px.

Ruhezustand93 % Übereinstimmung1 von 611 Messwerten weichen ab

Original von Header auf der Website, ruhezustand — Original

Isolierter Render von Header, ruhezustand — Render

Hovernicht geprüft

Original von Header auf der Website, hover — Original

Isolierter Render von Header, hover — Render

Fokusnicht geprüft

Original von Header auf der Website, fokus — Original

Isolierter Render von Header, fokus — Render

Fokus an cta 293 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Fokus an cta 393 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Fokus an cta 493 % Übereinstimmung22 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Hover an cta 493 % Übereinstimmung22 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Fokus an cta 593 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Hover an cta 593 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Fokus an cta93 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Fokus an link93 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Hover an link93 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Fokus an logo93 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Fokus an nav link93 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Rezept in der DESIGN.md

92 % Übereinstimmung

mobile

Nav y ist 778px, die Website hat 758px.

Ruhezustand92 % Übereinstimmung1 von 158 Messwerten weichen ab

Fokusnicht geprüft

Fokus an logo92 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Rezept in der DESIGN.md

Footers2

99 % Übereinstimmung

desktop

Text 3 height ist 53px, die Website hat 12px; List y ist 114px, die Website hat 73px und 51 weitere.

Ruhezustand99 % Übereinstimmung53 von 1682 Messwerten weichen ab

Original von Footer auf der Website, ruhezustand — Original

Isolierter Render von Footer, ruhezustand — Render

Hovernicht geprüft

Original von Footer auf der Website, hover — Original

Isolierter Render von Footer, hover — Render

Fokusnicht geprüft

Original von Footer auf der Website, fokus — Original

Isolierter Render von Footer, fokus — Render

Fokus an link 299 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Hover an link 299 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Fokus an link 399 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Fokus an link 4100 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Hover an link 499 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Rezept in der DESIGN.md

98 % Übereinstimmung

mobile

Ruhezustand98 % Übereinstimmung347 Messwerte stimmen überein

Hovernicht geprüft

Fokusnicht geprüft

Fokus an link 298 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Hover an link 298 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Fokus an link98 % Übereinstimmung18 Messwerte stimmen überein

Original

Kein Bild gespeichert

Render

Kein Bild gespeichert

Rezept in der DESIGN.md

Inputs3

78 % Übereinstimmung

desktop

Es entspricht der Website zu 78 % und liegt damit unter der Schwelle von 97 %.

Ruhezustand78 % Übereinstimmung26 Messwerte stimmen überein

Original von Input auf der Website, ruhezustand — Original

Isolierter Render von Input, ruhezustand — Render

Fokus78 % Übereinstimmung22 Messwerte stimmen überein

Original von Input auf der Website, fokus — Original

Isolierter Render von Input, fokus — Render

Rezept in der DESIGN.md

93 % Übereinstimmung

desktop

Wurzelelement width ist 422px, die Website hat 414px.

Ruhezustand99 % Übereinstimmung1 von 22 Messwerten weichen ab

Original von Input (2) auf der Website, ruhezustand — Original

Isolierter Render von Input (2), ruhezustand — Render

Hover99 % Übereinstimmung18 Messwerte stimmen überein

Original von Input (2) auf der Website, hover — Original

Isolierter Render von Input (2), hover — Render

Fokus93 % Übereinstimmung18 Messwerte stimmen überein

Original von Input (2) auf der Website, fokus — Original

Isolierter Render von Input (2), fokus — Render

Rezept in der DESIGN.md

84 % Übereinstimmung

desktop

Bei Fokus entspricht es der Website zu 84 % und liegt damit unter der Schwelle von 97 %.

Ruhezustand100 % Übereinstimmung56 Messwerte stimmen überein

Original

Render

Fokus84 % Übereinstimmung18 Messwerte stimmen überein

Original

Render

Rezept in der DESIGN.md

DESIGN.md

Neon

Overview

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

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

Hierarchy comes from three levers, in this order:

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

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

Key Characteristics:

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

Colors

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

Brand & Accent

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

Surface

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

Text

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

Hairlines & Borders

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

Component & State Colors

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

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

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

Gradients

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

Typography

Font Family

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

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

Hierarchy

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

Principles

Weights.

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

Tracking.

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

Line height.

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

Two-tone headlines.

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

Layout

Spacing System

Three spacing tokens were measured:

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

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

Grid & Container

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

Whitespace Philosophy

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

Measured Layout

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

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

Elevation & Depth

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

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

Shapes

Border Radius Scale

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

Where rounded.xs (4px) is measured:

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

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

The geometry is deliberately mixed.

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

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

Components

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

Buttons

Button, ghost

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

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost)
button-ghost-label: label text, 7 characters (.c-button-ghost__label)
button-ghost-icon: icon placeholder, 14x15px (.c-button-ghost__icon)

Recipe

HTML · CSS

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

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

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

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

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

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

States

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

Button, ghost (2)

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

States

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

Button, ghost (3)

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

States

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

Button, primary

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

States

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

Button, ghost (4)

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

States

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

Button, primary (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

States

focus: outline none

Button, ghost (5)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

States

focus: outline none

Cards

Card

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

States

hover: opacity 1
focus: opacity 1

Card (2)

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

States

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

Section headings

Section heading

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

States

No hover or focus change was observed.

Section heading (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

States

No hover or focus change was observed.

Section heading (3)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

States

No hover or focus change was observed.

Nav

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

States

No hover or focus change was observed.

Header

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

Anatomy

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

Desktop recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mobile anatomy

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

Mobile recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

States

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

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

Anatomy

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

Desktop recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mobile anatomy

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

Mobile recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

States

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

Inputs

Input

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

States

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

Input (2)

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

States

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

Input (3)

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

States

focus: outline none

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

States

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

Checkbox

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

States

focus: outline none

Do's and Don'ts

Do

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

Don't

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

Responsive Behavior

Scope

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

What Changes on Mobile

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

Touch Targets

Measured control heights are small:

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

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

Iteration Guide

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

Known Gaps

Third-party contamination

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

Flagged Neon components

These components did not reproduce exactly:

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

Unmeasured values

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

Not captured at all

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

Diese DESIGN.md-Datei ist auf Englisch, der Sprache, in der KI-Coding-Agenten sie lesen.

Extrahiert aus der öffentlichen Website von Neon, keine offiziellen Markenrichtlinien. Schriften einer anderen Website prüfen

Neon Designsystem

Komponenten

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

Ähnliche Einträge

Railway

Supabase

Airbnb

IKEA

Notion

Shopify

Andere Websites mit Inter