Design System Snapchat

PROEngine v4

Situs web Snapchat menggunakan tema terang berkontras tinggi yang berpusat pada warna kuning merek ikoniknya #FFFC00, permukaan utama hampir hitam (#121314), dan latar halaman putih yang bersih. Desainnya memadukan Avenir Next (utama) dengan Graphik (sekunder) untuk hierarki tipografi yang ramah namun tetap tertata. Elemen interaksi seperti tombol, pill, dan tag menggunakan radius penuh (100px), sedangkan input memakai radius 5px yang halus. Navigasi berupa pill mengambang dengan bayangan lembut. Konten ditampilkan dalam kartu media besar dengan teks putih di atasnya, menciptakan tata letak yang imersif dan menonjolkan pratinjau aplikasi. Kepadatan keseluruhannya sedang, dengan spasi yang lapang dan hierarki visual yang jelas, menjembatani konvensi UI pemasaran dan UI produk.

Sistem visual

100% keyakinan

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

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

xs · 4px

sm · 5px

md · 6px

lg · 8px

xl · 10px

2xl · 12px

3xl · 16px

4xl · 20px

5xl · 36px

6xl · 100px

7xl · 170px

full · 9999px

Komponen

Buttons11

100% kecocokan

ghost · desktop

DiamKecocokan 100%22 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

ghost · desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

ghost · desktop

DiamKecocokan 100%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

98% kecocokan

ghost · desktop

DiamKecocokan 98%34 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

ghost · desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

primary · desktop

DiamKecocokan 100%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

primary · desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

primary · desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

Resep di DESIGN.md

98% kecocokan

secondary · desktop

DiamKecocokan 98%21 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

Resep di DESIGN.md

Inputs4

98% kecocokan

desktop

DiamKecocokan 98%22 ukuran cocok

Render terpisah dari Input, diam — Render

HoverKecocokan 98%18 ukuran cocok

Render terpisah dari Input, hover — Render

FocusKecocokan 98%18 ukuran cocok

Render terpisah dari Input, focus — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%22 ukuran cocok

Render terpisah dari Input (2), diam — Render

FocusKecocokan 100%18 ukuran cocok

Render terpisah dari Input (2), focus — Render

Resep di DESIGN.md

98% kecocokan

desktop

DiamKecocokan 98%26 ukuran cocok

Render terpisah dari Select, diam — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%26 ukuran cocok

Render terpisah dari Select (2), diam — Render

Resep di DESIGN.md

Cards3

5% kecocokan

desktop

Hasil render-nya 5% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 5%135 ukuran cocok

Render terpisah dari Card, diam — Render

Diam, instance 2Kecocokan 21%135 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 5%135 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 35%135 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Tidak dapat diverifikasi

desktop

Tidak dapat diverifikasi: foto, media, atau iklan yang dipasang halaman di dalamnya menutupi sebagian besar elemen dan tidak ada perbedaan lain, jadi perbandingan tidak mengatakan apa pun tentang resepnya.

DiamKecocokan 100%57 ukuran cocok

Render terpisah dari Card (2), diam — Render

Diam, instance 2Kecocokan 100%57 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%57 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%57 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%57 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 100%57 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

81% kecocokan

desktop

Hasil render-nya 81% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%169 ukuran cocok

Render terpisah dari Card (3), diam — Render

HoverKecocokan 100%18 ukuran cocok

Render terpisah dari Card (3), hover — Render

FocusKecocokan 100%18 ukuran cocok

Render terpisah dari Card (3), focus — Render

Diam, instance 2Kecocokan 100%169 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%169 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 81%169 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%169 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Extras15

100% kecocokan

desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%56 ukuran cocok

Asli

Render

Resep di DESIGN.md

96% kecocokan

desktop

Hasil render-nya 96% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 96%192 ukuran cocok

Creator badge asli di situs, diam — Asli

Render terpisah dari Creator badge, diam — Render

Resep di DESIGN.md

53% kecocokan

desktop

Hasil render-nya 53% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 53%21 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

Resep di DESIGN.md

Tidak dicek

desktop

Tidak ada resep yang dibuat: elemen tidak dapat ditemukan di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

Tidak dicek

desktop

Tidak ada resep yang dibuat: elemen tidak dapat ditemukan di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

100% kecocokan

desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%21 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%374 ukuran cocok

Render terpisah dari Navigation, diam — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

Resep di DESIGN.md

97% kecocokan

desktop

DiamKecocokan 97%22 ukuran cocok

