Design system Snapchat

PROSilnik v4

Internetowa prezencja Snapchata opiera się na jasnym motywie o wysokim kontraście, z ikonicznym żółtym kolorem marki #FFFC00, prawie czarnymi powierzchniami podstawowymi (#121314) i czystym białym tłem strony. Projekt łączy krój Avenir Next (podstawowy) z Graphik (pomocniczym), tworząc przyjazną, a zarazem uporządkowaną hierarchię typograficzną. Elementy interaktywne, takie jak przyciski, pigułki i znaczniki, mają w pełni zaokrąglone narożniki (100px), natomiast pola wprowadzania używają subtelnego zaokrąglenia 5px. Nawigacja to unoszący się pasek w kształcie pigułki z delikatnym miękkim cieniem. Treści prezentowane są w dużych kartach z mediami i białym tekstem nałożonym na obraz, co tworzy immersyjny układ eksponujący podgląd aplikacji. Ogólna gęstość jest umiarkowana, z przestronnymi odstępami i wyraźną hierarchią wizualną, która łączy konwencje materiałów marketingowych z interfejsem produktu.

System wizualny

100% pewność

hero-displayDesign is intelligence made visibleAvenir Next48px / 600 / 1.25

display-mdDesign is intelligence made visibleAvenir Next34px / 700 / 1.2

title-lgDesign is intelligence made visibleAvenir Next28px / 700 / 1.3

title-mdDesign is intelligence made visibleAvenir Next24px / 600 / 1.5

title-smDesign is intelligence made visibleAvenir Next16px / 700 / 1.4

bodyDesign is intelligence made visibleAvenir Next16px / 400 / 1.5

body-strongDesign is intelligence made visibleAvenir Next16px / 500 / 1.5

body-smDesign is intelligence made visibleAvenir Next14px / 400 / 1.3

body-sm-strongDesign is intelligence made visibleAvenir Next14px / 600 / 1.45

nav-linkDesign is intelligence made visibleAvenir Next14px / 400 / 1.2

buttonDesign is intelligence made visibleAvenir Next14px / 500 / 1.15

eyebrowDesign is intelligence made visibleAvenir Next13px / 700 / 1.5

captionDesign is intelligence made visibleAvenir Next12px / 600 / 1.5

caption-strongDesign is intelligence made visibleAvenir Next12px / 700 / 1.5

inputDesign is intelligence made visibleArial12px / 700 / 1.15

100% pewność

select-padding-y
5px

select-2-padding-y
5px

input-2-padding-y
7px

input-2-padding-x
7px

button-primary-2-padding-y
8px

button-secondary-2-padding-y
8px

button-primary-3-padding-y
8px

button-secondary-3-padding-y
8px

input-padding-y
10px

select-padding-x
10px

select-2-padding-x
10px

button-primary-padding-y
12px

button-ghost-padding-top
13px

button-secondary-padding-y
15px

button-primary-2-padding-x
16px

button-secondary-2-padding-x
16px

button-primary-3-padding-x
16px

button-secondary-3-padding-x
16px

button-primary-padding-x
20px

button-secondary-padding-x
30px

input-padding-right
30px

input-padding-left
40px

header-landing-2-inner-max-width
181px

100% pewność

xs · 4px

sm · 5px

md · 6px

lg · 8px

xl · 10px

2xl · 12px

3xl · 16px

4xl · 20px

5xl · 36px

6xl · 100px

7xl · 170px

full · 9999px

Komponenty

Buttons11

100% zgodność

ghost · desktop

SpoczynekZgodność 100%Zgodne pomiary: 22

Oryginał

Render

FocusZgodność 100%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

ghost · desktop

SpoczynekZgodność 100%Zgodne pomiary: 34

Oryginał

Render

HoverZgodność 100%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

ghost · desktop

SpoczynekZgodność 100%Zgodne pomiary: 22

Oryginał

Render

Receptura w DESIGN.md

98% zgodność

ghost · desktop

SpoczynekZgodność 98%Zgodne pomiary: 34

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

ghost · desktop

SpoczynekZgodność 100%Zgodne pomiary: 34

Oryginał

Render

HoverZgodność 100%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

primary · desktop

SpoczynekZgodność 100%Zgodne pomiary: 22

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

primary · desktop

SpoczynekZgodność 100%Zgodne pomiary: 21

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

primary · desktop

SpoczynekZgodność 100%Zgodne pomiary: 21

Oryginał

Render

Receptura w DESIGN.md

98% zgodność

secondary · desktop

SpoczynekZgodność 98%Zgodne pomiary: 21

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

secondary · desktop

SpoczynekZgodność 100%Zgodne pomiary: 21

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

secondary · desktop

SpoczynekZgodność 100%Zgodne pomiary: 21

Oryginał

Render

Receptura w DESIGN.md

Inputs4

98% zgodność

desktop

SpoczynekZgodność 98%Zgodne pomiary: 22

Oryginalny Input na stronie, spoczynek — Oryginał

Osobny render: Input, spoczynek — Render

HoverZgodność 98%Zgodne pomiary: 18

Oryginalny Input na stronie, hover — Oryginał

FocusZgodność 98%Zgodne pomiary: 18

Oryginalny Input na stronie, focus — Oryginał

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 22

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

Osobny render: Input (2), spoczynek — Render

FocusZgodność 100%Zgodne pomiary: 18

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

Osobny render: Input (2), focus — Render

Receptura w DESIGN.md

98% zgodność

desktop

SpoczynekZgodność 98%Zgodne pomiary: 26

Oryginalny Select na stronie, spoczynek — Oryginał

Osobny render: Select, spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 26

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

Osobny render: Select (2), spoczynek — Render

Receptura w DESIGN.md

Cards3

5% zgodność

desktop

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

SpoczynekZgodność 5%Zgodne pomiary: 135

Oryginalny Card na stronie, spoczynek — Oryginał

Spoczynek, wystąpienie 2Zgodność 21%Zgodne pomiary: 135

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 5%Zgodne pomiary: 135

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 4Zgodność 35%Zgodne pomiary: 135

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

Nie do sprawdzenia

desktop

Nie do sprawdzenia: zdjęcia, multimedia lub reklamy umieszczone w nim przez stronę zakrywają większość elementu, a poza tym nic się nie różni, więc porównanie nic nie mówi o recepturze.

SpoczynekZgodność 100%Zgodne pomiary: 57

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

Osobny render: Card (2), spoczynek — Render

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

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

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

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 4Zgodność 100%Zgodne pomiary: 57

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 5Zgodność 100%Zgodne pomiary: 57

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 6Zgodność 100%Zgodne pomiary: 57

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

81% zgodność

desktop

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

SpoczynekZgodność 100%Zgodne pomiary: 169

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

Osobny render: Card (3), spoczynek — Render

HoverZgodność 100%Zgodne pomiary: 18

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

FocusZgodność 100%Zgodne pomiary: 18

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

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

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

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

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 4Zgodność 81%Zgodne pomiary: 169

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 5Zgodność 100%Zgodne pomiary: 169

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

Extras15

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 34

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 56

Oryginał

Render

Receptura w DESIGN.md

96% zgodność

desktop

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

SpoczynekZgodność 96%Zgodne pomiary: 192

Oryginalny Creator badge na stronie, spoczynek — Oryginał

Osobny render: Creator badge, spoczynek — Render

Receptura w DESIGN.md

53% zgodność

desktop

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

SpoczynekZgodność 53%Zgodne pomiary: 21

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 34

Oryginał

Render

Receptura w DESIGN.md

Niesprawdzony

desktop

Nie utworzono receptury: nie znaleziono elementu na stronie.

Dla tego komponentu nic nie zostało porównane.

Niesprawdzony

desktop

Nie utworzono receptury: nie znaleziono elementu na stronie.

Dla tego komponentu nic nie zostało porównane.

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 34

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 21

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 374

Oryginalny Navigation na stronie, spoczynek — Oryginał

Osobny render: Navigation, spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 34

Oryginał

Render

Receptura w DESIGN.md

97% zgodność

desktop

SpoczynekZgodność 97%Zgodne pomiary: 22

Oryginalny Tab na stronie, spoczynek — Oryginał

HoverZgodność 97%Zgodne pomiary: 18

Oryginalny Tab na stronie, hover — Oryginał

Receptura w DESIGN.md

96% zgodność

desktop

SpoczynekZgodność 96%Zgodne pomiary: 22

HoverZgodność 96%Zgodne pomiary: 18

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 56

Oryginalny Video play control na stronie, spoczynek — Oryginał

Osobny render: Video play control, spoczynek — Render

HoverZgodność 100%Zgodne pomiary: 18

Oryginalny Video play control na stronie, hover — Oryginał

Osobny render: Video play control, hover — Render

Receptura w DESIGN.md

Niesprawdzony

desktop

Nie utworzono receptury: nie znaleziono elementu na stronie.

Dla tego komponentu nic nie zostało porównane.

Headers10

98% zgodność

desktop

Group 12 x: 1183px, na stronie 1173px; Cta x: 1183px, na stronie 1173px i jeszcze 1.

SpoczynekZgodność 99%Różne pomiary: 3 z 885

Oryginalny Header (inner) na stronie, spoczynek — Oryginał

Osobny render: Header (inner), spoczynek — Render

Hoverniesprawdzony

Oryginalny Header (inner) na stronie, hover — Oryginał

Osobny render: Header (inner), hover — Render

Hover na ctaZgodność 98%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na logoZgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

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

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na nav linkZgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 549

Oryginalny Header (inner, 2) na stronie, spoczynek — Oryginał

Osobny render: Header (inner, 2), spoczynek — Render

Hoverniesprawdzony

Oryginalny Header (inner, 2) na stronie, hover — Oryginał

Osobny render: Header (inner, 2), hover — Render

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

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na nav linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

98% zgodność

desktop

Group 12 x: 1183px, na stronie 1173px; Cta x: 1183px, na stronie 1173px i jeszcze 1.

SpoczynekZgodność 99%Różne pomiary: 3 z 885

Oryginalny Header (inner, 3) na stronie, spoczynek — Oryginał

Osobny render: Header (inner, 3), spoczynek — Render

Hoverniesprawdzony

Oryginalny Header (inner, 3) na stronie, hover — Oryginał

Osobny render: Header (inner, 3), hover — Render

Hover na ctaZgodność 98%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na logoZgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

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

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na nav linkZgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 549

Oryginalny Header (landing) na stronie, spoczynek — Oryginał

Osobny render: Header (landing), spoczynek — Render

Hoverniesprawdzony

Oryginalny Header (landing) na stronie, hover — Oryginał

Osobny render: Header (landing), hover — Render

Hover na nav linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 885

Oryginalny Header (landing, 2) na stronie, spoczynek — Oryginał

Osobny render: Header (landing, 2), spoczynek — Render

Hoverniesprawdzony

Oryginalny Header (landing, 2) na stronie, hover — Oryginał

Osobny render: Header (landing, 2), hover — Render

Hover na logoZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na menu toggleZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na nav linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

Niesprawdzony

mobile

Nie utworzono receptury: nie znaleziono elementu na stronie.

Dla tego komponentu nic nie zostało porównane.

Niesprawdzony

mobile

Nie utworzono receptury: nie znaleziono elementu na stronie.

Dla tego komponentu nic nie zostało porównane.

Niesprawdzony

mobile

Nie utworzono receptury: element nie był widoczny.

Dla tego komponentu nic nie zostało porównane.

Niesprawdzony

mobile

Nie utworzono receptury: nie znaleziono elementu na stronie.

Dla tego komponentu nic nie zostało porównane.

