Snapchat Design System

snapchat.com

PROEngine v4

Visual system

100% confidence

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

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

xs · 4px

sm · 5px

md · 6px

lg · 8px

xl · 10px

2xl · 12px

3xl · 16px

4xl · 20px

5xl · 36px

6xl · 100px

7xl · 170px

full · 9999px

Components

Button11

100% match

ghost · desktop

At rest100% match22 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match34 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match22 measurements match

Original

Render

Recipe in DESIGN.md

98% match

ghost · desktop

At rest98% match34 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match34 measurements match

Original

Render

Hover100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match21 measurements match

Original

Render

Recipe in DESIGN.md

100% match

primary · desktop

At rest100% match21 measurements match

Original

Render

Recipe in DESIGN.md

98% match

secondary · desktop

At rest98% match21 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match21 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match21 measurements match

Original

Render

Recipe in DESIGN.md

Input4

98% match

desktop

At rest98% match22 measurements match

Original Input on the site, at rest — Original

Isolated render of Input, at rest — Render

Hover98% match18 measurements match

Original Input on the site, hover — Original

Isolated render of Input, hover — Render

Focus98% match18 measurements match

Original Input on the site, focus — Original

Isolated render of Input, focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match22 measurements match

Original Input (2) on the site, at rest — Original

Isolated render of Input (2), at rest — Render

Focus100% match18 measurements match

Original Input (2) on the site, focus — Original

Isolated render of Input (2), focus — Render

Recipe in DESIGN.md

98% match

desktop

At rest98% match26 measurements match

Original Select on the site, at rest — Original

Isolated render of Select, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match26 measurements match

Original Select (2) on the site, at rest — Original

Isolated render of Select (2), at rest — Render

Recipe in DESIGN.md

Card3

5% match

desktop

It renders 5% like the site, below the 96% bar.

At rest5% match135 measurements match

Original Card on the site, at rest — Original

Isolated render of Card, at rest — Render

At rest, instance 221% match135 measurements match

Original

No image stored

Render

No image stored

At rest, instance 35% match135 measurements match

Original

No image stored

Render

No image stored

At rest, instance 435% match135 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match57 measurements match

Original Card (2) on the site, at rest — Original

Isolated render of Card (2), at rest — Render

At rest, instance 2100% match57 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match57 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match57 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match57 measurements match

Original

No image stored

Render

No image stored

At rest, instance 6100% match57 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

81% match

desktop

It renders 81% like the site, below the 96% bar.

At rest100% match169 measurements match

Original Card (3) on the site, at rest — Original

Isolated render of Card (3), at rest — Render

Hover100% match18 measurements match

Original Card (3) on the site, hover — Original

Isolated render of Card (3), hover — Render

Focus100% match18 measurements match

Original Card (3) on the site, focus — Original

Isolated render of Card (3), focus — Render

At rest, instance 2100% match169 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match169 measurements match

Original

No image stored

Render

No image stored

At rest, instance 481% match169 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match169 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Extra15

100% match

desktop

At rest100% match34 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match56 measurements match

Original

Render

Recipe in DESIGN.md

96% match

desktop

It renders 96% like the site, below the 96% bar.

At rest96% match192 measurements match

Original Creator badge on the site, at rest — Original

Isolated render of Creator badge, at rest — Render

Recipe in DESIGN.md

53% match

desktop

It renders 53% like the site, below the 96% bar.

At rest53% match21 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original

Render

Recipe in DESIGN.md

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

100% match

desktop

At rest100% match34 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match21 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match374 measurements match

Original Navigation on the site, at rest — Original

Isolated render of Navigation, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original

Render

Recipe in DESIGN.md

97% match

desktop

At rest97% match22 measurements match

Original Tab on the site, at rest — Original

Isolated render of Tab, at rest — Render

Hover97% match18 measurements match

Original Tab on the site, hover — Original

Recipe in DESIGN.md

96% match

desktop

At rest96% match22 measurements match

Hover96% match18 measurements match

Recipe in DESIGN.md

100% match

desktop

At rest100% match56 measurements match

Original Video play control on the site, at rest — Original

Isolated render of Video play control, at rest — Render

Hover100% match18 measurements match

Original Video play control on the site, hover — Original

Isolated render of Video play control, hover — Render

Recipe in DESIGN.md

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Header10

98% match

desktop

Group 12 x is 1183px, the site has 1173px; Cta x is 1183px, the site has 1173px and 1 more.

At rest99% match3 of 885 measurements differ

Original Header (inner) on the site, at rest — Original

Isolated render of Header (inner), at rest — Render

Hovernot checked

Original Header (inner) on the site, hover — Original

Isolated render of Header (inner), hover — Render

Hover on cta98% match18 measurements match

Original

No image stored

Render

No image stored

Hover on logo99% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link 299% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link99% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match549 measurements match

Original Header (inner, 2) on the site, at rest — Original

Isolated render of Header (inner, 2), at rest — Render

Hovernot checked

Original Header (inner, 2) on the site, hover — Original

Isolated render of Header (inner, 2), hover — Render

Hover on nav link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

98% match

