Design system Neon

PROSilnik v4

System designu Neon to ciemna marka dla deweloperów, oparta na prawie czarnym tle (#000000, #18191b) z intensywnym neonowym zielonym kolorem podstawowym (#00e599) i uzupełniającym średnim zielonym (#34d59a). System typograficzny łączy Inter (interfejs i tekst podstawowy) z GeistMono (kod i dane), obie z ciasnym ujemnym odstępem między literami. Odstępy opierają się na siatce 4 px. Promień zaokrąglenia jest jednolicie minimalny, wynosi 4 px. Hierarchię warstw buduje kontrast obramowań, a nie cienie; pojedynczy, delikatny cień otoczenia pojawia się oszczędnie. Sekcja hero ma pełnoekranowe, animowane tło z wizualizacją danych, które wzmacnia tożsamość marki związanej z bazami danych i infrastrukturą.

System wizualny

100% pewność

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% pewność

footer-mobile-gap
40px

section-padding-y
128px

footer-mobile-inner-max-width
448px

100% pewność

xs · 4px

sm · 5px

md · 8px

lg · 10px

xl · 16px

full · 9999px

Komponenty

Buttons7

92% zgodność

ghost · desktop

Przy focus, zgodność renderu ze stroną to 92%, poniżej progu 97%.

SpoczynekZgodność 100%Zgodne pomiary: 35

Oryginał

Render

FocusZgodność 92%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

90% zgodność

ghost · desktop

Przy focus, zgodność renderu ze stroną to 90%, poniżej progu 97%.

SpoczynekZgodność 100%Zgodne pomiary: 35

Oryginał

Render

HoverZgodność 100%Zgodne pomiary: 18

Oryginał

Render

FocusZgodność 90%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

91% zgodność

ghost · desktop

Przy focus, zgodność renderu ze stroną to 91%, poniżej progu 97%.

SpoczynekZgodność 100%Zgodne pomiary: 35

Oryginał

Render

HoverZgodność 100%Zgodne pomiary: 18

Oryginał

Render

FocusZgodność 91%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

90% zgodność

ghost · desktop

Przy focus, zgodność renderu ze stroną to 90%, poniżej progu 97%.

SpoczynekZgodność 100%Zgodne pomiary: 35

Oryginał

Render

FocusZgodność 90%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

ghost · desktop

SpoczynekZgodność 100%Zgodne pomiary: 23

Oryginał

Render

FocusZgodność 100%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

27% zgodność

primary · desktop

Zgodność renderu ze stroną to 27%, poniżej progu 97%.

SpoczynekZgodność 27%Zgodne pomiary: 34

Oryginał

Render

HoverZgodność 27%Zgodne pomiary: 18

Oryginał

Render

FocusZgodność 27%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

primary · desktop

SpoczynekZgodność 100%Zgodne pomiary: 68

Oryginał

Render

FocusZgodność 100%Zgodne pomiary: 22

Oryginał

Render

Receptura w DESIGN.md

Cards2

100% zgodność

desktop

Body height: 90px, na stronie 68px; Text 2 y: 23px, na stronie 0px i jeszcze 2.

SpoczynekZgodność 100%Różne pomiary: 4 z 80

Oryginalny Card na stronie, spoczynek — Oryginał

HoverZgodność 100%Zgodne pomiary: 18

Oryginalny Card na stronie, hover — Oryginał

FocusZgodność 100%Zgodne pomiary: 18

Oryginalny Card na stronie, focus — Oryginał

Spoczynek, wystąpienie 2Zgodność 100%Różne pomiary: 4 z 80

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 100%Różne pomiary: 4 z 80

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

Zgodność renderu ze stroną to 100%, poniżej progu 96%.

SpoczynekZgodność 100%Zgodne pomiary: 41

Oryginalny Card (2) na stronie, spoczynek — Oryginał

Osobny render: Card (2), spoczynek — Render

HoverZgodność 100%Zgodne pomiary: 18

Oryginalny Card (2) na stronie, hover — Oryginał

FocusZgodność 100%Zgodne pomiary: 18

Oryginalny Card (2) na stronie, focus — Oryginał

Spoczynek, wystąpienie 2Zgodność 100%Zgodne pomiary: 41

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 100%Zgodne pomiary: 41

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

Extras7

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 22

Oryginał

Render

FocusZgodność 100%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

desktop

Group y: 1329px, na stronie 42px; Group 2 x: -16px, na stronie -226px i jeszcze 5.

SpoczynekZgodność 100%Różne pomiary: 7 z 328

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

desktop

Group y: 1329px, na stronie 42px; Group 2 x: -16px, na stronie -226px i jeszcze 5.

SpoczynekZgodność 100%Różne pomiary: 7 z 328

Oryginalny Navigation na stronie, spoczynek — Oryginał

Osobny render: Navigation, spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 46

Oryginalny Section heading na stronie, spoczynek — Oryginał

Osobny render: Section heading, spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 46

Oryginalny Section heading (2) na stronie, spoczynek — Oryginał

Osobny render: Section heading (2), spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 130

Oryginalny Section heading (3) na stronie, spoczynek — Oryginał

Osobny render: Section heading (3), spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 34

Oryginał

Render

FocusZgodność 100%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

Headers2

93% zgodność

desktop

Nav y: 834px, na stronie 814px.

SpoczynekZgodność 93%Różne pomiary: 1 z 611

Oryginalny Header na stronie, spoczynek — Oryginał

Osobny render: Header, spoczynek — Render

Hoverniesprawdzony

Oryginalny Header na stronie, hover — Oryginał

Focusniesprawdzony

Oryginalny Header na stronie, focus — Oryginał

Focus na cta 2Zgodność 93%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na cta 3Zgodność 93%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na cta 4Zgodność 93%Zgodne pomiary: 22

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na cta 4Zgodność 93%Zgodne pomiary: 22

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na cta 5Zgodność 93%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na cta 5Zgodność 93%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na ctaZgodność 93%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na linkZgodność 93%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na linkZgodność 93%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na logoZgodność 93%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na nav linkZgodność 93%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

92% zgodność

mobile

Nav y: 778px, na stronie 758px.

SpoczynekZgodność 92%Różne pomiary: 1 z 158

Focusniesprawdzony

Focus na logoZgodność 92%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

Footers2

99% zgodność

desktop

Text 3 height: 53px, na stronie 12px; List y: 114px, na stronie 73px i jeszcze 51.

SpoczynekZgodność 99%Różne pomiary: 53 z 1682

Oryginalny Footer na stronie, spoczynek — Oryginał

Osobny render: Footer, spoczynek — Render

Hoverniesprawdzony

Oryginalny Footer na stronie, hover — Oryginał

Focusniesprawdzony

Oryginalny Footer na stronie, focus — Oryginał

Focus na link 2Zgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na link 2Zgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na link 3Zgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na link 4Zgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na link 4Zgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

98% zgodność

mobile

SpoczynekZgodność 98%Zgodne pomiary: 347

Hoverniesprawdzony

Focusniesprawdzony

Focus na link 2Zgodność 98%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na link 2Zgodność 98%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na linkZgodność 98%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

Inputs3

78% zgodność

desktop

Zgodność renderu ze stroną to 78%, poniżej progu 97%.

SpoczynekZgodność 78%Zgodne pomiary: 26

Oryginalny Input na stronie, spoczynek — Oryginał

Osobny render: Input, spoczynek — Render

FocusZgodność 78%Zgodne pomiary: 22

Oryginalny Input na stronie, focus — Oryginał

Receptura w DESIGN.md

93% zgodność

desktop

Element główny width: 422px, na stronie 414px.

SpoczynekZgodność 99%Różne pomiary: 1 z 22

Oryginalny Input (2) na stronie, spoczynek — Oryginał

Osobny render: Input (2), spoczynek — Render

HoverZgodność 99%Zgodne pomiary: 18

Oryginalny Input (2) na stronie, hover — Oryginał

Osobny render: Input (2), hover — Render

FocusZgodność 93%Zgodne pomiary: 18

Oryginalny Input (2) na stronie, focus — Oryginał

Osobny render: Input (2), focus — Render

Receptura w DESIGN.md

84% zgodność

desktop

Przy focus, zgodność renderu ze stroną to 84%, poniżej progu 97%.

SpoczynekZgodność 100%Zgodne pomiary: 56

Oryginał

Render

FocusZgodność 84%Zgodne pomiary: 18

Oryginał

Render

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

Ten plik DESIGN.md jest po angielsku, bo w tym języku czytają go agenci AI do kodowania.

Wyodrębnione z publicznej strony Neon, to nie są oficjalne wytyczne marki. Sprawdź fonty innej strony

Podobne

Zobacz wszystkie

Narzędzia deweloperskie i infrastruktura · Developer Tools & IDEs

Railway

Design system Railway to ciemne, nastawione na twórców platformy deweloperskiej. Opiera się na głęboko granatowo-czarnych powierzchniach (#13111c, #0b0b0f) i wysokokontrastowym, lekko kremowym tekście (#f7f7f8) oraz charakterystycznym fioletowym akcentem marki (#853bce / #553f83). Nagłówek sekcji hero używa kroju IBM Plex Serif, nadającego mu redakcyjny ciężar, podczas gdy Inter obsługuje całą treść interfejsu, a JetBrains Mono i SF Mono pełnią rolę w kontekstach kodu. Wyniesienie elementów osiągnięto za pomocą wewnętrznych, białych obramówek z łagodnym blaskiem (rgba(255,255,255,0.2), 1.5px inset) zamiast cieni, co nadaje interfejsowi estetykę szklanych paneli. System odstępów oparty jest na wielokrotnościach 4px z wyraźnym rytmem 8/12/16/24/32. Promienie zaokrągleń są małe, przy czym dominuje 4px, a dla kart i kontenerów hero stosowane są selektywnie 8px i 16px.

Narzędzia deweloperskie i infrastruktura · Developer Tools & IDEs

Supabase

Supabase opiera się na systemie projektowym nastawionym przede wszystkim na ciemny motyw, z głęboko czarnym, prawie czarnym tłem (oklch ~0.19) i intensywnym zielonym akcentem marki (#3ecf8e / #3fcf8e). Układ tworzy responsywna siatka kart z funkcjami. Do nagłówków używany jest Manrope, a do tekstu podstawowego i elementów interfejsu Inter. Wszystkie konteksty monospace i kod obsługuje Source Code Pro. System kolorów oparty jest na niestandardowych właściwościach oklch z semantycznym nazewnictwem. Karty mają zaokrąglenie 12px i subtelne obramowanie, a przyciski 6–8px. Ogólna gęstość jest umiarkowana, a podstawą odstępów jest siatka 8px.

Podróże, transport i logistyka

Airbnb

Design system Airbnb opiera się na jednym zastrzeżonym zmiennym kroju pisma (Airbnb Cereal VF) i niemal monochromatycznej palecie neutralnych barw, z głębokim węglem (#222222) i jasnymi szarościami jako podstawą. Firmowy koral-róż „Rausch" (#ff385c) jest zarezerwowany wyłącznie dla głównych przycisków wezwania do działania i logo. Układ to responsywna siatka kart ze zdjęciami, z dużym udziałem obrazu w stosunku do tekstu, miękkimi, 20-pikselowymi zaokrągleniami rogów kart oraz wielowarstwowym systemem ambientowych cieni, który tworzy subtelną głębię bez ostrych kontrastów. Pasek wyszukiwania, w kształcie pigułki, jest wyraźnie wyeksponowany i łączy główną akcję użytkownika w jednym miejscu.

Handel i retail · E-commerce Store

IKEA

IKEA-owa globalna strona główna opiera się na odważnym, płaskim systemie projektowym, którego głównym elementem jest ikoniczny żółty IKEA (#ffdb00) jako powierzchnia najważniejszych działań, a niebieski IKEA (#0058a3) pełni rolę akcentu logo marki. Cały system typograficzny opiera się na jednym, autorskim kroju pisma – Noto IKEA – w wagach 400 i 700, w ściśle określonej skali, od 14px dla tekstu podstawowego po 51px dla nagłówków wyróżniających. Wyniesienie elementów nad tło osiągnięte jest wyłącznie dzięki kontrastowi barw i strukturze układu, bez cieni. Układ korzysta z kontenera o maksymalnej szerokości 90rem z odstępem siatki 1,5rem na desktopie oraz spójnego tokenu zaokrąglenia 8px stosowanego do elementów interaktywnych. Ciepłe, lekko kremowe tło (#fffefb) łagodzi surowość tekstu w kolorze #111111, tworząc czytelne, wysokokontrastowe i dostępne doświadczenie lektury.

Oprogramowanie i SaaS · Productivity & Notes

Notion

Strona główna marketingowa Notion łączy głęboko granatową sekcję hero (#02093a) z jasnym tłem treści (#f6f5f4), stosując niestandardowy krój pisma NotionInter we wszystkich rolach tekstowych. Układ opiera się na siatce 12-kolumnowej z odstępami 28px, a język zaokrągleń łączy dwie wartości: 8px dla kart i 9999px dla pigułek. Elementy pływające otrzymują wielowarstwowy, stopniowo narastający system cieni. Niebieski marki (#2537b1) wyznacza przyciski wezwania do działania i akcenty, a semantyczna skala szarości (od gray-200 do gray-900) porządkuje hierarchię tekstu i powierzchni.

Usługi biznesowe i profesjonalne

Shopify

Strona główna marketingowa Shopify opiera się na dynamicznym, pełnoekranowym wideo w sekcji hero, z niemal czarnym tłem (#02090a), które wyraźnie kontrastuje z białym paskiem nawigacji nad nim. Główny akcent marki to intensywna miętowa zieleń (#36f4a4), używana oszczędnie do wyróżnień i stanów interaktywnych. Typografia łączy NeueHaasGrotesk w nagłówkach display i redakcyjnych z Inter-Variable w tekstach interfejsu. Przyciski CTA mają w pełni zaokrąglone kształty pigułki (border-radius: 9999px). Cały system jest pewny siebie, o wysokim kontraście i aspiracyjny, zaprojektowany tak, by zamieniać odwiedzających w sprzedawców.

Design system Neon

Komponenty

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

Podobne

Railway

Supabase

Airbnb

IKEA

Notion

Shopify

Inne strony z fontem Inter