Snapchat Tasarım Sistemi

PROMotor v4

Snapchat'in web varlığı, ikonik #FFFC00 marka sarısıyla dengelenmiş yüksek kontrastlı bir açık tema kullanır; bunun yanında #121314 tonunda neredeyse siyah birincil yüzeyler ve temiz beyaz bir sayfa arka planı yer alır. Tasarım, dostça ama yapılandırılmış bir tipografik hiyerarşi için birincil olarak Avenir Next'i, ikincil olarak Graphik'i eşleştirir. Düğme, hap biçimli etiket ve etiketler gibi etkileşim öğeleri tamamen yuvarlak (100px) köşe yarıçapı kullanırken, giriş alanları 5px'lik ince bir yarıçapa sahiptir. Gezinme, yumuşak bir gölgeye sahip yüzen bir hap biçimindedir. İçerik, üzerine beyaz metin yerleştirilmiş büyük medya kartlarında sunulur; bu da sürükleyici, uygulama önizlemesini öne çıkaran bir yerleşim oluşturur. Genel yoğunluk orta düzeydedir; geniş boşluklar ve net bir görsel hiyerarşi, pazarlama ve ürün arayüzü geleneklerini birbirine bağlar.

Görsel sistem

%100 güven

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 güven

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 güven

xs · 4px

sm · 5px

md · 6px

lg · 8px

xl · 10px

2xl · 12px

3xl · 16px

4xl · 20px

5xl · 36px

6xl · 100px

7xl · 170px

full · 9999px

Bileşenler

Buttons11

%100 eşleşme

ghost · desktop

Durağan%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

ghost · desktop

Durağan%100 eşleşme34 ölçüm eşleşiyor

Orijinal

Render

Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

ghost · desktop

Durağan%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%98 eşleşme

ghost · desktop

Durağan%98 eşleşme34 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

ghost · desktop

Durağan%100 eşleşme34 ölçüm eşleşiyor

Orijinal

Render

Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

primary · desktop

Durağan%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

primary · desktop

Durağan%100 eşleşme21 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

primary · desktop

Durağan%100 eşleşme21 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%98 eşleşme

secondary · desktop

Durağan%98 eşleşme21 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

secondary · desktop

Durağan%100 eşleşme21 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

secondary · desktop

Durağan%100 eşleşme21 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

Inputs4

%98 eşleşme

desktop

Durağan%98 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal Input, durağan — Orijinal

Input için ayrı render, durağan — Render

Hover%98 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Input, hover — Orijinal

Focus%98 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Input, focus — Orijinal

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal Input (2), durağan — Orijinal

Input (2) için ayrı render, durağan — Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Input (2), focus — Orijinal

Input (2) için ayrı render, focus — Render

DESIGN.md içindeki tarif

%98 eşleşme

desktop

Durağan%98 eşleşme26 ölçüm eşleşiyor

Sitedeki orijinal Select, durağan — Orijinal

Select için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme26 ölçüm eşleşiyor

Sitedeki orijinal Select (2), durağan — Orijinal

Select (2) için ayrı render, durağan — Render

DESIGN.md içindeki tarif

Cards3

%5 eşleşme

desktop

Siteye %5 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%5 eşleşme135 ölçüm eşleşiyor

Sitedeki orijinal Card, durağan — Orijinal

Durağan, örnek 2%21 eşleşme135 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%5 eşleşme135 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%35 eşleşme135 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Doğrulanamaz

desktop

Doğrulanamaz: sayfanın içine yerleştirdiği fotoğraflar, medya veya reklamlar öğenin çoğunu kaplıyor ve başka hiçbir şey farklı değil, bu yüzden karşılaştırma tarif hakkında bir şey söylemiyor.

Durağan%100 eşleşme57 ölçüm eşleşiyor

Sitedeki orijinal Card (2), durağan — Orijinal

Card (2) için ayrı render, durağan — Render

Durağan, örnek 2%100 eşleşme57 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme57 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%100 eşleşme57 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 5%100 eşleşme57 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 6%100 eşleşme57 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%81 eşleşme

desktop

Siteye %81 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%100 eşleşme169 ölçüm eşleşiyor

Sitedeki orijinal Card (3), durağan — Orijinal

Card (3) için ayrı render, durağan — Render

Hover%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card (3), hover — Orijinal

Card (3) için ayrı render, hover — Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card (3), focus — Orijinal

Card (3) için ayrı render, focus — Render

Durağan, örnek 2%100 eşleşme169 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme169 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%81 eşleşme169 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 5%100 eşleşme169 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Extras15

%100 eşleşme

desktop

Durağan%100 eşleşme34 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme56 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%96 eşleşme

desktop

Siteye %96 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%96 eşleşme192 ölçüm eşleşiyor

Sitedeki orijinal Creator badge, durağan — Orijinal

Creator badge için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%53 eşleşme

desktop

Siteye %53 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%53 eşleşme21 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme34 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

Kontrol edilmedi

desktop

Tarif oluşturulmadı: öğe sayfada bulunamadı.

Bu bileşen için hiçbir şey karşılaştırılmadı.

Kontrol edilmedi

desktop

Tarif oluşturulmadı: öğe sayfada bulunamadı.

Bu bileşen için hiçbir şey karşılaştırılmadı.

%100 eşleşme

desktop

Durağan%100 eşleşme34 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme21 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme374 ölçüm eşleşiyor

Sitedeki orijinal Navigation, durağan — Orijinal

Navigation için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme34 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%97 eşleşme

desktop

Durağan%97 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal Tab, durağan — Orijinal

Hover%97 eşleşme18 ölçüm eşleşiyor

DESIGN.md içindeki tarif

%96 eşleşme

desktop

Durağan%96 eşleşme22 ölçüm eşleşiyor

Hover%96 eşleşme18 ölçüm eşleşiyor

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme56 ölçüm eşleşiyor

Sitedeki orijinal Video play control, durağan — Orijinal

Video play control için ayrı render, durağan — Render

Hover%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Video play control, hover — Orijinal

Video play control için ayrı render, hover — Render

DESIGN.md içindeki tarif

Kontrol edilmedi

desktop

Tarif oluşturulmadı: öğe sayfada bulunamadı.

Bu bileşen için hiçbir şey karşılaştırılmadı.

Headers10

%98 eşleşme

desktop

Group 12 x değeri 1183px, sitede ise 1173px; Cta x değeri 1183px, sitede ise 1173px ve 1 tane daha.

Durağan%99 eşleşme885 ölçümden 3 tanesi farklı

Sitedeki orijinal Header (inner), durağan — Orijinal

Header (inner) için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Header (inner), hover — Orijinal

Header (inner) için ayrı render, hover — Render

cta üzerinde Hover%98 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

logo üzerinde Hover%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

nav link 2 üzerinde Hover%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

nav link üzerinde Hover%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme549 ölçüm eşleşiyor

Sitedeki orijinal Header (inner, 2), durağan — Orijinal

Header (inner, 2) için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Header (inner, 2), hover — Orijinal

Header (inner, 2) için ayrı render, hover — Render

nav link 2 üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

nav link üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%98 eşleşme

desktop

Group 12 x değeri 1183px, sitede ise 1173px; Cta x değeri 1183px, sitede ise 1173px ve 1 tane daha.

Durağan%99 eşleşme885 ölçümden 3 tanesi farklı

Sitedeki orijinal Header (inner, 3), durağan — Orijinal

Header (inner, 3) için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Header (inner, 3), hover — Orijinal

Header (inner, 3) için ayrı render, hover — Render

cta üzerinde Hover%98 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

logo üzerinde Hover%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

nav link 2 üzerinde Hover%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

nav link üzerinde Hover%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme549 ölçüm eşleşiyor

Sitedeki orijinal Header (landing), durağan — Orijinal

Header (landing) için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Header (landing), hover — Orijinal

Header (landing) için ayrı render, hover — Render

nav link üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme885 ölçüm eşleşiyor

Sitedeki orijinal Header (landing, 2), durağan — Orijinal

Header (landing, 2) için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Header (landing, 2), hover — Orijinal

Header (landing, 2) için ayrı render, hover — Render

logo üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

menu toggle üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

nav link üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Kontrol edilmedi

mobile

Tarif oluşturulmadı: öğe sayfada bulunamadı.

Bu bileşen için hiçbir şey karşılaştırılmadı.

Kontrol edilmedi

mobile

Tarif oluşturulmadı: öğe sayfada bulunamadı.

Bu bileşen için hiçbir şey karşılaştırılmadı.

Kontrol edilmedi

mobile

Tarif oluşturulmadı: öğe görünür değildi.

Bu bileşen için hiçbir şey karşılaştırılmadı.

Kontrol edilmedi

mobile

Tarif oluşturulmadı: öğe sayfada bulunamadı.

Bu bileşen için hiçbir şey karşılaştırılmadı.

Kontrol edilmedi

mobile

Tarif oluşturulmadı: öğe sayfada bulunamadı.

Bu bileşen için hiçbir şey karşılaştırılmadı.

DESIGN.md

Snapchat

Overview

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

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

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

Key Characteristics:

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

Colors

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

Brand & Accent

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

Surface

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

Text

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

Hairlines & Borders

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

Component & State Colors

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

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

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

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

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

The override layer only remaps the neutral roles.

Dark Mode

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

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

Typography

Font Family

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

Hierarchy

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

Principles

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

Note on Font Substitutes

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

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

Layout

Spacing System

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

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

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

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

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

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

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

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

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

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

Grid & Container

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

Whitespace Philosophy

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

Measured Layout

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

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

Elevation & Depth

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

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

Shadow philosophy.

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

Shapes

Border Radius Scale

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

Geometry character

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

Pills and circles are the rule for interaction:

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

Containers scale their radius with their size:

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

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

Components

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

Buttons

Button, primary

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

States

No hover or focus change was observed.

Button, secondary

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

States

No hover or focus change was observed.

Button, ghost

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

States

focus: outline none

Button, primary (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

States

No hover or focus change was observed.

Button, secondary (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

States

No hover or focus change was observed.

Button, ghost (2)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-2: the component root, a <button> (.c-button-ghost-2)
button-ghost-2-icon: icon placeholder, 18px (.c-button-ghost-2__icon)

Recipe

HTML · CSS

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

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

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

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

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

States

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

Button, ghost (3)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

States

No hover or focus change was observed.

Button, ghost (4)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

States

No hover or focus change was observed.

Button, primary (3)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

States

No hover or focus change was observed.

Button, secondary (3)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

States

No hover or focus change was observed.

Button, ghost (5)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-5: the component root, a <button> (.c-button-ghost-5)
button-ghost-5-icon: icon placeholder, 18px (.c-button-ghost-5__icon)

Recipe

HTML · CSS

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

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

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

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

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

States

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

Inputs

Input

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

States

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

Input (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

States

focus: outline none

Selects

Select

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

States

No hover or focus change was observed.

Select (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

States

No hover or focus change was observed.

Cards

Card

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

States

No hover or focus change was observed.

Card (2)

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

States

No hover or focus change was observed.

Card (3)

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

States

hover: padding 0px
focus: padding 0px

Image button

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

States

No hover or focus change was observed.

Nav link

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

States

No hover or focus change was observed.

Headers

Header (landing)

Verification: verified against the live page at desktop.

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

States

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

Header (landing, 2)

Verification: verified against the live page at desktop.

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

States

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

Header (inner)

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

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

States

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

Header (inner, 2)

Verification: verified against the live page at desktop.

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

States

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

Header (inner, 3)

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

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

States

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

Action buttons

Action button

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

States

No hover or focus change was observed.

Action button (2)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

States

No hover or focus change was observed.

Tabs

Tab

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

States

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

Tab

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

States

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

Video play control

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

States

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

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

States

No hover or focus change was observed.

Mute control (3)

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

States

No hover or focus change was observed.

Creator badge

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

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

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

Recipe

HTML · CSS

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

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

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

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

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

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

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

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

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

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

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

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

States

No hover or focus change was observed.

Do's and Don'ts

Do

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

Don't

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

Responsive Behavior

Scope

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

What changes between desktop and mobile

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

Touch targets

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

Iteration Guide

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

Known Gaps

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

Bu DESIGN.md dosyası, AI kodlama ajanlarının onu okuduğu dil olan İngilizcedir.

Snapchat web sitesinin herkese açık sayfalarından çıkarıldı, resmi marka yönergeleri değildir. Başka bir sitenin fontlarını kontrol et

Benzerleri

Tümüne göz at

Topluluk, Sosyal ve Kişisel · Community & Forum

Dribbble

Dribbble'ın tasarım sistemi, saf beyaza yakın bir yüzey üzerinde derin, neredeyse siyah bir lacivert (#0d0c22) ile kurulmuştur; editoryal vurgu ve etkileşimli öne çıkarmalar için ölçülü kullanılan imza niteliğindeki sıcak pembe (#ea4c89) vurgu rengiyle noktalanır. Tüm tipografik sistem, tüm ağırlıklarda yalnızca Mona Sans'a dayanır ve hiyerarşiyi yalnızca ağırlık ve boyutla kurar. Hap biçimindeki düğmeler (border-radius: 1e+07px) ve yuvarlatılmış kartlar (12px köşe yarıçapı) geometri dilini belirler. Yerleşim, 8px temel ızgarayla ferah bir düzendedir ve yükseklik, ağır katmanlar yerine ince gölgelerle ifade edilir.

Seyahat, Ulaşım ve Lojistik

Airbnb

Airbnb'nin tasarım sistemi, tek bir özel değişken yazı tipi (Airbnb Cereal VF) etrafında kurulmuş. Renk paleti neredeyse tek renkli; derin kömür grisi (#222222) ve açık gri tonlar bu paletin omurgasını oluşturuyor. Markanın imza rengi olan "Rausch" mercan-pembesi (#ff385c) yalnızca birincil eylem düğmeleri ve logo için ayrılmış. Yerleşim, geniş görsel-metin oranlarına sahip, duyarlı bir fotoğraf kartı ızgarası. Kartlarda 20px yumuşak köşe yuvarlaması var; sert bir kontrast yaratmadan ince bir derinlik veren çok katmanlı ortam gölge sistemi kullanılıyor. Arama çubuğu, temel kullanıcı eylemini bir araya getiren, dikkat çekici hap şeklinde bir kapsayıcı.

Ticaret ve Perakende · E-commerce Store

IKEA

IKEA'nın küresel ana sayfası, birincil eylem yüzeyi olarak ikonik IKEA Sarısı'nı (#ffdb00) ve marka logosundaki vurgu rengi olarak IKEA Mavisi'ni (#0058a3) kullanan, cesur ve düz bir tasarım sistemine dayanıyor. Tüm tipografik sistem, 14px gövde metninden 51px görüntü başlıklarına uzanan sıkı tanımlı bir ölçek üzerinde, 400 ve 700 ağırlıklarını kapsayan tek bir özel yazı tipi olan Noto IKEA üzerine kurulu. Yükseklik hissi gölge yerine tamamen renk kontrastı ve yerleşim yapısıyla sağlanıyor. Düzen, 90rem maksimum genişlikli bir kapsayıcı ve masaüstünde 1.5rem ızgara boşluğu kullanıyor; etkileşimli öğelerde tutarlı şekilde 8px köşe yarıçapı tokenı uygulanıyor. Saf #111111 metin rengiyle buluşan #fffefb kırık beyaz arka plan sıcaklık katarak yüksek kontrastlı ve erişilebilir bir okuma deneyimi yaratıyor.

Yazılım ve SaaS · Productivity & Notes

Notion

Notion'ın pazarlama ana sayfası, koyu lacivert (#02093a) bir kahraman bölümünü açık (#f6f5f4) bir gövdeyle birleştirir ve tüm metin rolleri için özel bir yazı tipi (NotionInter) kullanır. Tasarım, 28px oluklu 12 sütunlu bir ızgara, kartlar için 8px ve haplar için 9999px olmak üzere çift köşe yarıçapı dili ve yüzen arayüz öğeleri için çok katmanlı kademeli bir gölge sistemi kullanır. Marka mavisi (#2537b1) CTA'ları ve vurgu noktalarını yönlendirir; anlamsal gri tonları basamağı (gray-200'den gray-900'e) tüm metin ve yüzey hiyerarşisini düzenler.

Geliştirici ve Altyapı · Developer Tools & IDEs

Railway

Railway'in tasarım sistemi, derin, neredeyse siyah lacivert yüzeylere (#13111c, #0b0b0f) dayanan, karanlık temalı öncelikli bir geliştirici platformu arayüzüdür. Yüksek kontrastlı kırık beyaz metin (#f7f7f8) ve belirgin bir mor marka vurgusu (#853bce / #553f83) kullanır. Kahraman bölümünde editoryal bir ağırlık için IBM Plex Serif kullanılır; tüm arayüz metinleri Inter ile yazılır, kod alanlarında ise JetBrains Mono ve SF Mono tercih edilir. Yükseklik hissi gölge yerine, rgba(255,255,255,0.2) 1.5px inset beyaz parıltılı kenarlıklarla sağlanır; bu da arayüze cam panel estetiği kazandırır. Boşluk sistemi 4px temellidir ve 8/12/16/24/32 ritmiyle sıkı bir düzen izler. Köşe yuvarlaklıkları dar tutulur: baskın olan 4px'tir, kartlar ve kahraman kapsayıcılarında ise seçici olarak 8px ve 16px kullanılır.

İş ve Profesyonel Hizmetler

Shopify

Shopify'ın pazarlama ana sayfası, üstteki beyaz gezinme çubuğuyla keskin bir kontrast oluşturan, tam genişlikte ve dramatik bir video kahraman alanına sahip. Arka plan neredeyse siyah (#02090a). Birincil marka vurgusu canlı bir nane yeşili (#36f4a4) ve bu renk vurgulamalarda ve etkileşimli durumlarda ölçülü biçimde kullanılıyor. Tipografi, görünen başlık ve editoryal metinler için NeueHaasGrotesk, arayüz gövde metinleri için ise Inter-Variable arasında bölünmüş. Eylem çağrıları (CTA) tamamen yuvarlatılmış hap şeklinde (border-radius: 9999px). Genel sistem özgüven veren, yüksek kontrastlı ve ilham verici; ziyaretçileri satıcıya dönüştürmek üzere tasarlanmış.

Benzer paletler

IKEA

Snapchat Tasarım Sistemi

Bileşenler

Buttons11

Inputs4

Cards3

Extras15

Headers10

Overview

Colors

Brand & Accent

Surface

Text

Hairlines & Borders

Component & State Colors

Dark Mode

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Geometry character

Components

Buttons

Inputs

Selects

Cards

Image button

Nav link

Headers

Action buttons

Tabs

Video play control

Menu toggle

Mute control (3)

Share control

Creator badge

Navigation

Do's and Don'ts

Do

Don't

Responsive Behavior

Scope

What changes between desktop and mobile

Touch targets

Iteration Guide

Known Gaps

Benzerleri

Dribbble

Airbnb

IKEA

Notion

Railway

Shopify

Benzer paletler