HoverKecocokan 97%18 ukuran cocok

Render terpisah dari Tab, hover — Render

Resep di DESIGN.md

96% kecocokan

desktop

DiamKecocokan 96%22 ukuran cocok

HoverKecocokan 96%18 ukuran cocok

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%56 ukuran cocok

Video play control asli di situs, diam — Asli

Render terpisah dari Video play control, diam — Render

HoverKecocokan 100%18 ukuran cocok

Video play control asli di situs, hover — Asli

Render terpisah dari Video play control, hover — Render

Resep di DESIGN.md

Tidak dicek

desktop

Tidak ada resep yang dibuat: elemen tidak dapat ditemukan di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

Headers10

98% kecocokan

desktop

Group 12 x bernilai 1183px, sedangkan situs memakai 1173px; Cta x bernilai 1183px, sedangkan situs memakai 1173px dan 1 lainnya.

DiamKecocokan 99%3 dari 885 ukuran berbeda

Header (inner) asli di situs, diam — Asli

Render terpisah dari Header (inner), diam — Render

Hovertidak dicek

Header (inner) asli di situs, hover — Asli

Render terpisah dari Header (inner), hover — Render

Hover pada ctaKecocokan 98%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada logoKecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav link 2Kecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%549 ukuran cocok

Header (inner, 2) asli di situs, diam — Asli

Render terpisah dari Header (inner, 2), diam — Render

Hovertidak dicek

Header (inner, 2) asli di situs, hover — Asli

Render terpisah dari Header (inner, 2), hover — Render

Hover pada nav link 2Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

98% kecocokan

desktop

Group 12 x bernilai 1183px, sedangkan situs memakai 1173px; Cta x bernilai 1183px, sedangkan situs memakai 1173px dan 1 lainnya.

DiamKecocokan 99%3 dari 885 ukuran berbeda

Header (inner, 3) asli di situs, diam — Asli

Render terpisah dari Header (inner, 3), diam — Render

Hovertidak dicek

Header (inner, 3) asli di situs, hover — Asli

Render terpisah dari Header (inner, 3), hover — Render

Hover pada ctaKecocokan 98%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada logoKecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav link 2Kecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%549 ukuran cocok

Header (landing) asli di situs, diam — Asli

Render terpisah dari Header (landing), diam — Render

Hovertidak dicek

Header (landing) asli di situs, hover — Asli

Render terpisah dari Header (landing), hover — Render

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%885 ukuran cocok

Header (landing, 2) asli di situs, diam — Asli

Render terpisah dari Header (landing, 2), diam — Render

Hovertidak dicek

Header (landing, 2) asli di situs, hover — Asli

Render terpisah dari Header (landing, 2), hover — Render

Hover pada logoKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada menu toggleKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Tidak dicek

mobile

Tidak ada resep yang dibuat: elemen tidak dapat ditemukan di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

Tidak dicek

mobile

Tidak ada resep yang dibuat: elemen tidak dapat ditemukan di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

Tidak dicek

mobile

Tidak ada resep yang dibuat: elemen tidak terlihat.

Tidak ada yang dibandingkan untuk komponen ini.

Tidak dicek

mobile

Tidak ada resep yang dibuat: elemen tidak dapat ditemukan di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

Tidak dicek

mobile

Tidak ada resep yang dibuat: elemen tidak dapat ditemukan di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

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.

File DESIGN.md ini berbahasa Inggris, bahasa yang dibaca oleh agen coding AI.

Diekstrak dari website publik Snapchat, bukan pedoman brand resmi. Cek font situs lain

Serupa dengan ini

Lihat semua

Komunitas, Sosial & Personal · Community & Forum

Dribbble

