Snapchat Mobile — design system & UI screens
Social video sharing and discovery platform where users can browse and engage with short-form video content from creators. The screen shows a full-screen story player with a featured video post (streetfootball/footwork content), profile avatar in top-left corner, search and spotlight navigation in the header, engagement actions (heart/like and forward) on the right sidebar, and bottom bar showing creator info with hashtags and app navigation tabs.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/snapchat-mobile.
Decoded design system
Snapchat Mobile's decoded design system: background #FFFFFF, text #000000, accent #2E7CF6, link #2E7CF6, primary #2E7CF6; type scale h1 34px / h2 22px / body 17px; 8px spacing base; 12px base radius. The single interactive/action color is #2E7CF6 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #EFEFEF |
| border | #D8D8D8 |
| text | #000000 |
| text_muted | #606060 |
| primary | #2E7CF6 |
| accent | #2E7CF6 |
| link | #2E7CF6 |
| button_bg | #2E7CF6 |
| button_text | #FFFFFF |
Using these colors
- Action color
#2E7CF6— the single interactive color; only on things you click or must notice, never large fills. primary,accent,link,button_bgare all#2E7CF6— one role, not several (the action color).- accent
#2E7CF6— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
Typography
- h1: 34px
- h2: 22px
- body: 17px
Spacing
- base unit: 8px
- scale: 2px, 4px, 5px, 7px, 8px, 10px, 15px, 16px, 20px, 30px
Radii
- base: 12px
- button: 12px
Motion
Micro-interactions run at 200ms (dominant) with ease-in-out.
- durations: 200ms · 100ms
- easings:
ease-in-out·ease - animated properties: background-color
Native design tokens
| Token | Value |
|---|---|
--sds-webc-color-surface-pagebg | #fff |
--content-primary-color | #121314 |
--blue-v300 | #0fadff |
--gray-v275 | #b0b1b2 |
--grey-dark | #000 |
--black-v200 | #000 |
--gray-v200 | #d4d5d6 |
--gray-v50 | #f7f8f9 |
--black-v50 | #53575b |
--sds-webc-color-icon-button-background-active | #9a9fa7 |
…and 65 more measured on the page.
Button states (measured)
- primary focus: outline
1px auto rgb(16, 16, 16)
Layout (measured)
- container max-width:
1070px - nav: 72px
- common grid: 2 columns
Motion choreography (measured)
Load order: svg
Input (measured)
height 38px · radius 5px
Responsive (measured)
- breakpoints: 768px
- mobile (390px): hero 36px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →