A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
8type steps
4radius steps
8pxspacing base
Facebook, in one page
Facebook's iOS app is a utility dashboard — dense, function-first, colorful, and recognizable from 25 paces by its one signature element: the Facebook Blue bar and f logo at the top of the screen. The canvas is a soft light gray (#F0F2F5) on light mode, specifically chosen so that the white post cards and stories strip float above it with just enough contrast to register as separate surfaces. Where X and Threads sit on flat, edge-to-edge black canvases, Facebook uses cards — each post, each ad, each suggested group — lives in its own white rectangle with a subtle shadow underneath. This is the most "card-based" of the social apps, and the visual rhythm is a vertical stack of discrete content units, not an unbroken river.
Color does three jobs on Facebook: Facebook Blue (#1877F2) is the brand — it paints the top nav bar, the "Like" thumbs-up icon when active, the primary CTA (Login, Post, Send), and any "Facebook" self-reference. The reactions system is its own palette — Love is a coral-pink heart (#F3425F), Haha/Wow/Sad share an amber yellow (#F7B928), Angry is an orange-red (#E9710F), Care is a warm yellow-hug (#F7B928). And the informational green (#42B72A, sometimes the "Create Post" green) tips users toward creation actions. Everything else is neutral gray — post metadata, timestamps, comment bubbles, dividers. The result is a chromatic app that uses color to signal role, not to decorate.
Facebook switched from its historical Helvetica / Klavika branding to the SF Pro platform default on iOS several years ago — the app now honors Apple's system font for all body UI. Large-format type is rare: the biggest moment is a 24-28pt post-detail title or a 32pt "f" glyph on splash. The majority of reading happens at 15pt w400 — the post body text — a size that must work for a very wide demographic. Facebook's type hierarchy is flatter and less expressive than X or Threads because the app is built for information density: a user's feed regularly contains 10+ content types (photo posts, text posts, shared links, Marketplace listings, event invites, Memory cards, Reels previews, ads) and the type system must accommodate all of them without shouting. The Reactions popover on a long-press of the Like button remains the app's most unmistakable micro-interaction: seven emoji reactions pop up in a horizontal row on a floating white pill, each scaling up with a spring as the user drags across them — the only place in the app where illustration-style icons live.
Key Characteristics:
- Soft-gray canvas (
#F0F2F5light /#18191Adark) with white cards floating above - Facebook Blue (
#1877F2) on the top nav bar,flogo, Like icon active state, primary CTAs - Card-based feed — every post, ad, suggestion is its own white rounded rectangle
- 5-tab bottom bar: Home, Video, Marketplace, Notifications, Menu
- Stories ring row at the top of Home — Facebook's Instagram-style stories imported
- Reactions popover on long-press — 7 emoji (Like, Love, Care, Haha, Wow, Sad, Angry) scale up in a horizontal floating pill
- Profile cover photo hero at top of profile — full-width banner with rounded avatar overlapping
- Comment threading — nested replies with a 1pt vertical rule connecting parent to children
- Reels tab in the bottom nav opens a TikTok-like fullscreen vertical video feed
- Live indicators — red
LIVEbadge on streaming content - Memory cards — occasional full-width color cards (green, purple, blue gradient) with "On This Day" memories
Do's and don'ts
Do
- Use soft gray
#F0F2F5as the light canvas — it's the between-card space that defines Facebook's rhythm - Put every feed item in a white rounded card (8pt radius) — Facebook is the most card-based of social apps
- Use Facebook Blue
#1877F2for the brand, active Like, primary CTAs, and links — consistently - Keep the 5-tab bottom bar: Home / Video / Marketplace / Notifications / Menu — with labels always shown
- Use the Reactions popover on long-press — 7 emoji in a horizontal floating pill, each scaling as the user drags across
- Use SF Pro (system font) at weights 400/600/700/900 — the
flogo at 900 is the only heavy weight - Use the blue
fglyph as the brand anchor in the top-left — not a word mark, just thef - Use stories ring in Instagram's pink-red-orange gradient on unread stories
- Keep card padding at 12pt inside edges — consistent density across all card types
- Pair each tab label with both the icon and 11pt text — Facebook is label-forward, not icon-only like X/Threads
Don't
- Don't use pure black canvas — Facebook's light mode canvas is
#F0F2F5, dark is#18191A - Don't hide tab labels — Facebook shows them; this is a deliberate choice for accessibility and utility
- Don't add colors beyond the Reactions palette — the 7 reaction colors are the expressive palette, nothing else
- Don't use heavy drop shadows on cards — the gray canvas does the separation work
- Don't use fancy custom fonts — the current app uses SF Pro, not Klavika or Helvetica Neue
- Don't remove the Reactions popover — the 7-emoji long-press is the signature interaction
- Don't use uppercase on button labels except the "LIVE" badge
- Don't default the top nav bar to blue — it's white/dark-card with a blue
fanchor (the historical blue top bar is deprecated) - Don't make stories square — they're 110pt × 200pt vertical rectangles, 12pt radius
- Don't use green as a primary accent — green (
#42B72A) is reserved for creation CTAs only
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Facebook design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Facebook Blue: #1877f2
- Blue Pressed: #0a5fc8
- Blue Light: #e7f3ff
- Canvas Gray: #f0f2f5
- Card White: #ffffff
- Surface Tint: #f7f8fa
- Divider: #e4e6eb
- Separator Bar: #ced0d4
- Dark Canvas: #18191a
- Dark Card: #242526
Type:
- families: SF Pro, Helvetica, Klavika, Historical
- scale: 11, 13, 14, 15, 17, 20, 22, 24
- weights: 400, 500, 600, 700, 900
Shape:
- radius: 8, 12, 16, 20
Spacing: 8, 12
Rules:
- Use soft gray `#F0F2F5` as the light canvas — it's the between-card space that defines Facebook's rhythm
- Put every feed item in a white rounded card (8pt radius) — Facebook is the most card-based of social apps
- Use Facebook Blue `#1877F2` for the brand, active Like, primary CTAs, and links — consistently
- Keep the 5-tab bottom bar: Home / Video / Marketplace / Notifications / Menu — with labels always shown
- Use the Reactions popover on long-press — 7 emoji in a horizontal floating pill, each scaling as the user drags across
- Use SF Pro (system font) at weights 400/600/700/900 — the `f` logo at 900 is the only heavy weight
Avoid:
- Don't use pure black canvas — Facebook's light mode canvas is `#F0F2F5`, dark is `#18191A`
- Don't hide tab labels — Facebook shows them; this is a deliberate choice for accessibility and utility
- Don't add colors beyond the Reactions palette — the 7 reaction colors are the expressive palette, nothing else
- Don't use heavy drop shadows on cards — the gray canvas does the separation work
- Don't use fancy custom fonts — the current app uses SF Pro, not Klavika or Helvetica Neue
- Don't remove the Reactions popover — the 7-emoji long-press is the signature interaction
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Facebook Blue (
#1877F2): The brand — top nav bar background,flogo, active Like thumb, primary CTAs ("Log In", "Post", "Send"), link color in post body. - Blue Pressed (
#0A5FC8): Pressed state on blue buttons. - Blue Light (
#E7F3FF): Background tint for Liked button when user has tapped it (a pale blue pill).
Canvas & Surfaces (Light)
- Canvas Gray (
#F0F2F5): Primary light canvas — the space between cards. - Card White (
#FFFFFF): Post cards, story thumbnails, profile cover, modals. - Surface Tint (
#F7F8FA): Slightly off-white for suggested content (grouped suggestions, Marketplace hero). - Divider (
#E4E6EB): Hairlines between comments, action rows. - Separator Bar (
#CED0D4): Thicker separator between feed sections (rare).
Canvas & Surfaces (Dark)
- Dark Canvas (
#18191A): Primary dark canvas. - Dark Card (
#242526): Post cards, modals, story thumbnails. - Dark Surface Tint (
#3A3B3C): Elevated surfaces — comment input fields, selected rows. - Dark Divider (
#3E4042): Hairlines.
Text
- Text Primary Light (
#050505): Primary body on light mode — a near-black softer than pure#000000. - Text Primary Dark (
#E4E6EB): Primary body on dark mode. - Text Secondary Light (
#65676B): Timestamps, comment metadata, secondary labels on light. - Text Secondary Dark (
#B0B3B8): Timestamps on dark. - Text Tertiary (
#8A8D91): Disabled text, lowest-emphasis metadata (e.g., "Sponsored"), shared across modes.
Reactions Palette
Each Reaction has a distinct color. Reactions appear in the horizontal popover on long-press and as small color-dot indicators at the bottom of a post ("You, Sarah, and 23 others reacted").
- Like Blue (
#1877F2): The classic Facebook Blue thumbs-up. - Love Pink (
#F3425F): Heart reaction. - Care Warm (
#F7B928): Hugging-a-heart reaction (introduced 2020). - Haha Yellow (
#F7B928): Laughing emoji reaction. - Wow Yellow (
#F7B928): Wide-mouth emoji reaction. - Sad Yellow (
#F7B928): Tear emoji reaction. - Angry Orange (
#E9710F): Red-faced anger reaction.
Note: Haha, Wow, Sad, and Care all share the same amber yellow as base color on their emoji faces. Their distinguishing feature is the emoji illustration, not the color.
Semantic
- Live Red (
#FA3E3E): "LIVE" badge on live video and streaming indicators. - Error Red (
#FA383E): Destructive actions, post-failed banners. - Success Green (
#42B72A): "Create Post" green pill CTA, success toast, new-message indicator. - Info Blue (
#1877F2): Same as primary Blue for informational callouts. - Sponsored Label (
#8A8D91): "Sponsored" text on ads.
Memory / Story Ring Gradient
- Story Ring (Gradient):
#C13584→#E1306C→#FD1D1D→#F77737(pink → red → orange) — inherited from Instagram's story ring, used on Facebook Stories. - Memory Card Colors: Blue
#1877F2, Green#42B72A, Purple#8B46C5— used as gradient backgrounds for "On This Day" memory cards.
Type scaleRead the full spec
Font Family
- Primary (current):
SF Pro(Apple system font) — adopted as the platform default when Facebook moved away from custom branding for the iOS app. Uses SF Pro Text below 20pt and SF Pro Display at 20pt+ automatically. - Historical: Previously
Helveticaon iOS andKlavikaon marketing/print. Current iOS app relies on the system font. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif - CJK / Non-Latin: Apple's system font handles CJK, Arabic, Hebrew, etc. natively — no additional fonts needed.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| "f" Logo | SF Pro Display | 22pt | 900 | 1.0 | 0pt | The Facebook f in the top nav — weight 900 / Heavy |
| Screen Title | SF Pro Display | 24pt | 700 | 1.15 | -0.2pt | "Home", "Marketplace", "Menu" title on respective tabs |
| Section Header | SF Pro Display | 20pt | 700 | 1.2 | -0.1pt | "Stories", "Suggested for you", "Your Memories" |
| Post Display Name | SF Pro Text | 15pt | 600 | 1.3 | 0pt | Post author's display name |
| Post Body | SF Pro Text | 15pt | 400 | 1.35 | 0pt | The main post text — primary reading size |
| Post Body (Large Text Mode) | SF Pro Text | 24pt | 600 | 1.25 | 0pt | When user posts short text only, Facebook auto-styles it at 24pt on a colored background |
| Comment Body | SF Pro Text | 14pt | 400 | 1.3 | 0pt | Comment text inside the bubble |
| Comment Name | SF Pro Text | 13pt | 600 | 1.3 | 0pt | Commenter name at top of comment bubble |
| Timestamp / Meta | SF Pro Text | 13pt | 400 | 1.3 | 0pt | "2 hrs · Public", "12 comments" — color #65676B |
| Reaction Count | SF Pro Text | 13pt | 400 | 1.3 | 0pt | "You, Sarah and 45 others" |
| Primary Button | SF Pro Text | 15pt | 600 | 1.0 | 0pt | "Like", "Comment", "Share" action row labels |
| CTA Button | SF Pro Text | 17pt | 600 | 1.0 | 0pt | "Post", "Send", "Log In" — the filled blue pills |
| Tab Label | SF Pro Text | 11pt | 500 | 1.0 | 0pt | Bottom tab labels (shown always) |
| Link / Mention | SF Pro Text | inherit | 400 | inherit | 0pt | #1877F2 inline |
| Sponsored / Ad | SF Pro Text | 13pt | 400 | 1.3 | 0pt | "Sponsored" label above ad card — color #65676B |
Principles
- System font, not custom: Facebook uses SF Pro across iOS — no proprietary face in the current app. Respect the platform's native optical sizing.
- Weight concentrated at 400 / 600 / 700 / 900: Regular for body, semibold for names and buttons, bold for section headers, heavy for the
flogo. No thin or light. - Dynamic Type respected broadly: Post body, comment body, bio, message body all scale. Timestamps and tab labels cap at xLarge to preserve dense layouts.
- Color on text is structural: Blue for links, secondary gray for metadata, primary black on white canvas. No decorative text coloring.
- Reactions count is plain text: "You, Sarah, and 45 others" is rendered in standard secondary gray — the reaction emojis are the icon, not colored text.
Components and layoutRead the full spec
Buttons
Primary Blue CTA ("Post", "Send", "Log In")
- Shape: Rounded rectangle, 8pt corner radius (not a pill — Facebook's buttons are blockier than X/Threads)
- Background:
#1877F2 - Text:
#FFFFFFSF Pro Text 17pt w600 - Padding: 12pt vertical, 24pt horizontal (full-width on login screens; inline on compose bar)
- Disabled: opacity 0.5
- Pressed: background
#0A5FC8+ scale 0.98 - Font: SF Pro Text 17pt w600
Create Post Green Pill (Menu > "Create")
- Shape: Pill, 500pt corner radius
- Background:
#42B72A - Text:
#FFFFFFSF Pro Text 15pt w600 - Padding: 8pt vertical, 20pt horizontal
- Used sparingly — on the Menu tab for the "Create" entry and on Marketplace "List for Sale"
Action Row Buttons (Like / Comment / Share) The row below every post. Three buttons evenly spaced.
- Shape: invisible button (no background by default), 40pt tall
- Text: SF Pro Text 15pt w600
#65676B(secondary gray) - Icon: SF Pro glyph 20pt + 6pt gap + label
- Default Like: thumbs-up outline
hand.thumbsupicon - Active Like (user liked with default): thumbs-up filled in
#1877F2+ "Like" label turns#1877F2 - Active Reaction (user picked a non-Like reaction): shows the reaction emoji inline + label name ("Love", "Haha", etc.) in reaction color
- Long-press: opens Reactions popover (see Distinctive Components)
- Label background on active Like (rare): pill pill
#E7F3FFlight blue tint
Follow / Add Friend Blue Pill
- Shape: Rounded rectangle, 6pt corner radius
- Background:
#1877F2(Add Friend) /#E4E6EB(Friends - neutral gray) - Text: white for Add Friend;
#050505for Friends - Icon:
person.badge.plus16pt for Add Friend;person.fill.checkmarkfor Friends - Padding: 8pt vertical, 16pt horizontal
- Font: SF Pro Text 15pt w600
Cards & Containers
Post Card (The Feed Unit) The card-based feed is Facebook's signature layout. Every feed item is a white card.
- Background:
#FFFFFFlight /#242526dark - Corner radius: 8pt
- Margin: 8pt horizontal from canvas edge, 8pt vertical gap between cards
- Shadow: none by default (the light-gray canvas provides the visual separation); on press, subtle highlight
- Structure (top-to-bottom):
- Header row: 40pt circular avatar + name/timestamp + overflow
ellipsis— padding 12pt - Post body: SF Pro Text 15pt w400, aligned full-width within card (not indented after avatar — body takes full card width with 12pt horizontal padding)
- Media (optional): 0pt-margin edge-to-edge inside card (card clips to rounded corners)
- Reaction summary: small reactions icons + "You, Sarah, and 45 others" text in 13pt
#65676B+ "12 comments · 3 shares" — 12pt padding - Action row: 1pt
#E4E6EBdivider above, then 3 buttons (Like / Comment / Share) at 40pt tall evenly spaced - Comment preview (optional): Top 1-2 comments shown directly below action row, each in its own rounded bubble
Stories Row (Top of Feed)
- Height: 200pt
- Horizontal scroll of story thumbnails
- Each thumbnail: 110pt × 200pt rounded rectangle, 12pt corner radius
- Thumbnail structure: full-bleed background image + gradient overlay + 32pt circular avatar top-left + name text bottom-left
- First card: "Create a Story" — white card with
+glyph and user's blurred profile pic as background - Unread story: 3pt border in Instagram gradient (
#C13584→#E1306C→#FD1D1D→#F77737) around avatar - Read story: no border, 3pt gray ring around avatar
Comment Bubble
- Background:
#F0F2F5light /#3A3B3Cdark - Corner radius: 16pt
- Padding: 8pt vertical, 12pt horizontal
- Structure: commenter name (13pt w600) + comment body (14pt w400) stacked
- Max width: 80% of card width, aligned to leading side (after the commenter avatar)
- Avatar: 32pt circular leading
- Nested replies: indented 44pt with a 1pt vertical rule connecting parent to child
Ad Card
- Same structure as a post card
- "Sponsored" label above the header row in 13pt
#65676B - CTA button at the bottom (above the action row) — "Shop Now", "Learn More", "Sign Up" — a
#E7F3FFblue-tinted button with#1877F2text
Memory Card
- Full-width card, 200pt tall, colored gradient background (blue, green, or purple)
- "On This Day" label top
- "1 year ago" subtitle in white 15pt w400 80% opacity
- Memory content image or post preview center
- "Share" CTA at bottom
Profile Cover Hero
- Height: 200pt
- Full-width banner image (edge-to-edge, no margin)
- 168pt circular avatar overlapping the bottom of the cover, centered horizontally, with a 4pt white border
- Below: display name in 24pt w700, secondary line "Lives in …" in 15pt w400
#65676B
Navigation
Top Nav Bar (Home tab)
- Height: 56pt + safe area (taller than iOS default due to the Facebook branding)
- Background:
#FFFFFFlight /#242526dark — not blue anymore (Facebook quietly moved away from the blue top bar in 2020 on iOS; it's now white/dark-card with a blueflogo) - Leading: blue
flogo 28pt — the brand anchor (SF Pro Display 22pt w900 in a blue rounded square OR the actual glyph image) - Trailing: three circular icon buttons in a row — Search (
magnifyingglass), Messenger (ellipsis.message.fill), and optionally a third depending on region — each 32pt inside a 36pt gray circle#E4E6EB - Hairline divider 1pt
#E4E6EBbelow
Bottom Tab Bar
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Card inner width ~359pt; story thumbnails 96pt wide |
| iPhone 13/14/15 | 390pt | Standard card width ~374pt; story thumbnails 110pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top nav — f shifts left of island |
| iPhone 15/16 Pro Max | 430pt | Card width ~414pt; story thumbnails 120pt; more comments preview visible |
| iPad | 768pt+ | Multi-column layout — feed in center, profile in right sidebar, nav in left rail |
Dynamic Type
- Post body, comment body, bio, message body: full scale
- Display name, timestamps, action row labels: cap at xxLarge
- Tab labels: fixed 11pt (layout-sensitive)
- Reaction counts: fixed 13pt
- Large-text posts (when user types short text): already at 24pt, scale with Dynamic Type
Orientation
- Feed / Marketplace / Notifications / Menu: portrait-locked
- Video / Reels: rotates to landscape on video playback
- Media lightbox (photo / video viewer): rotates freely
Touch Targets
- Like / Comment / Share buttons: 40pt tall rows
- Reaction icons in popover: 48pt tap area each, 40pt glyph
- Tab bar icons: 26pt glyph, 49pt hit area
- Avatar tap: 40pt glyph, 44pt hit
ellipsisoverflow: 24pt glyph, 44pt hit
Safe Area Handling
- Top: top nav respects safe area + Dynamic Island;
flogo shifts left of island - Bottom: tab bar respects home indicator
- Sides: 8pt card margin on all scrollable screens
- Story thumbnails extend slightly into the 16pt safe inset to achieve the full-bleed edge-peek effect
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-facebook {--page-bg: #f0f2f5;
--page-bg-gradient: none;
--text-color: #050505;
--heading-color: #050505;
--link-color: #dd050c;
--link-hover-color: #ab0409;
--border-color: #c6c7ca;
--card-bg: #f0f2f5;
--card-shadow: 0 1px 2px rgba(5,5,5,0.06);
--card-hover-shadow: 0 6px 18px rgba(5,5,5,0.12);
--header-bg: #050505;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #f0f2f5;
--footer-text-color: #575859;
--button-bg: #fa383e;
--button-text-color: #000000;
--button-hover-bg: #f9060e;
--button-border: none;
--button-border-radius: 16px;
--button-secondary-bg: #e2e4e7;
--button-secondary-text-color: #050505;
--button-secondary-hover-bg: #d4d6d8;
--button-secondary-border: 1px solid #c6c7ca;
--prompt-bg: #e4e6e9;
--prompt-text-color: #050505;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 16px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/social/facebook/DESIGN.md· 31.0 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.