Niesprawdzony

mobile

Nie utworzono receptury: nie znaleziono elementu na stronie.

Dla tego komponentu nic nie zostało porównane.

DESIGN.md

Snapchat

Overview

Snapchat's site is a white, utilitarian shell built to get out of the way of user content. The chrome is almost entirely Ink (ink, #121314) on Canvas White (surface, #FFFFFF), with a slate secondary tier (body-muted, #53575B) for navigation labels and supporting copy. Personality comes from the media itself: tall portrait video cards, Bitmoji and map imagery, with bold white headlines laid over them. Snapchat yellow (primary, #FFFC00) is rationed. It appears on a single CTA pill in the header (button-primary-3, button-secondary-2) and as the logo hover fill, never as a page background.

Density is compact. Body and nav text sit at 14–16px, controls are short pills (32px for header CTAs such as button-primary-2, 40px for icon buttons such as button-ghost-2), and the header is a 72px bar (header-landing-2) with a centered icon-over-label tab nav. Hierarchy comes from weight and fill, not from size or shadow. Headings jump to 600/700 weight, the active tab gets a 2px #121314 underline (header-inner-text-2), and interactive chrome is separated from the canvas by tonal grey fills (surface-subtle, #F0F1F2) rather than by borders.

Geometry is soft and friendly. Every text button is a 100px pill, icon buttons are circles, and media cards carry 10–20px corners. The result reads as playful but restrained: a neutral frame, generous rounding, and one loud brand color held back for the moment that matters.

Key Characteristics:

Near-black ink (#121314) on white surface carries roughly all text; pure black (#000000) is reserved for media backdrops and dark surfaces.
Snapchat yellow primary (#FFFC00) is an accent for one CTA per view, always with on-primary (#121314) text.
Tonal grey surface-subtle (#F0F1F2) does the work borders would do elsewhere: icon buttons, search pill, header hairline.
All text buttons are pills (rounded.6xl, 100px); icon buttons are circles (rounded.full).
Avenir Next throughout, with weights 400/500/600/700 and normal tracking everywhere except the eyebrow.
Content-forward portrait media cards with overlaid white type and large radii (card, 20px).
Depth is mostly tonal, with one soft shadow (rgba(0, 0, 0, 0.14) 0px 2px 4px 0px) and translucent scrims over video.

Colors

The palette is a neutral ink-and-white frame with two accent families: Snapchat yellow for brand CTAs and a sky blue for actions and links. Use the token names; the hexes are listed for reference.

Brand & Accent

Snap Yellow (primary, #FFFC00): the brand accent. Measured on the yellow header CTA (button-secondary-2, button-primary-3) and as the logo hover fill (header-landing-2-logo-hover). Use it on one pill per view. Never use it for large backgrounds or for text.
Ink on Yellow (on-primary, #121314): the only text color allowed on primary.
Action Blue (accent-blue, #0096E5): fill of button-primary (with white text) and text color of the text-only button-ghost. Use it for blue primary actions and informational accents.
Bright Sky (accent-blue-bright, #0FADFF): a rare border accent, seen on one page. Treat it as a highlight outline, not a fill.
Link Blue (link, #0000EE): the browser-default link color, still present on directory links (card-2-link) and logo anchors. Keep it for plain inline and directory links only.

Surface

Canvas White (surface, #FFFFFF): the page and header background (header-landing-2), and the fill of select controls.
Mist (surface-subtle, #F0F1F2): the workhorse secondary surface. Used for circular icon buttons (button-ghost-2, button-ghost-5, action-button-2), the search pill (header-landing-2-group-5, input), the header menu toggle and the footer band.
Graphite (surface-dark, #444546): the dark pill fill for buttons over media (button-secondary, card-button).
Charcoal (surface-charcoal, #262626): dark modules and panels.
Pitch (black, #000000): media backdrops (card-3-group-2) and the bottom legal bar.

Text

Ink (ink, #121314): the default text color, and the fill of the black header CTA (button-primary-2, button-secondary-3, nav-link).
Slate (body-muted, #53575B): inactive nav labels (header-landing-2-text), inactive tabs (tab) and the search placeholder (input).
On Dark (on-dark, #FFFFFF): text on Ink, Graphite and media, including card headlines (card-title).

Hairlines & Borders

Hairline Grey (hairline, #CCCCCC): 1px solid border on select and select-2.
Steel (border-muted, #666666): an occasional darker border, used sparingly.
The header's 1px bottom divider is drawn in surface-subtle (#F0F1F2), not in hairline. Keep that divider softer than form borders.

Component & State Colors

These colors were measured on components and their states, not in the page palette sampling.

Pressed Grey #C7C7CC: hover fill for button-ghost-2, button-ghost-5 and header-landing-2-menu-toggle-hover.
Veil #0000000D: hover wash on tab and tab-active; also the fill of input-2.
Paper #F9F9F9: the padded frame of card-3-group.
Scrim #00000080: the video-play-control backdrop; its hover lightens to #FFFFFF73.
Placeholder #00000099: text color in select and select-2.

No gradients are measured on the UI chrome. The screenshots show gradient scrims only inside media tiles, behind overlaid headlines.

The site also ships a real dark theme, built by role-swapping rather than by re-branding:

Surfaces drop to #262626, #121314 and #000000.
Text flips to #FFFFFF, with #D4D5D6 and #9A9FA7 as the secondary and muted tiers.
Interactive fills move to #3A3E41.
Accents stay fixed: brand yellow #FFFC00, Action Blue #0096E5 and Link Blue #0000EE are unchanged.

The override layer only remaps the neutral roles.

Dark Mode

The dark values below were measured with the dark color scheme forced on the page; the light values are the page's normal render.

Role	Light	Dark
Surface	`surface-subtle`	#262626
Surface (secondary)	`hairline`	#C7C7CC
Text	`ink`	#FFFFFF
Text (secondary)	`black`	#000000
Border	`border-muted`	#666666
Border (secondary)	`accent-blue-bright`	#0FADFF
Dark only	not observed	#9A9FA7

Typography

Font Family

Avenir Next (fallback stack: Helvetica, sans-serif): the single brand typeface for every heading, body line, nav label, tab and button.
Arial: confined to form inputs (input, input-2, the search pill header-landing-2-group-5) and the embedded creator-badge. Treat it as a form-control face, not a second brand voice.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	48px	600	1.25	normal	Page h1, e.g. the large centered "Öffne dein Snapchat." CTA
`display-md`	34px	700	1.2	normal	Secondary-page h1
`title-lg`	28px	700	1.3	normal	Headlines overlaid on media cards (`card-title`)
`title-md`	24px	600	1.5	normal	Section h2s and module titles
`title-sm`	16px	700	1.4	normal	Small headings (h5) and list titles
`body`	16px	400	1.5	normal	Default running text, list items
`body-strong`	16px	500	1.5	normal	Emphasized labels, inactive `tab` text, h3 labels
`body-sm`	14px	400	1.3	normal	Directory links and secondary copy
`body-sm-strong`	14px	600	1.45	normal	Emphasized small spans
`nav-link`	14px	400	1.2	normal	Text links in nav and footer lists
`button`	14px	500	1.15	normal	All pill button labels (`button-primary`, `button-primary-2`)
`eyebrow`	13px	700	1.5	0.78px	Small uppercase grey subheads above link directories
`caption`	12px	600	1.5	normal	Icon-nav labels under header icons (`header-landing-2-text`)
`caption-strong`	12px	700	1.5	normal	Active icon-nav label (`header-inner-text-2`)
`input`	12px	700	1.15	normal	Arial search-field text (`input`)

Principles

Four weights, each with a job. 400 is reading text. 500 is controls (button, body-strong). 600 is display and captions (hero-display, title-md, caption). 700 is titles and active states (display-md, title-lg, caption-strong).
Active vs. inactive is a weight step. The active icon-nav label goes from 600 to 700 and gains an ink color plus a 2px underline (header-inner-text-2). The active tab-active sits at 600, against 500 on tab.
Tracking is normal everywhere except eyebrow, whose 0.78px of letter spacing compensates for its small uppercase setting. Do not add tracking to headings.
Line height loosens as size drops. Display text runs 1.2–1.3. Body and captions run 1.5. Controls tighten to 1.15–1.2 so pills stay compact.
The scale is compact. Nothing in the UI chrome is larger than 16px. Size jumps are reserved for display headings at 24px and above.

Note on Font Substitutes

Avenir Next is a commercial (Linotype/Monotype) face and may not be licensable.

Stand-ins: Nunito Sans or Mulish are the closest open-source geometric-humanist substitutes.
Weight mapping: keep the same four weights (400/500/600/700).
Metrics: check x-height. Nunito Sans runs slightly smaller, so 12–14px caption and button text may need about 0.5px more size to match visually. Keep letterSpacing normal.
Fallback: Helvetica remains an acceptable fallback, as the site's own stack declares.

Layout

Spacing System

No base step was derived; spacing is defined per component. The verified tokens group into a small set of rhythms:

button-primary-2-padding-y 8px / button-primary-2-padding-x 16px
button-secondary-2-padding-y 8px / button-secondary-2-padding-x 16px
button-primary-3-padding-y 8px / button-primary-3-padding-x 16px
button-secondary-3-padding-y 8px / button-secondary-3-padding-x 16px

Standard pill: button-primary-padding-y 12px / button-primary-padding-x 20px, read on the blue button-primary.

Large pill: button-secondary-padding-y 15px / button-secondary-padding-x 30px, read on the Graphite button-secondary.

Text button: button-ghost-padding-top 13px on the text-only button-ghost.

Search pill: input-padding-y 10px, input-padding-left 40px (room for the leading search icon), input-padding-right 30px.

Plain field: input-2-padding-y 7px / input-2-padding-x 7px.

Selects: select-padding-y 5px / select-padding-x 10px. select-2-padding-y 5px / select-2-padding-x 10px repeat the same values.

Horizontal padding on pills is always double the vertical padding (8/16, 15/30) or close to it (12/20). Keep that ratio when adding a button size.

No section-to-section vertical rhythm was measured on the page.

Grid & Container

Header: the only measured container constraint is header-landing-2-inner-max-width (181px), the capped inner block of the header that holds the search pill. It is not a page container. No page-wide max width or grid gap was verified as a spacing token.
Desktop home page: the screenshots show an asymmetric split. A narrow login column with a vertical divider sits on the left, and a grid of tall portrait media cards fills the right.
Below the fold: a centered download CTA, then link directories in multi-column lists, then a grey footer band and a black legal bar.
Spotlight: a two-pane layout with a vertical video plus action rail on one side and a tabbed detail column with a thumbnail grid on the other.
Stories: a single narrow stacked column.

Whitespace Philosophy

Whitespace is spent on the canvas, not inside the chrome. Controls are tight: compact pills, short selects. Media cards, by contrast, sit on open white with large surrounding margins, and the download CTA is isolated by generous empty space above and below. When adding modules, keep components snug and let the white surface around them provide the breathing room.

Measured Layout

Every spacing token restates a measurement of a verified component recipe, or the step those measurements share.

header-landing-2-inner-max-width: 181px (header-landing-2, max width of header-landing-2-inner)
button-primary-padding-y: 12px (button-primary, vertical padding of the root)
button-primary-padding-x: 20px (button-primary, horizontal padding of the root)
button-secondary-padding-y: 15px (button-secondary, vertical padding of the root)
button-secondary-padding-x: 30px (button-secondary, horizontal padding of the root)
button-ghost-padding-top: 13px (button-ghost, top padding of the root)
input-padding-y: 10px (input, vertical padding of the root)
input-padding-left: 40px (input, left padding of the root)
input-padding-right: 30px (input, right padding of the root)
input-2-padding-y: 7px (input-2, vertical padding of the root)
input-2-padding-x: 7px (input-2, horizontal padding of the root)
select-padding-y: 5px (select, vertical padding of the root)
select-padding-x: 10px (select, horizontal padding of the root)
button-primary-2-padding-y: 8px (button-primary-2, vertical padding of the root)
button-primary-2-padding-x: 16px (button-primary-2, horizontal padding of the root)
button-secondary-2-padding-y: 8px (button-secondary-2, vertical padding of the root)
button-secondary-2-padding-x: 16px (button-secondary-2, horizontal padding of the root)
select-2-padding-y: 5px (select-2, vertical padding of the root)
select-2-padding-x: 10px (select-2, horizontal padding of the root)
button-primary-3-padding-y: 8px (button-primary-3, vertical padding of the root)
button-primary-3-padding-x: 16px (button-primary-3, horizontal padding of the root)
button-secondary-3-padding-y: 8px (button-secondary-3, vertical padding of the root)
button-secondary-3-padding-x: 16px (button-secondary-3, horizontal padding of the root)

Elevation & Depth

Level	Treatment	Use
0 — Canvas	`surface` #FFFFFF, no border, no shadow	Page background and header (`header-landing-2`)
1 — Tonal	Fill change to `surface-subtle` #F0F1F2, or #F9F9F9 on `card-3-group`	Circular icon buttons (`button-ghost-2`, `action-button-2`), search pill (`header-landing-2-group-5`), footer band, story card frames
2 — Hairline	1px solid #F0F1F2 bottom border on `header-landing-2` / `header-inner`; 1px solid #CCCCCC on `select` / `select-2`; 2px solid #121314 bottom border on the active nav label (`header-inner-text-2`)	Separating the header from content, outlining form controls, marking the active tab
3 — Soft shadow	`rgba(0, 0, 0, 0.14) 0px 2px 4px 0px`	The one measured shadow, sampled on the page. Per the screenshots it lifts the floating yellow "Open Snapchat" pill on mobile
4 — Media scrim	Translucent #00000080 fill (hover #FFFFFF73) on `video-play-control`	Controls floating over video and imagery

No backdrop-filter blur was measured on any recipe or page.

Shadow philosophy.

Depth is mostly tonal. A raised control is a Mist-grey fill on white. A section break is a pale hairline or a fill change to grey or black. Shadows are not the default way to lift things.
The single measured shadow (rgba(0, 0, 0, 0.14) 0px 2px 4px 0px) is a small, tight, low-opacity tier. Reserve it for an element that floats above scrolling content, such as a sticky CTA pill. Do not use it on cards or buttons that sit in flow.
Over media, use translucent scrims instead of shadows. The black/white alpha fills on video-play-control keep controls legible without adding chrome.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.xs`	4px	Rare small detail; a single occurrence
`rounded.sm`	5px	Form controls: `select`, `select-2`, `input-2`
`rounded.md`	6px	Thumbnail media in directory grids (`card-2-media`)
`rounded.lg`	8px	Logo hit area in the header (`header-landing-2-logo`)
`rounded.xl`	10px	Story card frames and their media (`card-3-group`, `card-3-media`)
`rounded.2xl`	12px	Video player corners (per screenshots)
`rounded.3xl`	16px	Larger video and media containers
`rounded.4xl`	20px	Portrait feature cards (`card`, `card-media`), the search pill (`input`, `header-landing-2-group-5`)
`rounded.5xl`	36px	Rare large rounding; a single occurrence
`rounded.6xl`	100px	Every text button pill: `button-primary`, `button-secondary`, `button-primary-2`, `button-secondary-2`, `nav-link`, `card-button`
`rounded.7xl`	170px	Rare oversized pill/blob; a single occurrence
`rounded.full`	9999px	Circles: icon buttons (`button-ghost-2`, `button-ghost-5`), the action rail, avatars

Geometry character

Snapchat's geometry is soft and child-safe-friendly, with no sharp corners anywhere in the chrome.

Pills and circles are the rule for interaction:

Every labelled button uses rounded.6xl (100px), so it reads as a full pill at any height.
Every icon-only button is a perfect circle (rounded.full).

Containers scale their radius with their size:

Small selects and fields: rounded.sm.
Thumbnails: rounded.md.
Story frames: rounded.xl.
Hero portrait cards: rounded.4xl.

Nested media inherits its parent's radius. card-media and card-group both repeat 20px inside card, so images never poke a square corner out of a rounded frame.

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

Verification: verified against the live page at desktop.

Anatomy

button-primary: the component root, a <button> (.c-button-primary), 6-character label

Recipe

HTML · CSS

<div class="c-button-primary-scope">
  <button class="c-button-primary" type="button">lorem</button>
</div>

.c-button-primary-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12px 20px;
  background-color: #0096E5;
  color: #FFFFFF;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

States

No hover or focus change was observed.

Button, secondary

Verification: verified against the live page at desktop.

Anatomy

button-secondary: the component root, a <a> (.c-button-secondary), 8-character label

Recipe

HTML · CSS

<div class="c-button-secondary-scope">
  <a class="c-button-secondary" href="#">lorem ip</a>
</div>

.c-button-secondary-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-secondary {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 15px 30px;
  background-color: #444546;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
}

States

No hover or focus change was observed.

Button, ghost

Verification: verified against the live page at desktop.

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost), 24-character label

Recipe

HTML · CSS

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">lorem ipsum dolor sit am</button>
</div>

.c-button-ghost-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 13px 0px 0px;
  background-color: transparent;
  color: #0096E5;
  border: 0;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 12.8px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

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

States

focus: outline none

Button, primary (2)

Verification: verified against the live page at desktop.

Anatomy

button-primary-2: the component root, a <a> (.c-button-primary-2), 8-character label

Recipe

HTML · CSS

<div class="c-button-primary-2-scope">
  <a class="c-button-primary-2" href="#">lorem ip</a>
</div>

.c-button-primary-2-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-primary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #121314;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
}

States

No hover or focus change was observed.

Button, secondary (2)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-2: the component root, a <button> (.c-button-secondary-2), 6-character label

Recipe

HTML · CSS

<div class="c-button-secondary-2-scope">
  <button class="c-button-secondary-2" type="button">lorem</button>
</div>

.c-button-secondary-2-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-secondary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #FFFC00;
  color: #121314;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

States

No hover or focus change was observed.

Button, ghost (2)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-2: the component root, a <button> (.c-button-ghost-2)
button-ghost-2-icon: icon placeholder, 18px (.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__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: #F0F1F2;
  color: #121314;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.c-button-ghost-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

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

States

hover (button-ghost-2-hover): background-color #C7C7CC

Button, ghost (3)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-3: the component root, a <button> (.c-button-ghost-3)

Recipe

HTML · CSS

<div class="c-button-ghost-3-scope">
  <button class="c-button-ghost-3" type="button"></button>
</div>

.c-button-ghost-3-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #121314;
  border: 0;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

States

No hover or focus change was observed.

Button, ghost (4)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-4: the component root, a <div> (.c-button-ghost-4)
button-ghost-4-icon: icon placeholder, 24x19px (.c-button-ghost-4__icon)

Recipe

HTML · CSS

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

.c-button-ghost-4-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost-4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-align: right;
  transition: all 0.3s ease-out;
}

.c-button-ghost-4__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 19px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Button, primary (3)

Verification: verified against the live page at desktop.

Anatomy

button-primary-3: the component root, a <button> (.c-button-primary-3), 6-character label

Recipe

HTML · CSS

<div class="c-button-primary-3-scope">
  <button class="c-button-primary-3" type="button">lorem</button>
</div>

.c-button-primary-3-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-primary-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #FFFC00;
  color: #121314;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

States

No hover or focus change was observed.

Button, secondary (3)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-3: the component root, a <a> (.c-button-secondary-3), 8-character label

Recipe

HTML · CSS

<div class="c-button-secondary-3-scope">
  <a class="c-button-secondary-3" href="#">lorem ip</a>
</div>

.c-button-secondary-3-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-secondary-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #121314;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
}

States

No hover or focus change was observed.

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-icon: icon placeholder, 18px (.c-button-ghost-5__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-5-scope">
  <button class="c-button-ghost-5" type="button">
    <span class="c-button-ghost-5__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-5-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost-5 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: #F0F1F2;
  color: #121314;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.c-button-ghost-5__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-ghost-5:hover {
  background-color: #C7C7CC;
}

States

hover (button-ghost-5-hover): background-color #C7C7CC

Inputs

Input

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

.c-input-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-input {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 181px;
  height: 40px;
  padding: 10px 30px 10px 40px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #F0F1F2;
  color: #53575B;
  border: 0;
  border-radius: 20px;
  cursor: text;
  font-family: Arial;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  text-overflow: ellipsis;
  transition: all 0.2s ease-in-out;
}

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

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

States

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

Input (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

<div class="c-input-2-scope">
  <input class="c-input-2" type="text" placeholder="">
</div>

.c-input-2-scope {
  background-color: #FFFFFF;
  color: #53575B;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.c-input-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 420px;
  height: 38px;
  padding: 7px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #0000000D;
  color: #121314;
  border: 0;
  border-radius: 5px;
  cursor: text;
  font-family: Arial;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  margin-top: 7px;
}

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

States

focus: outline none

Selects

Select

Verification: verified against the live page at desktop.

Anatomy

select: the component root, a <select> (.c-select), 12-character placeholder

Recipe

HTML · CSS

<div class="c-select-scope">
  <select class="c-select"><option>lorem ipsum</option></select>
</div>

.c-select-scope {
  background-color: #F8F9FB;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
}

.c-select {
  display: inline-block;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 147px;
  height: 34px;
  padding: 5px 10px;
  background-color: #FFFFFF;
  color: #00000099;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  white-space: pre;
  appearance: none;
  margin-top: 10px;
}

States

No hover or focus change was observed.

Select (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

<div class="c-select-2-scope">
  <select class="c-select-2"><option>lorem ipsum</option></select>
</div>

.c-select-2-scope {
  background-color: #F8F9FB;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
}

.c-select-2 {
  display: inline-block;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 201px;
  height: 34px;
  padding: 5px 10px;
  background-color: #FFFFFF;
  color: #00000099;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  white-space: pre;
  appearance: none;
  margin-top: 10px;
}

States

No hover or focus change was observed.

Cards

Card

Verification: flagged, the render matched 5% of the original pixels, below the 96% required (instance 1) after 2 correction attempts.

Anatomy

Group: 4 instances in a 2-column grid, 15px gap; the recipe carries the values they all share
card: the component root, a <div> (.c-card)
card-group: inner block (.c-card__group)
card-title: heading, 38 characters (.c-card__title)
card-group-2: inner flex row (.c-card__group-2)
card-button: button, 17-character label (.c-card__button)
card-group-3: inner block (.c-card__group-3)
card-media: image placeholder, 396x690px (.c-card__media)

Recipe

HTML · CSS

<div class="c-card-scope">
  <div class="c-card">
    <div class="c-card__group">
      <h2 class="c-card__title">lorem ipsum dolor sit amet consectetur</h2>
      <div class="c-card__group-2">
        <button class="c-card__button" type="button">lorem ipsum dolor</button>
      </div>
    </div>
    <div class="c-card__group-3">
      <span class="c-card__media" aria-hidden="true"></span>
    </div>
  </div>
</div>

.c-card-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #FFFFFF;
  border-radius: 20px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  background-image: linear-gradient(#00000099, transparent 30%);
  border-radius: 20px;
}

.c-card__title {
  display: block;
  box-sizing: border-box;
  padding: 35px;
  margin: 0px;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
}

.c-card__group-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  bottom: 50px;
  z-index: 1;
}

.c-card__button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #444546;
  color: #FFFFFF;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-card__group-3 {
  display: block;
  box-sizing: border-box;
  border-radius: 20px;
}

.c-card__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 396px;
  height: 690px;
  max-height: 690px;
  aspect-ratio: 9 / 16;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  border-radius: 20px;
}

States

No hover or focus change was observed.

Card (2)

Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.

Anatomy

Group: 6 instances in a 3-column grid, 8px gap; the recipe carries the values they all share
card-2: the component root, a <div> (.c-card-2)
card-2-link: link (.c-card-2__link)
card-2-media: image placeholder, 151x240px (.c-card-2__media)

Recipe

HTML · CSS

<div class="c-card-2-scope">
  <div class="c-card-2">
    <a class="c-card-2__link" href="#">
      <span class="c-card-2__media" aria-hidden="true"></span>
    </a>
  </div>
</div>

.c-card-2-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-2__link {
  display: inline;
  box-sizing: border-box;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0000EE;
}

.c-card-2__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 151px;
  height: 240px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  border-radius: 6px;
  transition: opacity 0.1s ease;
}

States

No hover or focus change was observed.

Card (3)

Verification: flagged, the render matched 81% of the original pixels, below the 96% required (instance 4) after 2 correction attempts.

Anatomy

Group: 5 instances in a 1-column grid; the recipe carries the values they all share
card-3: the component root, a <div> (.c-card-3)
card-3-group: inner block (.c-card-3__group)
card-3-group-2: inner flex row (.c-card-3__group-2)
card-3-group-3: inner block (.c-card-3__group-3)
card-3-media: image placeholder, 461x721px (.c-card-3__media)
card-3-group-4: inner flex row (.c-card-3__group-4), content not captured
card-3-group-5: inner block (.c-card-3__group-5), content not captured
card-3-group-6: inner block (.c-card-3__group-6), content not captured
card-3-group-7: inner block (.c-card-3__group-7)
card-3-group-8: inner flex row (.c-card-3__group-8), content not captured

Recipe

HTML · CSS

<div class="c-card-3-scope">
  <div class="c-card-3">
    <div class="c-card-3__group">
      <div class="c-card-3__group-2">
        <div class="c-card-3__group-3">
          <span class="c-card-3__media" aria-hidden="true"></span>
          <span class="c-card-3__group-4"></span>
          <div class="c-card-3__group-5"></div>
          <div class="c-card-3__group-6"></div>
        </div>
        <div class="c-card-3__group-7">
          <div class="c-card-3__group-8"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-3-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-3 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card-3__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  position: relative;
  background-color: #F9F9F9;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 5px;
  margin-bottom: 5px;
}

.c-card-3__group-2 {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 720px;
  max-width: 460px;
  position: relative;
  background-color: #000000;
  border-radius: 10px;
  margin-right: auto;
  margin-left: auto;
}

.c-card-3__group-3 {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-card-3__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 461px;
  height: 721px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  border-radius: 10px;
}

.c-card-3__group-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  border-radius: 10px;
  transition: all 0.25s ease;
}

.c-card-3__group-5 {
  display: block;
  box-sizing: border-box;
}

.c-card-3__group-6 {
  display: block;
  box-sizing: border-box;
  position: absolute;
}

.c-card-3__group-7 {
  box-sizing: border-box;
  position: absolute;
}

.c-card-3__group-8 {
  display: flex;
  box-sizing: border-box;
  position: relative;
}

.c-card-3:hover {
  padding: 0px;
}

.c-card-3:focus {
  padding: 0px;
}

States

hover: padding 0px
focus: padding 0px

Image button

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

Anatomy

image-button: the component root, a <button> (.c-image-button), 17-character label

Recipe

HTML · CSS

<div class="c-image-button-scope">
  <button class="c-image-button" type="button">lorem ipsum dolor</button>
</div>

.c-image-button-scope {
  background-color: #FFFFFF;
  color: #FFFFFF;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-image-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #444546;
  color: #FFFFFF;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

States

No hover or focus change was observed.

Nav link

Verification: verified against the live page at desktop.

Anatomy

nav-link: the component root, a <a> (.c-nav-link), 12-character label

Recipe

HTML · CSS

<div class="c-nav-link-scope">
  <a class="c-nav-link" href="#">lorem ipsum</a>
</div>

.c-nav-link-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-nav-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #121314;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
}

States

No hover or focus change was observed.

Headers

Header (landing)

Verification: verified against the live page at desktop.

Variant observed on https://www.snapchat.com/.

Anatomy

header-landing: the component root, a <nav> (.c-header-landing)
header-landing-nav: inner flex row (.c-header-landing__nav)
header-landing-nav-item: inner group (.c-header-landing__nav-item)
header-landing-nav-link: link (.c-header-landing__nav-link, 5 instances)
header-landing-group: inner flex column (.c-header-landing__group, 5 instances)
header-landing-group-2: inner group (.c-header-landing__group-2, 5 instances)
header-landing-icon: icon placeholder, 24px (.c-header-landing__icon)
header-landing-text: label text, 7 characters (.c-header-landing__text, 5 instances)
header-landing-nav-item-2: inner group (.c-header-landing__nav-item-2, 3 instances)
header-landing-icon-2: icon placeholder, 21x23px (.c-header-landing__icon-2)
header-landing-group-3: inner group (.c-header-landing__group-3)
header-landing-icon-3: icon placeholder, 26x12px (.c-header-landing__icon-3)
header-landing-icon-4: icon placeholder, 22x24px (.c-header-landing__icon-4)
header-landing-icon-5: icon placeholder, 25x24px (.c-header-landing__icon-5)
header-landing-nav-item-3: inner group (.c-header-landing__nav-item-3)
header-landing-icon-6: icon placeholder, 26px (.c-header-landing__icon-6)

Recipe

HTML · CSS

<div class="c-header-landing-scope">
  <nav class="c-header-landing">
    <ul class="c-header-landing__nav">
      <li class="c-header-landing__nav-item">
        <a class="c-header-landing__nav-link" href="#">
          <span class="c-header-landing__group">
            <span class="c-header-landing__group-2">
              <span class="c-header-landing__icon" aria-hidden="true"></span>
            </span>
            <span class="c-header-landing__text">lorem i</span>
          </span>
        </a>
      </li>
      <li class="c-header-landing__nav-item-2">
        <a class="c-header-landing__nav-link" href="#">
          <span class="c-header-landing__group">
            <span class="c-header-landing__group-2">
              <span class="c-header-landing__icon-2" aria-hidden="true"></span>
            </span>
            <span class="c-header-landing__text">lorem ips</span>
          </span>
        </a>
      </li>
      <li class="c-header-landing__nav-item-2">
        <a class="c-header-landing__nav-link" href="#">
          <span class="c-header-landing__group">
            <span class="c-header-landing__group-3">
              <span class="c-header-landing__icon-3" aria-hidden="true"></span>
            </span>
            <span class="c-header-landing__group-2">
              <span class="c-header-landing__icon-4" aria-hidden="true"></span>
            </span>
            <span class="c-header-landing__text">lore</span>
          </span>
        </a>
      </li>
      <li class="c-header-landing__nav-item-2">
        <a class="c-header-landing__nav-link" href="#">
          <span class="c-header-landing__group">
            <span class="c-header-landing__group-2">
              <span class="c-header-landing__icon-5" aria-hidden="true"></span>
            </span>
            <span class="c-header-landing__text">lorem</span>
          </span>
        </a>
      </li>
      <li class="c-header-landing__nav-item-3">
        <a class="c-header-landing__nav-link" href="#">
          <span class="c-header-landing__group">
            <span class="c-header-landing__group-2">
              <span class="c-header-landing__icon-6" aria-hidden="true"></span>
            </span>
            <span class="c-header-landing__text">lorem ips</span>
          </span>
        </a>
      </li>
    </ul>
  </nav>
</div>

.c-header-landing-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-landing {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-landing__nav {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-landing__nav-item {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
}

.c-header-landing__nav-link {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #53575B;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-landing__nav-link::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-landing__group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing__group-2 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.c-header-landing__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__text {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-landing__nav-item-2 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
  margin-left: 3px;
}

.c-header-landing__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 21px;
  height: 23px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__group-3 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  right: -10px;
}

.c-header-landing__icon-3 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__icon-4 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__icon-5 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 25px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__nav-item-3 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-left: 3px;
}

.c-header-landing__icon-6 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__nav-link:hover::before {
  background-color: #F0F1F2;
}

States

header-landing-nav-link hover: ::before background-color #F0F1F2

Header (landing, 2)

Verification: verified against the live page at desktop.

Variant observed on https://www.snapchat.com/.

Anatomy

header-landing-2: the component root, a <nav> (.c-header-landing-2)
header-landing-2-group: inner flex row (.c-header-landing-2__group)
header-landing-2-group-2: inner block (.c-header-landing-2__group-2)
header-landing-2-logo: link (.c-header-landing-2__logo)
header-landing-2-logo-icon: icon placeholder, 24px (.c-header-landing-2__logo-icon)
header-landing-2-inner: inner block (.c-header-landing-2__inner)
header-landing-2-group-3: inner flex row (.c-header-landing-2__group-3)
header-landing-2-group-4: inner group (.c-header-landing-2__group-4)
header-landing-2-icon: icon placeholder, 24px (.c-header-landing-2__icon, 2 instances)
header-landing-2-group-5: inner group (.c-header-landing-2__group-5)
header-landing-2-group-6: inner flex row (.c-header-landing-2__group-6)
header-landing-2-nav: inner flex row (.c-header-landing-2__nav)
header-landing-2-nav-item: inner group (.c-header-landing-2__nav-item)
header-landing-2-nav-link: link (.c-header-landing-2__nav-link, 5 instances)
header-landing-2-group-7: inner flex column (.c-header-landing-2__group-7, 5 instances)
header-landing-2-group-8: inner group (.c-header-landing-2__group-8, 5 instances)
header-landing-2-text: label text, 7 characters (.c-header-landing-2__text, 5 instances)
header-landing-2-nav-item-2: inner group (.c-header-landing-2__nav-item-2, 3 instances)
header-landing-2-icon-2: icon placeholder, 21x23px (.c-header-landing-2__icon-2)
header-landing-2-group-9: inner group (.c-header-landing-2__group-9)
header-landing-2-icon-3: icon placeholder, 26x12px (.c-header-landing-2__icon-3)
header-landing-2-icon-4: icon placeholder, 22x24px (.c-header-landing-2__icon-4)
header-landing-2-icon-5: icon placeholder, 25x24px (.c-header-landing-2__icon-5)
header-landing-2-nav-item-3: inner group (.c-header-landing-2__nav-item-3)
header-landing-2-icon-6: icon placeholder, 26px (.c-header-landing-2__icon-6)
header-landing-2-group-10: inner flex row (.c-header-landing-2__group-10)
header-landing-2-group-11: inner block (.c-header-landing-2__group-11)
header-landing-2-group-12: inner block (.c-header-landing-2__group-12)
header-landing-2-menu-toggle: button (.c-header-landing-2__menu-toggle)
header-landing-2-menu-toggle-icon: icon placeholder, 18px (.c-header-landing-2__menu-toggle-icon)
header-landing-2-cta: link, 12-character label (.c-header-landing-2__cta, 2 instances)

Recipe

HTML · CSS

<div class="c-header-landing-2-scope">
  <nav class="c-header-landing-2">
    <div class="c-header-landing-2__group">
      <div class="c-header-landing-2__group-2">
        <a class="c-header-landing-2__logo" href="#">
          <span class="c-header-landing-2__logo-icon" aria-hidden="true"></span>
        </a>
      </div>
      <div class="c-header-landing-2__inner">
        <div class="c-header-landing-2__group-3">
          <span class="c-header-landing-2__group-4">
            <span class="c-header-landing-2__icon" aria-hidden="true"></span>
          </span>
          <div class="c-header-landing-2__group-5"></div>
        </div>
      </div>
    </div>
    <div class="c-header-landing-2__group-6">
      <ul class="c-header-landing-2__nav">
        <li class="c-header-landing-2__nav-item">
          <a class="c-header-landing-2__nav-link" href="#">
            <span class="c-header-landing-2__group-7">
              <span class="c-header-landing-2__group-8">
                <span class="c-header-landing-2__icon" aria-hidden="true"></span>
              </span>
              <span class="c-header-landing-2__text">lorem i</span>
            </span>
          </a>
        </li>
        <li class="c-header-landing-2__nav-item-2">
          <a class="c-header-landing-2__nav-link" href="#">
            <span class="c-header-landing-2__group-7">
              <span class="c-header-landing-2__group-8">
                <span class="c-header-landing-2__icon-2" aria-hidden="true"></span>
              </span>
              <span class="c-header-landing-2__text">lorem ips</span>
            </span>
          </a>
        </li>
        <li class="c-header-landing-2__nav-item-2">
          <a class="c-header-landing-2__nav-link" href="#">
            <span class="c-header-landing-2__group-7">
              <span class="c-header-landing-2__group-9">
                <span class="c-header-landing-2__icon-3" aria-hidden="true"></span>
              </span>
              <span class="c-header-landing-2__group-8">
                <span class="c-header-landing-2__icon-4" aria-hidden="true"></span>
              </span>
              <span class="c-header-landing-2__text">lore</span>
            </span>
          </a>
        </li>
        <li class="c-header-landing-2__nav-item-2">
          <a class="c-header-landing-2__nav-link" href="#">
            <span class="c-header-landing-2__group-7">
              <span class="c-header-landing-2__group-8">
                <span class="c-header-landing-2__icon-5" aria-hidden="true"></span>
              </span>
              <span class="c-header-landing-2__text">lorem</span>
            </span>
          </a>
        </li>
        <li class="c-header-landing-2__nav-item-3">
          <a class="c-header-landing-2__nav-link" href="#">
            <span class="c-header-landing-2__group-7">
              <span class="c-header-landing-2__group-8">
                <span class="c-header-landing-2__icon-6" aria-hidden="true"></span>
              </span>
              <span class="c-header-landing-2__text">lorem ips</span>
            </span>
          </a>
        </li>
      </ul>
    </div>
    <div class="c-header-landing-2__group-10">
      <div class="c-header-landing-2__group-11">
        <div class="c-header-landing-2__group-12">
          <button class="c-header-landing-2__menu-toggle" type="button">
            <span class="c-header-landing-2__menu-toggle-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
      <a class="c-header-landing-2__cta" href="#">lorem ipsum</a>
      <a class="c-header-landing-2__cta" href="#">lorem ip</a>
    </div>
  </nav>
</div>

.c-header-landing-2-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-landing-2 {
  display: flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  background-color: #FFFFFF;
  color: #000000;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #F0F1F2;
}

.c-header-landing-2__group {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 1px;
  box-sizing: border-box;
  height: 72px;
}

.c-header-landing-2__group-2 {
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  padding: 8px;
}

.c-header-landing-2__logo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  color: #0000EE;
  border-radius: 8px;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0000EE;
  transition: background-color 0.1s ease;
}

.c-header-landing-2__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__inner {
  display: block;
  box-sizing: border-box;
  max-width: 181px;
}

.c-header-landing-2__group-3 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-landing-2__group-4 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  margin-top: 5px;
  margin-left: 9px;
}

.c-header-landing-2__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__group-5 {
  display: block;
  box-sizing: border-box;
  width: 181px;
  height: 40px;
  padding: 10px 30px 10px 40px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #F0F1F2;
  color: #53575B;
  border: 0;
  border-radius: 20px;
  cursor: text;
  font-family: Arial;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  text-overflow: ellipsis;
  transition: all 0.2s ease-in-out;
}

.c-header-landing-2__group-6 {
  display: flex;
  box-sizing: border-box;
  height: 72px;
}

.c-header-landing-2__nav {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-landing-2__nav-item {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
}

.c-header-landing-2__nav-link {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #53575B;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-landing-2__nav-link::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-landing-2__group-7 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing-2__group-8 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.c-header-landing-2__text {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-landing-2__nav-item-2 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
  margin-left: 3px;
}

.c-header-landing-2__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 21px;
  height: 23px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__group-9 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  right: -10px;
}

.c-header-landing-2__icon-3 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__icon-4 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__icon-5 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 25px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__nav-item-3 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-left: 3px;
}

.c-header-landing-2__icon-6 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__group-10 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  flex-basis: 1px;
  box-sizing: border-box;
  height: 72px;
  padding-right: 24px;
}

.c-header-landing-2__group-11 {
  display: block;
  box-sizing: border-box;
  margin-right: 12px;
}

.c-header-landing-2__group-12 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing-2__menu-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: #F0F1F2;
  color: #121314;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.c-header-landing-2__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-2__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #121314;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  margin-left: 10px;
}

.c-header-landing-2__logo:hover {
  background-color: #FFFC00;
}

.c-header-landing-2__nav-link:hover::before {
  background-color: #F0F1F2;
}

.c-header-landing-2__menu-toggle:hover {
  background-color: #C7C7CC;
}

States

header-landing-2-logo hover (header-landing-2-logo-hover): background-color #FFFC00
header-landing-2-nav-link hover: ::before background-color #F0F1F2
header-landing-2-menu-toggle hover (header-landing-2-menu-toggle-hover): background-color #C7C7CC

Header (inner)

Verification: flagged, the header-inner-group-12 x did not reproduce the measured 1173px after 2 correction attempts.

Variant observed on https://www.snapchat.com/spotlight.

Anatomy

header-inner: the component root, a <nav> (.c-header-inner)
header-inner-group: inner flex row (.c-header-inner__group)
header-inner-group-2: inner block (.c-header-inner__group-2)
header-inner-logo: link (.c-header-inner__logo)
header-inner-logo-icon: icon placeholder, 24px (.c-header-inner__logo-icon)
header-inner-inner: inner block (.c-header-inner__inner)
header-inner-group-3: inner flex row (.c-header-inner__group-3)
header-inner-group-4: inner group (.c-header-inner__group-4)
header-inner-icon: icon placeholder, 24px (.c-header-inner__icon, 2 instances)
header-inner-group-5: inner group (.c-header-inner__group-5)
header-inner-group-6: inner flex row (.c-header-inner__group-6)
header-inner-nav: inner flex row (.c-header-inner__nav)
header-inner-nav-item: inner group (.c-header-inner__nav-item)
header-inner-nav-link: link (.c-header-inner__nav-link, 4 instances)
header-inner-group-7: inner flex column (.c-header-inner__group-7, 5 instances)
header-inner-group-8: inner group (.c-header-inner__group-8, 5 instances)
header-inner-text: label text, 7 characters (.c-header-inner__text, 4 instances)
header-inner-nav-item-2: inner group (.c-header-inner__nav-item-2, 3 instances)
header-inner-nav-link-2: link (.c-header-inner__nav-link-2)
header-inner-icon-2: icon placeholder, 21x23px (.c-header-inner__icon-2)
header-inner-text-2: label text, 9 characters (.c-header-inner__text-2)
header-inner-group-9: inner group (.c-header-inner__group-9)
header-inner-icon-3: icon placeholder, 26x12px (.c-header-inner__icon-3)
header-inner-icon-4: icon placeholder, 22x24px (.c-header-inner__icon-4)
header-inner-icon-5: icon placeholder, 25x24px (.c-header-inner__icon-5)
header-inner-nav-item-3: inner group (.c-header-inner__nav-item-3)
header-inner-icon-6: icon placeholder, 26px (.c-header-inner__icon-6)
header-inner-group-10: inner flex row (.c-header-inner__group-10)
header-inner-group-11: inner block (.c-header-inner__group-11)
header-inner-group-12: inner block (.c-header-inner__group-12)
header-inner-cta: the button-ghost-2 button (.c-header-inner__cta)
header-inner-cta-icon: icon placeholder, 18px (.c-header-inner__cta-icon)
header-inner-cta-2: the button-primary-2 button, 8-character label (.c-header-inner__cta-2)
header-inner-cta-3: the button-secondary-2 button, 6-character label (.c-header-inner__cta-3)

Recipe

HTML · CSS

<div class="c-header-inner-scope">
  <nav class="c-header-inner">
    <div class="c-header-inner__group">
      <div class="c-header-inner__group-2">
        <a class="c-header-inner__logo" href="#">
          <span class="c-header-inner__logo-icon" aria-hidden="true"></span>
        </a>
      </div>
      <div class="c-header-inner__inner">
        <div class="c-header-inner__group-3">
          <span class="c-header-inner__group-4">
            <span class="c-header-inner__icon" aria-hidden="true"></span>
          </span>
          <div class="c-header-inner__group-5"></div>
        </div>
      </div>
    </div>
    <div class="c-header-inner__group-6">
      <ul class="c-header-inner__nav">
        <li class="c-header-inner__nav-item">
          <a class="c-header-inner__nav-link" href="#">
            <span class="c-header-inner__group-7">
              <span class="c-header-inner__group-8">
                <span class="c-header-inner__icon" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner__text">lorem i</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner__nav-item-2">
          <a class="c-header-inner__nav-link-2" href="#">
            <span class="c-header-inner__group-7">
              <span class="c-header-inner__group-8">
                <span class="c-header-inner__icon-2" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner__text-2">lorem ips</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner__nav-item-2">
          <a class="c-header-inner__nav-link" href="#">
            <span class="c-header-inner__group-7">
              <span class="c-header-inner__group-9">
                <span class="c-header-inner__icon-3" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner__group-8">
                <span class="c-header-inner__icon-4" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner__text">lore</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner__nav-item-2">
          <a class="c-header-inner__nav-link" href="#">
            <span class="c-header-inner__group-7">
              <span class="c-header-inner__group-8">
                <span class="c-header-inner__icon-5" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner__text">lorem</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner__nav-item-3">
          <a class="c-header-inner__nav-link" href="#">
            <span class="c-header-inner__group-7">
              <span class="c-header-inner__group-8">
                <span class="c-header-inner__icon-6" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner__text">lorem ips</span>
            </span>
          </a>
        </li>
      </ul>
    </div>
    <div class="c-header-inner__group-10">
      <div class="c-header-inner__group-11">
        <div class="c-header-inner__group-12">
          <button class="c-header-inner__cta" type="button">
            <span class="c-header-inner__cta-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
      <a class="c-header-inner__cta-2" href="#">lorem ip</a>
      <button class="c-header-inner__cta-3" type="button">lorem</button>
    </div>
  </nav>
</div>

.c-header-inner-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner {
  display: flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #F0F1F2;
}

.c-header-inner__group {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 1px;
  box-sizing: border-box;
  height: 72px;
}

.c-header-inner__group-2 {
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  padding: 8px;
}

.c-header-inner__logo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  color: #0000EE;
  border-radius: 8px;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0000EE;
  transition: background-color 0.1s ease;
}

.c-header-inner__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__inner {
  display: block;
  box-sizing: border-box;
  max-width: 181px;
}

.c-header-inner__group-3 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-inner__group-4 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  margin-top: 5px;
  margin-left: 9px;
}

.c-header-inner__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__group-5 {
  display: block;
  box-sizing: border-box;
  width: 181px;
  height: 40px;
  padding: 10px 30px 10px 40px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #F0F1F2;
  color: #53575B;
  border: 0;
  border-radius: 20px;
  cursor: text;
  font-family: Arial;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  text-overflow: ellipsis;
  transition: all 0.2s ease-in-out;
}

.c-header-inner__group-6 {
  display: flex;
  box-sizing: border-box;
  height: 72px;
}

.c-header-inner__nav {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner__nav-item {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
}

.c-header-inner__nav-link {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #53575B;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-inner__nav-link::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-inner__group-7 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__group-8 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.c-header-inner__text {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-inner__nav-item-2 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
  margin-left: 3px;
}

.c-header-inner__nav-link-2 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #121314;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 700;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-inner__nav-link-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-inner__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 21px;
  height: 23px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__text-2 {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #121314;
}

.c-header-inner__group-9 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  right: -10px;
}

.c-header-inner__icon-3 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__icon-4 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__icon-5 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 25px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__nav-item-3 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-left: 3px;
}

.c-header-inner__icon-6 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__group-10 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  flex-basis: 1px;
  box-sizing: border-box;
  height: 72px;
  padding-right: 24px;
}

.c-header-inner__group-11 {
  display: block;
  box-sizing: border-box;
  margin-right: 12px;
}

.c-header-inner__group-12 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: #F0F1F2;
  color: #121314;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.c-header-inner__cta-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #121314;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  margin-left: 10px;
}

.c-header-inner__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #FFFC00;
  color: #121314;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  margin-left: 10px;
}

.c-header-inner__logo:hover {
  background-color: #FFFC00;
}

.c-header-inner__nav-link:hover::before {
  background-color: #F0F1F2;
}

.c-header-inner__nav-link-2:hover::before {
  background-color: #F0F1F2;
}

.c-header-inner__cta:hover {
  background-color: #C7C7CC;
}

States

header-inner-logo hover (header-inner-logo-hover): background-color #FFFC00
header-inner-nav-link hover: ::before background-color #F0F1F2
header-inner-nav-link-2 hover: ::before background-color #F0F1F2
header-inner-cta hover (header-inner-cta-hover): background-color #C7C7CC

Header (inner, 2)

Verification: verified against the live page at desktop.

Variant observed on https://www.snapchat.com/spotlight.

Anatomy

header-inner-2: the component root, a <nav> (.c-header-inner-2)
header-inner-2-nav: inner flex row (.c-header-inner-2__nav)
header-inner-2-nav-item: inner group (.c-header-inner-2__nav-item)
header-inner-2-nav-link: link (.c-header-inner-2__nav-link, 4 instances)
header-inner-2-group: inner flex column (.c-header-inner-2__group, 5 instances)
header-inner-2-group-2: inner group (.c-header-inner-2__group-2, 5 instances)
header-inner-2-icon: icon placeholder, 24px (.c-header-inner-2__icon)
header-inner-2-text: label text, 7 characters (.c-header-inner-2__text, 4 instances)
header-inner-2-nav-item-2: inner group (.c-header-inner-2__nav-item-2, 3 instances)
header-inner-2-nav-link-2: link (.c-header-inner-2__nav-link-2)
header-inner-2-icon-2: icon placeholder, 21x23px (.c-header-inner-2__icon-2)
header-inner-2-text-2: label text, 9 characters (.c-header-inner-2__text-2)
header-inner-2-group-3: inner group (.c-header-inner-2__group-3)
header-inner-2-icon-3: icon placeholder, 26x12px (.c-header-inner-2__icon-3)
header-inner-2-icon-4: icon placeholder, 22x24px (.c-header-inner-2__icon-4)
header-inner-2-icon-5: icon placeholder, 25x24px (.c-header-inner-2__icon-5)
header-inner-2-nav-item-3: inner group (.c-header-inner-2__nav-item-3)
header-inner-2-icon-6: icon placeholder, 26px (.c-header-inner-2__icon-6)

Recipe

HTML · CSS

<div class="c-header-inner-2-scope">
  <nav class="c-header-inner-2">
    <ul class="c-header-inner-2__nav">
      <li class="c-header-inner-2__nav-item">
        <a class="c-header-inner-2__nav-link" href="#">
          <span class="c-header-inner-2__group">
            <span class="c-header-inner-2__group-2">
              <span class="c-header-inner-2__icon" aria-hidden="true"></span>
            </span>
            <span class="c-header-inner-2__text">lorem i</span>
          </span>
        </a>
      </li>
      <li class="c-header-inner-2__nav-item-2">
        <a class="c-header-inner-2__nav-link-2" href="#">
          <span class="c-header-inner-2__group">
            <span class="c-header-inner-2__group-2">
              <span class="c-header-inner-2__icon-2" aria-hidden="true"></span>
            </span>
            <span class="c-header-inner-2__text-2">lorem ips</span>
          </span>
        </a>
      </li>
      <li class="c-header-inner-2__nav-item-2">
        <a class="c-header-inner-2__nav-link" href="#">
          <span class="c-header-inner-2__group">
            <span class="c-header-inner-2__group-3">
              <span class="c-header-inner-2__icon-3" aria-hidden="true"></span>
            </span>
            <span class="c-header-inner-2__group-2">
              <span class="c-header-inner-2__icon-4" aria-hidden="true"></span>
            </span>
            <span class="c-header-inner-2__text">lore</span>
          </span>
        </a>
      </li>
      <li class="c-header-inner-2__nav-item-2">
        <a class="c-header-inner-2__nav-link" href="#">
          <span class="c-header-inner-2__group">
            <span class="c-header-inner-2__group-2">
              <span class="c-header-inner-2__icon-5" aria-hidden="true"></span>
            </span>
            <span class="c-header-inner-2__text">lorem</span>
          </span>
        </a>
      </li>
      <li class="c-header-inner-2__nav-item-3">
        <a class="c-header-inner-2__nav-link" href="#">
          <span class="c-header-inner-2__group">
            <span class="c-header-inner-2__group-2">
              <span class="c-header-inner-2__icon-6" aria-hidden="true"></span>
            </span>
            <span class="c-header-inner-2__text">lorem ips</span>
          </span>
        </a>
      </li>
    </ul>
  </nav>
</div>

.c-header-inner-2-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner-2__nav {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner-2__nav-item {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
}

.c-header-inner-2__nav-link {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #53575B;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-inner-2__nav-link::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-inner-2__group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-2__group-2 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.c-header-inner-2__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__text {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-inner-2__nav-item-2 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
  margin-left: 3px;
}

.c-header-inner-2__nav-link-2 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #121314;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 700;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-inner-2__nav-link-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-inner-2__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 21px;
  height: 23px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__text-2 {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #121314;
}

.c-header-inner-2__group-3 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  right: -10px;
}

.c-header-inner-2__icon-3 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__icon-4 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__icon-5 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 25px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__nav-item-3 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-left: 3px;
}

.c-header-inner-2__icon-6 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-2__nav-link:hover::before {
  background-color: #F0F1F2;
}

.c-header-inner-2__nav-link-2:hover::before {
  background-color: #F0F1F2;
}

States

header-inner-2-nav-link hover: ::before background-color #F0F1F2
header-inner-2-nav-link-2 hover: ::before background-color #F0F1F2

Header (inner, 3)

Verification: flagged, the header-inner-3-group-12 x did not reproduce the measured 1173px after 2 correction attempts.

Variant observed on https://www.snapchat.com/discover.

Anatomy

header-inner-3: the component root, a <nav> (.c-header-inner-3)
header-inner-3-group: inner flex row (.c-header-inner-3__group)
header-inner-3-group-2: inner block (.c-header-inner-3__group-2)
header-inner-3-logo: link (.c-header-inner-3__logo)
header-inner-3-logo-icon: icon placeholder, 24px (.c-header-inner-3__logo-icon)
header-inner-3-inner: inner block (.c-header-inner-3__inner)
header-inner-3-group-3: inner flex row (.c-header-inner-3__group-3)
header-inner-3-group-4: inner group (.c-header-inner-3__group-4)
header-inner-3-icon: icon placeholder, 24px (.c-header-inner-3__icon, 2 instances)
header-inner-3-group-5: inner group (.c-header-inner-3__group-5)
header-inner-3-group-6: inner flex row (.c-header-inner-3__group-6)
header-inner-3-nav: inner flex row (.c-header-inner-3__nav)
header-inner-3-nav-item: inner group (.c-header-inner-3__nav-item)
header-inner-3-nav-link: link (.c-header-inner-3__nav-link)
header-inner-3-group-7: inner flex column (.c-header-inner-3__group-7, 5 instances)
header-inner-3-group-8: inner group (.c-header-inner-3__group-8, 5 instances)
header-inner-3-text: label text, 7 characters (.c-header-inner-3__text)
header-inner-3-nav-item-2: inner group (.c-header-inner-3__nav-item-2, 3 instances)
header-inner-3-nav-link-2: link (.c-header-inner-3__nav-link-2, 4 instances)
header-inner-3-icon-2: icon placeholder, 21x23px (.c-header-inner-3__icon-2)
header-inner-3-text-2: label text, 9 characters (.c-header-inner-3__text-2, 4 instances)
header-inner-3-group-9: inner group (.c-header-inner-3__group-9)
header-inner-3-icon-3: icon placeholder, 26x12px (.c-header-inner-3__icon-3)
header-inner-3-icon-4: icon placeholder, 22x24px (.c-header-inner-3__icon-4)
header-inner-3-icon-5: icon placeholder, 25x24px (.c-header-inner-3__icon-5)
header-inner-3-nav-item-3: inner group (.c-header-inner-3__nav-item-3)
header-inner-3-icon-6: icon placeholder, 26px (.c-header-inner-3__icon-6)
header-inner-3-group-10: inner flex row (.c-header-inner-3__group-10)
header-inner-3-group-11: inner block (.c-header-inner-3__group-11)
header-inner-3-group-12: inner block (.c-header-inner-3__group-12)
header-inner-3-cta: the button-ghost-5 button (.c-header-inner-3__cta)
header-inner-3-cta-icon: icon placeholder, 18px (.c-header-inner-3__cta-icon)
header-inner-3-cta-2: the button-secondary-3 button, 8-character label (.c-header-inner-3__cta-2)
header-inner-3-cta-3: the button-primary-3 button, 6-character label (.c-header-inner-3__cta-3)

Recipe

HTML · CSS

<div class="c-header-inner-3-scope">
  <nav class="c-header-inner-3">
    <div class="c-header-inner-3__group">
      <div class="c-header-inner-3__group-2">
        <a class="c-header-inner-3__logo" href="#">
          <span class="c-header-inner-3__logo-icon" aria-hidden="true"></span>
        </a>
      </div>
      <div class="c-header-inner-3__inner">
        <div class="c-header-inner-3__group-3">
          <span class="c-header-inner-3__group-4">
            <span class="c-header-inner-3__icon" aria-hidden="true"></span>
          </span>
          <div class="c-header-inner-3__group-5"></div>
        </div>
      </div>
    </div>
    <div class="c-header-inner-3__group-6">
      <ul class="c-header-inner-3__nav">
        <li class="c-header-inner-3__nav-item">
          <a class="c-header-inner-3__nav-link" href="#">
            <span class="c-header-inner-3__group-7">
              <span class="c-header-inner-3__group-8">
                <span class="c-header-inner-3__icon" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner-3__text">lorem i</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner-3__nav-item-2">
          <a class="c-header-inner-3__nav-link-2" href="#">
            <span class="c-header-inner-3__group-7">
              <span class="c-header-inner-3__group-8">
                <span class="c-header-inner-3__icon-2" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner-3__text-2">lorem ips</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner-3__nav-item-2">
          <a class="c-header-inner-3__nav-link-2" href="#">
            <span class="c-header-inner-3__group-7">
              <span class="c-header-inner-3__group-9">
                <span class="c-header-inner-3__icon-3" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner-3__group-8">
                <span class="c-header-inner-3__icon-4" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner-3__text-2">lore</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner-3__nav-item-2">
          <a class="c-header-inner-3__nav-link-2" href="#">
            <span class="c-header-inner-3__group-7">
              <span class="c-header-inner-3__group-8">
                <span class="c-header-inner-3__icon-5" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner-3__text-2">lorem</span>
            </span>
          </a>
        </li>
        <li class="c-header-inner-3__nav-item-3">
          <a class="c-header-inner-3__nav-link-2" href="#">
            <span class="c-header-inner-3__group-7">
              <span class="c-header-inner-3__group-8">
                <span class="c-header-inner-3__icon-6" aria-hidden="true"></span>
              </span>
              <span class="c-header-inner-3__text-2">lorem ips</span>
            </span>
          </a>
        </li>
      </ul>
    </div>
    <div class="c-header-inner-3__group-10">
      <div class="c-header-inner-3__group-11">
        <div class="c-header-inner-3__group-12">
          <button class="c-header-inner-3__cta" type="button">
            <span class="c-header-inner-3__cta-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
      <a class="c-header-inner-3__cta-2" href="#">lorem ip</a>
      <button class="c-header-inner-3__cta-3" type="button">lorem</button>
    </div>
  </nav>
</div>

.c-header-inner-3-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner-3 {
  display: flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #F0F1F2;
}

.c-header-inner-3__group {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 1px;
  box-sizing: border-box;
  height: 72px;
}

.c-header-inner-3__group-2 {
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  padding: 8px;
}

.c-header-inner-3__logo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  color: #0000EE;
  border-radius: 8px;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0000EE;
  transition: background-color 0.1s ease;
}

.c-header-inner-3__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__inner {
  display: block;
  box-sizing: border-box;
  max-width: 181px;
}

.c-header-inner-3__group-3 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-header-inner-3__group-4 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  margin-top: 5px;
  margin-left: 9px;
}

.c-header-inner-3__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__group-5 {
  display: block;
  box-sizing: border-box;
  width: 181px;
  height: 40px;
  padding: 10px 30px 10px 40px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #F0F1F2;
  color: #53575B;
  border: 0;
  border-radius: 20px;
  cursor: text;
  font-family: Arial;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  text-overflow: ellipsis;
  transition: all 0.2s ease-in-out;
}

.c-header-inner-3__group-6 {
  display: flex;
  box-sizing: border-box;
  height: 72px;
}

.c-header-inner-3__nav {
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner-3__nav-item {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
}

.c-header-inner-3__nav-link {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #121314;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 700;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-inner-3__nav-link::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-inner-3__group-7 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-3__group-8 {
  display: block;
  box-sizing: border-box;
  margin-bottom: 4px;
}

.c-header-inner-3__text {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #121314;
}

.c-header-inner-3__nav-item-2 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
  margin-left: 3px;
}

.c-header-inner-3__nav-link-2 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #53575B;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-header-inner-3__nav-link-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-header-inner-3__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 21px;
  height: 23px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__text-2 {
  display: block;
  box-sizing: border-box;
  padding-bottom: 4px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-inner-3__group-9 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  right: -10px;
}

.c-header-inner-3__icon-3 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 12px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__icon-4 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__icon-5 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 25px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__nav-item-3 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-left: 3px;
}

.c-header-inner-3__icon-6 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__group-10 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  flex-basis: 1px;
  box-sizing: border-box;
  height: 72px;
  padding-right: 24px;
}

.c-header-inner-3__group-11 {
  display: block;
  box-sizing: border-box;
  margin-right: 12px;
}

.c-header-inner-3__group-12 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-3__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  background-color: #F0F1F2;
  color: #121314;
  border: 0;
  border-radius: 100%;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background-color 0.2s ease;
}

.c-header-inner-3__cta-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-3__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #121314;
  color: #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  margin-left: 10px;
}

.c-header-inner-3__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  padding: 8px 16px;
  background-color: #FFFC00;
  color: #121314;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  margin-left: 10px;
}

.c-header-inner-3__logo:hover {
  background-color: #FFFC00;
}

.c-header-inner-3__nav-link:hover::before {
  background-color: #F0F1F2;
}

.c-header-inner-3__nav-link-2:hover::before {
  background-color: #F0F1F2;
}

.c-header-inner-3__cta:hover {
  background-color: #C7C7CC;
}

States

header-inner-3-logo hover (header-inner-3-logo-hover): background-color #FFFC00
header-inner-3-nav-link hover: ::before background-color #F0F1F2
header-inner-3-nav-link-2 hover: ::before background-color #F0F1F2
header-inner-3-cta hover (header-inner-3-cta-hover): background-color #C7C7CC

Action buttons

Action button

Verification: verified against the live page at desktop.

Anatomy

action-button: the component root, a <div> (.c-action-button)
action-button-icon: icon placeholder, 24px (.c-action-button__icon)

Recipe

HTML · CSS

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

.c-action-button-scope {
  background-color: #F0F1F2;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-action-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  transition: all 0.3s ease-out;
}

.c-action-button__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Action button (2)

Verification: verified against the live page at desktop.

Anatomy

action-button-2: the component root, a <div> (.c-action-button-2)
action-button-2-group: inner flex row (.c-action-button-2__group)
action-button-2-icon: icon placeholder, 32px (.c-action-button-2__icon)

Recipe

HTML · CSS

<div class="c-action-button-2-scope">
  <div class="c-action-button-2">
    <div class="c-action-button-2__group">
      <span class="c-action-button-2__icon" aria-hidden="true"></span>
    </div>
  </div>
</div>

.c-action-button-2-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-action-button-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  background-color: #F0F1F2;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  transition: all 0.3s ease-out;
}

.c-action-button-2__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.c-action-button-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Tabs

Tab

Verification: verified against the live page at desktop.

Anatomy

tab-active: the component root, a <button> (.c-tab-active), 8-character label

Recipe

HTML · CSS

<div class="c-tab-active-scope">
  <button class="c-tab-active" type="button">lorem ip</button>
</div>

.c-tab-active-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-tab-active {
  display: inline-block;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: max-content;
  padding: 16px 24px;
  position: relative;
  background-color: transparent;
  color: #121314;
  border: 0;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

.c-tab-active::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 167px;
  height: 2px;
  position: absolute;
  top: 54px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #121314;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.c-tab-active:hover {
  background-color: #0000000D;
}

States

hover (tab-active-hover): background-color #0000000D

Tab

Verification: verified against the live page at desktop.

Anatomy

tab: the component root, a <button> (.c-tab), 7-character label

Recipe

HTML · CSS

<div class="c-tab-scope">
  <button class="c-tab" type="button">lorem i</button>
</div>

.c-tab-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-tab {
  display: inline-block;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: max-content;
  padding: 16px 24px;
  position: relative;
  background-color: transparent;
  color: #53575B;
  border: 0;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}

.c-tab:hover {
  background-color: #0000000D;
  color: #121314;
}

States

hover (tab-hover): background-color #0000000D, color #121314

Video play control

Verification: verified against the live page at desktop.

Anatomy

video-play-control: the component root, a <div> (.c-video-play-control)
video-play-control-group: inner flex row (.c-video-play-control__group)
video-play-control-icon: icon placeholder, 32px (.c-video-play-control__icon)

Recipe

HTML · CSS

<div class="c-video-play-control-scope">
  <div class="c-video-play-control">
    <div class="c-video-play-control__group">
      <span class="c-video-play-control__icon" aria-hidden="true"></span>
    </div>
  </div>
</div>

.c-video-play-control-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-video-play-control {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  background-color: #00000080;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  transition: all 0.3s ease-out;
}

.c-video-play-control__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.c-video-play-control__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0.59375px 0.59375px 0.59375px 2.39062px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-video-play-control:hover {
  background-color: #FFFFFF73;
}

States

hover (video-play-control-hover): background-color #FFFFFF73

Verification: verified against the live page at desktop.

Anatomy

menu-toggle: the component root, a <div> (.c-menu-toggle)
menu-toggle-icon: icon placeholder, 24px (.c-menu-toggle__icon)

Recipe

HTML · CSS

<div class="c-menu-toggle-scope">
  <div class="c-menu-toggle">
    <span class="c-menu-toggle__icon" aria-hidden="true"></span>
  </div>
</div>

.c-menu-toggle-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-menu-toggle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  transition: all 0.3s ease-out;
}

.c-menu-toggle__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Mute control (3)

Verification: verified against the live page at desktop.

Anatomy

mute-control-3: the component root, a <div> (.c-mute-control-3)
mute-control-3-icon: icon placeholder, 24x19px (.c-mute-control-3__icon)

Recipe

HTML · CSS

<div class="c-mute-control-3-scope">
  <div class="c-mute-control-3">
    <span class="c-mute-control-3__icon" aria-hidden="true"></span>
  </div>
</div>

.c-mute-control-3-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-mute-control-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-align: right;
  transition: all 0.3s ease-out;
}

.c-mute-control-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 19px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

share-control: the component root, a <div> (.c-share-control)
share-control-icon: icon placeholder, 24px (.c-share-control__icon)

Recipe

HTML · CSS

<div class="c-share-control-scope">
  <div class="c-share-control">
    <span class="c-share-control__icon" aria-hidden="true"></span>
  </div>
</div>

.c-share-control-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-share-control {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  color: #121314;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-align: right;
  transition: all 0.3s ease-out;
}

.c-share-control__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Creator badge

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

Anatomy

creator-badge: the component root, a <button> (.c-creator-badge)
creator-badge-group: inner flex row (.c-creator-badge__group)
creator-badge-group-2: inner block (.c-creator-badge__group-2)
creator-badge-group-3: inner flex row (.c-creator-badge__group-3)
creator-badge-group-4: inner block (.c-creator-badge__group-4), content not captured
creator-badge-group-5: inner block (.c-creator-badge__group-5)
creator-badge-title: heading, 0 characters (.c-creator-badge__title)
creator-badge-text: label text, 15 characters (.c-creator-badge__text)
creator-badge-group-6: inner block (.c-creator-badge__group-6)
creator-badge-group-7: inner flex row (.c-creator-badge__group-7), content not captured

Recipe

HTML · CSS

<div class="c-creator-badge-scope">
  <button class="c-creator-badge" type="button">
    <div class="c-creator-badge__group">
      <div class="c-creator-badge__group-2">
        <div class="c-creator-badge__group-3">
          <div class="c-creator-badge__group-4"></div>
        </div>
      </div>
      <div class="c-creator-badge__group-5">
        <h5 class="c-creator-badge__title">
          <span class="c-creator-badge__text">lorem ipsum dol</span>
        </h5>
        <div class="c-creator-badge__group-6">
          <div class="c-creator-badge__group-7"></div>
        </div>
      </div>
    </div>
  </button>
</div>

.c-creator-badge-scope {
  background-color: #000000;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-creator-badge {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 1px 6px;
  position: absolute;
  top: 0px;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: Arial;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-creator-badge__group {
  display: flex;
  align-self: center;
  box-sizing: border-box;
  width: 100%;
  padding: 25px;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-creator-badge__group-2 {
  display: block;
  box-sizing: border-box;
  border-radius: 50%;
  margin-right: 8px;
}

.c-creator-badge__group-3 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 41px;
  height: 41px;
  padding: 1px;
  border-radius: 50%;
  transition: all 0.25s ease;
}

.c-creator-badge__group-4 {
  display: block;
  box-sizing: border-box;
  width: 35px;
  height: 35px;
  background-color: #FFFFFF;
  border-radius: 50%;
}

.c-creator-badge__group-5 {
  display: block;
  box-sizing: border-box;
}

.c-creator-badge__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.c-creator-badge__text {
  display: inline-block;
  box-sizing: border-box;
  max-width: 290px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #FFFFFF;
  text-overflow: ellipsis;
}

.c-creator-badge__group-6 {
  display: block;
  box-sizing: border-box;
  margin-top: -6px;
}

.c-creator-badge__group-7 {
  display: flex;
  align-self: center;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

navigation: the component root, a <nav> (.c-navigation)
navigation-list: inner flex row (.c-navigation__list)
navigation-item: inner group (.c-navigation__item)
navigation-link: link (.c-navigation__link)
navigation-group: inner flex column (.c-navigation__group, 5 instances), content not captured
navigation-item-2: inner group (.c-navigation__item-2, 3 instances)
navigation-link-2: link (.c-navigation__link-2, 4 instances)
navigation-item-3: inner group (.c-navigation__item-3)

Recipe

HTML · CSS

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <ul class="c-navigation__list">
      <li class="c-navigation__item">
        <a class="c-navigation__link" href="#">
          <span class="c-navigation__group"></span>
        </a>
      </li>
      <li class="c-navigation__item-2">
        <a class="c-navigation__link-2" href="#">
          <span class="c-navigation__group"></span>
        </a>
      </li>
      <li class="c-navigation__item-2">
        <a class="c-navigation__link-2" href="#">
          <span class="c-navigation__group"></span>
        </a>
      </li>
      <li class="c-navigation__item-2">
        <a class="c-navigation__link-2" href="#">
          <span class="c-navigation__group"></span>
        </a>
      </li>
      <li class="c-navigation__item-3">
        <a class="c-navigation__link-2" href="#">
          <span class="c-navigation__group"></span>
        </a>
      </li>
    </ul>
  </nav>
</div>

.c-navigation-scope {
  background-color: #FFFFFF;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-navigation {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #121314;
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

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

.c-navigation__item {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
}

.c-navigation__link {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #121314;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 700;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-navigation__link::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-navigation__group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.c-navigation__item-2 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-right: 3px;
  margin-left: 3px;
}

.c-navigation__link-2 {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  height: 100%;
  min-height: 72px;
  position: relative;
  color: #53575B;
  cursor: pointer;
  font-family: "Avenir Next", -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  text-decoration-line: none;
  padding-top: 2px;
}

.c-navigation__link-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 72px;
  height: 64px;
  position: absolute;
  top: 4px;
  right: 0px;
  bottom: 4px;
  left: 0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}

.c-navigation__item-3 {
  display: list-item;
  box-sizing: border-box;
  height: 100%;
  margin-left: 3px;
}

States

No hover or focus change was observed.

Do's and Don'ts

Do

Two typefaces only. Keep Avenir Next for everything and Arial only for form-field text (input typography). Do not introduce a third family.
Pills for labelled buttons. Every text button uses rounded.6xl (100px): button-primary, button-secondary, button-primary-2, button-secondary-2, button-primary-3, button-secondary-3. Icon-only buttons (button-ghost-2, button-ghost-5, button-ghost-4) are circles (rounded.full).
Pair yellow with ink. Snap Yellow (primary, #FFFC00) always carries on-primary (#121314) text, as on button-secondary-2 and button-primary-3. In the header it sits next to an Ink pill (button-primary-2, #121314 with on-dark text).
Blue marks the blue primary action. Action Blue (accent-blue, #0096E5) is the fill of button-primary (40px tall, white text) and appears on no other measured component fill.
Respect the measured control heights. Header CTAs are 32px (button-primary-2, button-secondary-2). Icon buttons and the search field are 40px (button-ghost-2, input). Selects are 34px (select). The large media pill is 46px (button-secondary).
Use tonal fills for secondary chrome. Icon buttons and the search pill fill with surface-subtle (#F0F1F2) and darken to #C7C7CC on hover (button-ghost-2).
Mark active nav with weight and underline. Use caption-strong, ink text and a 2px #121314 bottom border (header-inner-text-2); inactive labels use caption in body-muted.
Keep the soft shadow for floating elements. Use the observed tier rgba(0, 0, 0, 0.14) 0px 2px 4px 0px for lift, such as a floating CTA, and lean on tonal surfaces everywhere else.

Don't

Don't flood surfaces with primary. Yellow is a single-CTA accent and a logo hover, not a section background or text color.
Don't square off buttons. Avoid rounded.sm or rounded.lg on buttons; those radii belong to selects (select) and the logo hit area (header-landing-2-logo).
Don't draw the header divider in hairline. The header bottom border is 1px #F0F1F2 (header-landing-2). hairline (#CCCCCC) is for form-control outlines.
Don't add tracking. Keep letter spacing normal on headings and body; only eyebrow carries 0.78px.
Don't use pure black for text. Use ink (#121314); black is for media backdrops and the legal bar.
Don't put flat dark pills on white canvas. Graphite (surface-dark, #444546) belongs to buttons over media (button-secondary, card-button); on white use the Ink pill instead.
Don't stack shadows or invent blur. No backdrop-filter was measured, so over video use the translucent scrim of video-play-control instead.

Responsive Behavior

Scope

This is a two-viewport analysis (one desktop, one mobile capture). Breakpoint values were not observed, so none are given.

What changes between desktop and mobile

Header: the desktop header has three parts: a search pill on the left, a centered icon-over-label tab nav (Stories, Spotlight, Chat, Lenses, Snapchat+) and an Ink + Yellow CTA pair on the right. On mobile it collapses to a hamburger toggle, the search, and a single yellow "Open Snapchat" pill. The pill floats with the soft rgba(0, 0, 0, 0.14) 0px 2px 4px 0px shadow.
Primary navigation moves from the top bar to a bottom tab bar on mobile.
Home page: the asymmetric split (login column plus portrait-card grid) stacks into a single column. Cards become full-width and text centers.
Link directories and the footer reduce their column count and stack.
Spotlight: the two-pane layout is expected to stack the video above the detail column. This was not directly captured.

Touch targets

Comfortable: the 40px icon controls (button-ghost-2, header-landing-2-menu-toggle, action-button-2) and the 40px input are the touch-friendly size.
Small: 32px header pills (button-primary-2, button-secondary-2) are below a 44px comfortable target. When building mobile-first, prefer the 40px or 46px (button-secondary) sizes for primary taps.

Iteration Guide

Reference tokens, never raw hex. Use ink, surface-subtle, primary, accent-blue. Component-only state colors (#C7C7CC hover, #0000000D tab wash) should be added as named state tokens before reuse, not pasted inline.
Never break the pill/circle rule. Labelled buttons are rounded.6xl; icon buttons are rounded.full. A new button variant changes fill and height, never shape.
New button sizes copy an existing padding pair. Choose 8/16 (button-primary-2-padding-y/-x), 12/20 (button-primary-padding-y/-x) or 15/30 (button-secondary-padding-y/-x). Pair them with the button type token (14px/500).
Ration yellow. At most one primary element per view. It always carries on-primary text and usually sits next to an Ink pill. Dark mode keeps primary and accent-blue unchanged and swaps only neutral roles.
Add depth tonally first. Escalate in this order: surface-subtle fill, then a hairline (#F0F1F2 for dividers, hairline for form outlines), then the single soft shadow tier, and only for floating elements. Do not introduce new shadow values or blur.
Typography edits stay on the ladder. Use the existing 15 tokens with weights 400/500/600/700 and normal tracking. Signal active states with a weight step plus the 2px ink underline, never with a color accent.
Treat flagged recipes as approximate. card, card-3, header-inner, header-inner-3, image-button and creator-badge did not reproduce exactly. Verify against screenshots before relying on their internal layout.

Known Gaps

Flagged components (recipe did not reproduce exactly):
- card (flagged: the render matched 5% of the original pixels, below the 96% required (instance 1) after 2 correction attempts). Its media-heavy layout is only approximated.
- card-3 (flagged: the render matched 81% of the original pixels, below the 96% required (instance 4) after 2 correction attempts). Several inner groups' content was not captured.
- image-button (flagged: the render matched 53% of the original pixels, below the 96% required after 2 correction attempts).
- creator-badge (flagged: the render matched 96% of the original pixels, below the 96% required after 2 correction attempts).
- header-inner and header-inner-3 (flagged: the group-12 x position did not reproduce the measured 1173px after 2 correction attempts). The right-hand CTA cluster position is uncertain.
Unverifiable component: card-2 (not verifiable: what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged).
No page-level layout metrics: no section rhythm, page container max width or base spacing step was measured. Grid gaps exist only inside card recipe anatomy, not as spacing tokens.
Header font discrepancy: the header landmark reports its link font family as Graphik, while every recipe reports Avenir Next. Avenir Next was retained.
Interaction states are partial: hover fills were captured for icon buttons, tabs, the logo and the video control. Focus states were noted but not measured as values, and pressed/disabled states and button hover for the pill CTAs are unknown.
Dark theme: dark colors were sampled, but no component recipe was captured in dark mode, so dark component fills are inferred from role swaps.
Rare radii: rounded.xs, rounded.5xl and rounded.7xl each appeared once; their intended use is unclear.
Unreached surfaces: animation, video playback behavior, logged-in and auth-walled surfaces (chat, profile), and breakpoints between the two captured viewports were not reached.

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

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

Podobne

Zobacz wszystkie

Społeczności, social media i strony osobiste · Community & Forum

Dribbble

Design system Dribbble opiera się na głębokim, niemal czarnym granacie (#0d0c22) zestawionym z czystą białą powierzchnią. Sygnaturowy gorąco różowy akcent (#ea4c89) jest używany oszczędnie, do wyróżnień redakcyjnych i podkreślania elementów interaktywnych. Cały system typograficzny opiera się wyłącznie na kroju Mona Sans we wszystkich wagach, a hierarchię buduje samą wagą i rozmiarem. Językiem geometrii są przyciski w kształcie pigułki (border-radius: 1e+07px) i zaokrąglone karty (promień 12px). Układ jest przestronny, oparty na siatce bazowej 8px, a elewację sygnalizują subtelne cienie zamiast ciężkiego nakładania warstw.

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.

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.

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.

Podobne palety

IKEA

Design system Snapchat

Komponenty

Buttons11

Inputs4

Cards3

Extras15

Headers10

Overview

Colors

Brand & Accent

Surface

Text

Hairlines & Borders

Component & State Colors

Dark Mode

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Geometry character

Components

Buttons

Inputs

Selects

Cards

Image button

Nav link

Headers

Action buttons

Tabs

Video play control

Menu toggle

Mute control (3)

Share control

Creator badge

Navigation

Do's and Don'ts

Do

Don't

Responsive Behavior

Scope

What changes between desktop and mobile

Touch targets

Iteration Guide

Known Gaps

Podobne

Dribbble

Airbnb

IKEA

Notion

Railway

Shopify

Podobne palety