desktop

Group 12 x is 1183px, the site has 1173px; Cta x is 1183px, the site has 1173px and 1 more.

At rest99% match3 of 885 measurements differ

Original Header (inner, 3) on the site, at rest — Original

Isolated render of Header (inner, 3), at rest — Render

Hovernot checked

Original Header (inner, 3) on the site, hover — Original

Isolated render of Header (inner, 3), hover — Render

Hover on cta98% match18 measurements match

Original

No image stored

Render

No image stored

Hover on logo99% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link 299% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link99% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match549 measurements match

Original Header (landing) on the site, at rest — Original

Isolated render of Header (landing), at rest — Render

Hovernot checked

Original Header (landing) on the site, hover — Original

Isolated render of Header (landing), hover — Render

Hover on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match885 measurements match

Original Header (landing, 2) on the site, at rest — Original

Isolated render of Header (landing, 2), at rest — Render

Hovernot checked

Original Header (landing, 2) on the site, hover — Original

Isolated render of Header (landing, 2), hover — Render

Hover on logo100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on menu toggle100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

mobile

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

mobile

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

mobile

No recipe was made: the element was not visible.

Nothing was compared for this component.

Not checked

mobile

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

Not checked

mobile

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

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.

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

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

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.

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.

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.

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

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.

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.

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.

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.

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

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

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

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

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.

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

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.

Extracted from Snapchat’s public website, not official brand guidelines.

More like this

Browse all

Community, Social & Personal · Community & Forum

Dribbble

Dribbble's design system is built on a deep near-black navy (#0d0c22) paired with a crisp white surface, punctuated by a signature hot-pink (#ea4c89) accent used sparingly for editorial emphasis and interactive highlights. The entire typographic system relies exclusively on Mona Sans across all weights, creating hierarchy through weight and size alone. Pill-shaped buttons (border-radius: 1e+07px) and rounded cards (12px radius) define the geometry language. The layout is spacious with an 8px base grid, and elevation is conveyed through subtle drop shadows rather than heavy layering.

Travel, Transport & Logistics

Airbnb

Airbnb's design system is built around a single proprietary variable font (Airbnb Cereal VF), a near-monochrome neutral palette anchored by deep charcoal (#222222) and light grays, with the brand's signature "Rausch" coral-pink (#ff385c) reserved exclusively for primary CTAs and the logo. The layout is a responsive photo-card grid with generous image-to-text ratios, soft 20px rounded corners on cards, and a multi-layer ambient shadow system that creates subtle depth without harsh contrast. The search bar is a prominent pill-shaped container that unifies the core user action.

Commerce & Retail · E-commerce Store

IKEA

IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface — Noto IKEA — spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings. Elevation is conveyed entirely through color contrast and layout structure rather than shadows. The layout uses a max-width container of 90rem with a 1.5rem desktop grid gap, and a consistent 8px border-radius token applied to interactive elements. The off-white background (#fffefb) provides warmth against the stark #111111 text, creating a high-contrast, accessible reading experience.

Software & SaaS · Productivity & Notes

Notion

Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements. Brand blue (#2537b1) drives CTAs and accent highlights, while a semantic gray-scale ladder (gray-200 through gray-900) structures all text and surface hierarchy.

Developer & Infrastructure · Developer Tools & IDEs

Railway

Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono / SF Mono serve code contexts. Elevation is achieved through inset white-glow borders (rgba(255,255,255,0.2) 1.5px inset) rather than drop shadows, giving the UI a glass-panel aesthetic. The spacing system is 4px-based with a strong 8/12/16/24/32 rhythm. Border radii are tight (4px dominant) with selective 8px and 16px for cards and hero containers.

Business & Professional Services

Shopify

Shopify's marketing homepage uses a dramatic full-bleed video hero with a near-black (#02090a) background that contrasts sharply with the white navigation bar above. The primary brand accent is a vivid mint green (#36f4a4) used sparingly for highlights and interactive states. Typography is split between NeueHaasGrotesk for display/editorial headings and Inter-Variable for UI body copy. CTAs use fully-rounded pill shapes (border-radius: 9999px). The overall system is confident, high-contrast, and aspirational — built to convert visitors into merchants.

Snapchat Design System

Button11

Input4

Card3

Extra15

Header10

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

Button, primary

Button, secondary

Button, ghost

Input

Input (2)

Select

Card

Image button

Nav link

Header (landing)

Header (landing, 2)

Button, primary (2)

Button, secondary (2)

Button, ghost (2)

Button, ghost (3)

Button, ghost (4)

Select (2)

Card (2)

Action button

Action button (2)

Tab

Tab

Header (inner)

Header (inner, 2)

Button, primary (3)

Button, secondary (3)

Button, ghost (5)

Card (3)

Video play control

Menu toggle

Mute control (3)

Share control

Creator badge

Navigation

Header (inner, 3)

Do's and Don'ts

Do

Don't

Responsive Behavior

Scope

What changes between desktop and mobile

Touch targets

Iteration Guide

Known Gaps

More like this

Dribbble

Airbnb

IKEA

Notion

Railway

Shopify