Sistem desain Dribbble dibangun di atas navy hampir hitam yang dalam (#0d0c22) yang dipadukan dengan permukaan putih yang bersih, diselingi aksen pink-panas khas (#ea4c89) yang digunakan secukupnya untuk penekanan editorial dan sorotan interaktif. Seluruh sistem tipografinya hanya mengandalkan Mona Sans di semua ketebalan, sehingga hierarki dibentuk melalui ketebalan dan ukuran saja. Tombol berbentuk pil (border-radius: 1e+07px) dan kartu dengan sudut membulat (radius 12px) menjadi bahasa geometri utamanya. Tata letaknya lapang dengan grid dasar 8px, dan elevasi dihadirkan melalui drop shadow yang halus, bukan tumpukan lapisan yang berat.

Perjalanan, Transportasi & Logistik

Airbnb

Sistem desain Airbnb dibangun di sekitar satu font variabel milik sendiri (Airbnb Cereal VF), dengan palet netral hampir monokrom yang berpusat pada abu-abu arang tua (#222222) dan abu-abu terang. Warna coral-pink khas merek, "Rausch" (#ff385c), hanya digunakan untuk CTA utama dan logo. Tata letaknya berupa grid kartu foto yang responsif, dengan rasio gambar terhadap teks yang lega, sudut kartu membulat 20px yang lembut, serta sistem bayangan ambient berlapis banyak yang menciptakan kedalaman halus tanpa kontras yang keras. Bilah pencarian berbentuk pil yang menonjol menyatukan aksi utama pengguna.

Perdagangan & Ritel · E-commerce Store

IKEA

IKEA-Yellow (#ffdb00) berfungsi sebagai permukaan aksi utama dan IKEA Blue (#0058a3) sebagai aksen logo merek, dalam sistem desain IKEA yang tegas dan datar pada beranda globalnya. Seluruh sistem tipografi dibangun dengan satu huruf kustom, Noto IKEA, dengan bobot 400 dan 700 pada skala yang ketat, dari teks isi 14px hingga judul display 51px. Elevasi dibentuk sepenuhnya lewat kontras warna dan struktur tata letak, bukan bayangan. Tata letak memakai kontainer lebar maksimum 90rem dengan jarak grid desktop 1.5rem, serta token radius sudut 8px yang konsisten untuk elemen interaktif. Latar belakang off-white #fffefb memberi kesan hangat di samping teks #111111 yang tegas, sehingga pengalaman membaca tetap berkontras tinggi dan mudah diakses.

Software & SaaS · Productivity & Notes

Notion

Halaman beranda pemasaran Notion memadukan bagian hero navy tua (#02093a) dengan badan halaman yang terang (#f6f5f4), dan menggunakan tipografi kustom (NotionInter) untuk semua peran teks. Desainnya memakai grid 12 kolom dengan gutter 28px, serta bahasa radius ganda: 8px untuk kartu dan 9999px untuk pill. Sistem bayangan progresif berlapis banyak diterapkan pada elemen UI yang tampak melayang. Warna biru merek (#2537b1) menjadi penggerak CTA dan sorotan aksen, sementara tangga skala abu-abu semantik (gray-200 hingga gray-900) menata hierarki teks dan permukaan.

Developer & Infrastruktur · Developer Tools & IDEs

Railway

Sistem desain Railway adalah antarmuka platform pengembang yang mengutamakan mode gelap, berakar pada permukaan biru laut hampir hitam yang pekat (#13111c, #0b0b0f), teks off-white berkontras tinggi (#f7f7f8), dan aksen merek ungu yang khas (#853bce / #553f83). Bagian hero menggunakan IBM Plex Serif untuk kesan editorial yang tegas, sedangkan Inter menangani seluruh teks antarmuka dan JetBrains Mono / SF Mono digunakan untuk konteks kode. Elevasi dicapai melalui border dengan cahaya putih di bagian dalam (rgba(255,255,255,0.2) 1.5px inset), bukan bayangan jatuh, sehingga antarmuka memiliki nuansa panel kaca. Sistem spasinya berbasis kelipatan 4px dengan ritme 8/12/16/24/32 yang kuat. Radius sudutnya rapat (dominan 4px), dengan 8px dan 16px yang digunakan secara selektif untuk kartu dan wadah hero.

Bisnis & Layanan Profesional

Shopify

Halaman beranda pemasaran Shopify menggunakan hero video layar penuh yang dramatis dengan latar belakang hampir hitam (#02090a) yang kontras tajam dengan bilah navigasi putih di atasnya. Aksen merek utamanya adalah hijau mint cerah (#36f4a4) yang digunakan secara hemat untuk sorotan dan status interaktif. Tipografinya terbagi antara NeueHaasGrotesk untuk judul display dan editorial, serta Inter-Variable untuk teks isi UI. CTA menggunakan bentuk pill dengan sudut membulat penuh (border-radius: 9999px). Secara keseluruhan, sistem ini terkesan percaya diri, berkontras tinggi, dan aspiratif, dirancang untuk mengubah pengunjung menjadi pedagang.

Palet serupa

IKEA

Design System Snapchat

Komponen

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

Serupa dengan ini

Dribbble

Airbnb

IKEA

Notion

Railway

Shopify

Palet serupa