# DESIGN REFERENCE: facebook.com --- ## METADATA ```yaml version: 1.0.0 generated: 2026-07-10 source_url: https://www.facebook.com analysis_timestamp: 2026-07-10T15:30:00Z design_epoch: 2025/2026 accessibility_level: WCAG 2.1 AA (officially optimized) mobile_first: true framework_detected: React + StyleX (Meta's compile-time CSS engine) design_system_used: Blueprint (Facebook's internal design system) + Cross Meta Design System core_philosophy: social-first, immersive, content-forward, with recent shift toward Instagram‑inspired visual density ``` --- ## BRAND IDENTITY ### Brand Essence ``` The world's largest social network — a digital town square for connection, community, and discovery. ``` ### Visual Hierarchy Principles ``` - Primary weight: Feed content (images, videos, posts) — now占据 majority of screen space - Secondary weight: Navigation bars (top and bottom) and story rings - Tertiary weight: Sidebar widgets, suggestions, and metadata - Cards have replaced full‑width feed items for a more contained, scannable layout - Sidebars are more streamlined and compact ``` ### Emotional Tone ``` Primary emotion: Connection Secondary emotion: Discovery Overall mood: Energetic, vibrant, and increasingly immersive ``` --- ## TYPOGRAPHY SYSTEM ### Primary Font Family ```yaml name: Facebook Sans (custom typeface) fallback: Helvetica (macOS) / Arial (Windows) weights_used: 400, 500, 600, 700 styles_used: normal usage: Headings, body, navigation, all UI text ``` ### Secondary Font Family ```yaml name: [Inferred: System UI fallback] fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif weights_used: 400 styles_used: normal usage: Fallback rendering ``` ### Typographic Scale ```yaml heading_1: { size: 2rem, weight: 700, line-height: 1.2, tracking: -0.01em } heading_2: { size: 1.5rem, weight: 600, line-height: 1.3, tracking: 0 } heading_3: { size: 1.25rem, weight: 600, line-height: 1.3, tracking: 0 } heading_4: { size: 1.125rem, weight: 600, line-height: 1.4, tracking: 0 } body_large: { size: 1.0625rem, weight: 400, line-height: 1.5, tracking: 0 } body_default: { size: 0.9375rem, weight: 400, line-height: 1.5, tracking: 0 } body_small: { size: 0.8125rem, weight: 400, line-height: 1.4, tracking: 0 } caption: { size: 0.75rem, weight: 400, line-height: 1.3, tracking: 0.01em } ``` ### Letter Spacing Classes ```yaml tight: -0.01em normal: 0 wide: 0.01em ``` --- ## COLOR ARCHITECTURE ### Primary Palette (Facebook Blue — refreshed and more vibrant) ```yaml primary_100: { hex: #E7F3FF, rgb: (231,243,255), usage: Accent backgrounds, hover states (light) } primary_200: { hex: #CCE4FF, rgb: (204,228,255), usage: Selection backgrounds } primary_300: { hex: #8BB9F0, rgb: (139,185,240), usage: Borders for accent elements } primary_400: { hex: #4B8BDF, rgb: (75,139,223), usage: Secondary accent, links } primary_500: { hex: #1877F2, rgb: (24,119,242), usage: Primary blue — core brand color, CTAs, active states } primary_600: { hex: #166BDF, rgb: (22,107,223), usage: Hover states for primary elements } primary_700: { hex: #0D5DBD, rgb: (13,93,189), usage: Active/pressed states } ``` ### Secondary Palette (Expanded blues — light to dark navy) ```yaml secondary_100: { hex: #F0F2F5, rgb: (240,242,245), usage: Page backgrounds, subtle surfaces } secondary_200: { hex: #E4E6EB, rgb: (228,230,235), usage: Card backgrounds, dividers } secondary_300: { hex: #DADDE1, rgb: (218,221,225), usage: Borders, separators } secondary_400: { hex: #B0B3B8, rgb: (176,179,184), usage: Secondary text, icons (low emphasis) } secondary_500: { hex: #8A8D91, rgb: (138,141,145), usage: Secondary text, placeholders } secondary_600: { hex: #606266, rgb: (96,98,102), usage: Body text (low-medium emphasis) } secondary_700: { hex: #3A3B3C, rgb: (58,59,60), usage: Primary body text } ``` ### Accent Colors (Reactions and status indicators) ```yaml success: { hex: #31A24C, rgb: (49,162,76), usage: Online status, success states } warning: { hex: #F7B928, rgb: (247,185,40), usage: Warning notices } error: { hex: #FA383E, rgb: (250,56,62), usage: Error states, destructive actions } info: { hex: #1877F2, rgb: (24,119,242), usage: Informational banners } like: { hex: #1877F2, rgb: (24,119,242), usage: Like reaction } love: { hex: #F33B5C, rgb: (243,59,92), usage: Love reaction } care: { hex: #F7B928, rgb: (247,185,40), usage: Care reaction } haha: { hex: #F7B928, rgb: (247,185,40), usage: Haha reaction } wow: { hex: #F7B928, rgb: (247,185,40), usage: Wow reaction } sad: { hex: #F7B928, rgb: (247,185,40), usage: Sad reaction } angry: { hex: #E4604A, rgb: (228,96,74), usage: Angry reaction } ``` ### Neutral Scale ```yaml white: { hex: #FFFFFF, rgb: (255,255,255), usage: Card backgrounds, text on dark } gray_100: { hex: #F0F2F5, rgb: (240,242,245), usage: Page background } gray_200: { hex: #E4E6EB, rgb: (228,230,235), usage: Card backgrounds, subtle surfaces } gray_300: { hex: #DADDE1, rgb: (218,221,225), usage: Dividers, borders } gray_400: { hex: #B0B3B8, rgb: (176,179,184), usage: Disabled text, icons } gray_500: { hex: #8A8D91, rgb: (138,141,145), usage: Secondary text, placeholders } gray_600: { hex: #606266, rgb: (96,98,102), usage: Body text } gray_700: { hex: #3A3B3C, rgb: (58,59,60), usage: Primary text, headings } black: { hex: #1B1F23, rgb: (27,31,35), usage: Darkest text, high contrast } ``` ### Color Relationships ```yaml contrast_ratios: text_on_primary: 4.6:1 (white on #1877F2) text_on_secondary: 12.1:1 (#1B1F23 on #F0F2F5) text_on_light: 10.8:1 (#1B1F23 on #FFFFFF) text_on_dark: 15.4:1 (white on #1B1F23) color_harmony: monochromatic (expanded blue family with warm accent tones) accessibility_compliance: fully_compliant (iconography and colors rebuilt for accessibility) ``` --- ## SPACING & LAYOUT SYSTEM ### Base Unit ```yaml base_unit: 8px scaling_factor: 1.25 ``` ### Spacing Scale ```yaml spacing_0: { value: 0px, usage: No spacing } spacing_1: { value: 2px, usage: Tiny gaps (badge to text) } spacing_2: { value: 4px, usage: Icon to label spacing } spacing_3: { value: 8px, usage: Element internal padding } spacing_4: { value: 12px, usage: Small gaps between elements } spacing_5: { value: 16px, usage: Standard spacing (card padding) } spacing_6: { value: 20px, usage: Medium spacing } spacing_7: { value: 24px, usage: Large spacing (between sections) } spacing_8: { value: 32px, usage: XL spacing (page sections) } spacing_9: { value: 40px, usage: Hero/header spacing } spacing_10: { value: 48px, usage: Page margins (desktop) } ``` ### Breakpoints ```yaml mobile_portrait: { min: 0px, max: 480px, columns: 4, gutter: 8px } mobile_landscape: { min: 481px, max: 768px, columns: 6, gutter: 12px } tablet: { min: 769px, max: 1024px, columns: 8, gutter: 16px } desktop: { min: 1025px, max: 1440px, columns: 12, gutter: 16px } widescreen: { min: 1441px, max: 1920px, columns: 12, gutter: 20px } ultrawide: { min: 1921px, columns: 16, gutter: 24px } ``` ### Container Widths ```yaml narrow: { max_width: 680px, padding: 16px } # Feed column (mobile/tablet) default: { max_width: 960px, padding: 16px } # Main content (desktop feed) wide: { max_width: 1200px, padding: 20px } # Full layout with sidebars full: { max_width: 100%, padding: 0 } # Full-bleed sections ``` ### Layout Structure (3‑column grid desktop) ```yaml left_sidebar: { width: 280px, position: left, sticky: true } center_feed: { width: 1fr (flexible), max_width: 680px, position: center } right_sidebar: { width: 340px, position: right, sticky: true } ``` --- ## COMPONENT LIBRARY ### Navigation Components #### Top Navigation Bar ```yaml type: horizontal (fixed top) position: sticky (top, with subtle shadow) height: 56px background: #FFFFFF (with border-bottom: 1px solid #DADDE1) alignment: left (logo) / center (search) / right (actions) components: - logo: { size: 40px, link to home } - search: { placeholder: "Search Facebook", radius: 24px, bg: #F0F2F5 } - action_icons: [Home, Watch, Marketplace, Groups, Gaming, Menu] ``` #### Bottom Navigation (Mobile) ```yaml type: horizontal (fixed bottom) position: fixed (bottom, with border-top) height: 50px background: #FFFFFF items: [Home, Watch, Marketplace, Groups, Notifications, Menu] ``` #### Left Sidebar (Desktop) ```yaml type: vertical navigation position: fixed/static left width: 280px items: - profile: { avatar + name } - shortcuts: [Friends, Memories, Saved, Groups, Watch, Marketplace, Ad Center, Pages, Events, News, Feeds, See More] - explore: [Recent, Most Relevant] - shortcuts: [Create, Your shortcuts] ``` ### Button System #### Primary Button ```yaml default: { bg: #1877F2, text: #FFFFFF, padding: 8px 16px, radius: 6px } hover: { bg: #166BDF, text: #FFFFFF } active: { bg: #0D5DBD, text: #FFFFFF } focus: { outline: 2px solid #1877F2, offset: 2px } disabled: { bg: #B0B3B8, text: #FFFFFF, opacity: 0.6 } ``` #### Secondary Button ```yaml default: { bg: transparent, text: #1877F2, padding: 8px 16px, radius: 6px } hover: { bg: #E7F3FF, text: #166BDF } active: { bg: #CCE4FF, text: #0D5DBD } focus: { outline: 2px solid #1877F2, offset: 2px } disabled: { opacity: 0.5 } ``` #### Tertiary/Ghost Button ```yaml default: { bg: transparent, text: #606266, padding: 6px 12px, radius: 6px } hover: { bg: #F0F2F5, text: #3A3B3C } active: { bg: #E4E6EB, text: #3A3B3C } focus: { outline: 2px solid #1877F2, offset: 2px } disabled: { opacity: 0.4 } ``` #### Button Sizes ```yaml small: { padding: 4px 12px, font_size: 0.8125rem, height: 32px } medium: { padding: 8px 16px, font_size: 0.9375rem, height: 40px } large: { padding: 12px 24px, font_size: 1rem, height: 48px } ``` ### Form Elements #### Input Fields ```yaml default: { bg: #F0F2F5, border: 1px solid #DADDE1, radius: 6px, padding: 8px 12px } focus: { border: 2px solid #1877F2, bg: #FFFFFF, shadow: 0 0 0 3px rgba(24,119,242,0.15) } error: { border: 2px solid #FA383E, bg: #FFFFFF } success: { border: 2px solid #31A24C, bg: #FFFFFF } disabled: { bg: #E4E6EB, opacity: 0.7 } ``` #### Search Input ```yaml default: { bg: #F0F2F5, border: none, radius: 24px, padding: 8px 16px 8px 36px, icon: search } focus: { bg: #FFFFFF, border: 1px solid #DADDE1, shadow: 0 0 0 3px rgba(24,119,242,0.15) } ``` #### Select Menus ```yaml default: { bg: #FFFFFF, border: 1px solid #DADDE1, radius: 6px, padding: 8px 32px 8px 12px } focus: { border: 2px solid #1877F2, shadow: 0 0 0 3px rgba(24,119,242,0.15) } ``` ### Cards (Feed Posts) ```yaml default: { bg: #FFFFFF, border: none, radius: 8px, shadow: 0 1px 3px rgba(0,0,0,0.08), padding: 16px } hover: { shadow: 0 2px 8px rgba(0,0,0,0.12) } variants: - post: { bg: #FFFFFF, padding: 12px 16px 8px } - story: { bg: transparent, radius: 12px, border: 1px solid #DADDE1, padding: 8px } - suggestion: { bg: #FFFFFF, border: 1px solid #DADDE1, radius: 8px, padding: 12px } - comment: { bg: #F0F2F5, radius: 18px, padding: 8px 12px } ``` ### Modals/Dialogs ```yaml overlay: { bg: rgba(0,0,0,0.5), opacity: 1, backdrop_blur: 0 } container: { max_width: 500px, bg: #FFFFFF, radius: 12px, padding: 24px, shadow: 0 12px 48px rgba(0,0,0,0.25) } animation: { open: opacity 200ms ease, scale 200ms ease; exit: opacity 150ms ease } ``` ### Story Rings ```yaml default: { size: 60px, border: 3px solid #1877F2, radius: 50% } seen: { border: 3px solid #DADDE1 } hover: { transform: scale(1.04), transition: 150ms } add_story: { bg: #1877F2, size: 20px, icon: plus, position: bottom-right } ``` ### Reactions (Emoji-style) ```yaml type: emoji-based reaction bar trigger: long-press or hover on Like button items: [Like (👍), Love (❤️), Care (🥰), Haha (😂), Wow (😮), Sad (😢), Angry (😡)] animation: pop-in (150ms ease-out, with slight scale bounce) size: 36px ``` ### Comments ```yaml input: { bg: #F0F2F5, border: none, radius: 18px, padding: 8px 12px } input_focus: { bg: #FFFFFF, border: 1px solid #DADDE1 } comment_bubble: { bg: #F0F2F5, radius: 18px, padding: 8px 12px } reply: { padding-left: 48px, border-left: 2px solid #DADDE1 } ``` --- ## LAYOUT PATTERNS ### Page Structures ```yaml homepage_feed: - top_nav: { position: top, height: 56px, fixed: true } - left_sidebar: { width: 280px, sticky: true, scroll: independent } - center_feed: { max_width: 680px, padding: 16px, scroll: main } - story_tray: { horizontal scroll, height: 120px } - create_post: { card with avatar + "What's on your mind?" } - feed_filters: [Most Relevant, Latest] - feed_posts: { infinite scroll, card-based } - right_sidebar: { width: 340px, sticky: true } - sponsored: [Ad placements] - contacts: [Online friends, active now] - group_conversations: [Recent messages] - suggestions: [Pages to follow, groups to join] - bottom_nav: { mobile only, fixed: true } profile_page: - cover_photo: { full-width, height: 300px } - profile_picture: { size: 168px, overlay on cover } - profile_actions: [Add to Story, Edit Profile, More] - tabs: [Posts, About, Friends, Photos, Videos, Reels, More] - content_feed: { grid or list view } watch_page: - navigation: [Home, Shows, Live, Gaming, Sports, Saved] - video_grid: { masonry or grid layout } - video_player: { full-width or modal } ``` ### Grid Systems ```yaml feed: { columns: 1, gap: 16px, alignment: center } video_grid: { columns: 2 (tablet) / 3 (desktop), gap: 8px, alignment: start } profile_photos: { columns: 3, gap: 4px, alignment: start } marketplace: { columns: 2 (mobile) / 4 (desktop), gap: 8px } ``` ### Section Patterns ```yaml story_tray: { height: 120px, scroll: horizontal, gap: 8px } create_post: { card: white, padding: 12px, divider: 1px solid #DADDE1 } feed_post: { card: white, padding: 12px 16px, margin-bottom: 16px } suggestion_card: { card: white, padding: 12px, margin-bottom: 8px } ``` ### Content Hierarchy ```yaml reading_pattern: F‑pattern (feed scanning) content_weight_distribution: headline_to_body_ratio: 1:2.5 image_to_text_ratio: 2:1 (images now dominate) whitespace_density: moderate (recently reduced for immersion) ``` --- ## MOTION & INTERACTION ### Transition Durations ```yaml instant: 50ms micro: 100ms fast: 150ms default: 200ms slow: 300ms macro: 500ms ``` ### Easing Curves ```yaml linear: cubic-bezier(0, 0, 1, 1) ease: cubic-bezier(0.25, 0.1, 0.25, 1) ease_out: cubic-bezier(0, 0, 0.58, 1) ease_in_out: cubic-bezier(0.42, 0, 0.58, 1) spring: cubic-bezier(0.34, 1.56, 0.64, 1) # used for reaction pop ``` ### Animation Types ```yaml fade: { enter: opacity 200ms ease, exit: opacity 150ms ease } slide: { enter: transform 200ms ease-out, exit: transform 150ms ease-in } scale: { enter: scale 200ms ease-out, exit: scale 150ms ease-in } pop: { enter: scale 0.8→1.0 with spring, duration: 200ms } # reactions stagger: { child_delay: 30ms, parent_duration: 200ms } # feed loading ``` ### Hover States ```yaml scale: { value: 1.05, duration: 150ms } # story avatars, profile pictures lift: { value: -2px, duration: 150ms } # cards, posts underline: { style: solid, duration: 150ms } # text links color_shift: { speed: 150ms } # buttons, icons bg_shift: { speed: 150ms } # navigation items ``` ### Scroll Interactions ```yaml sticky_nav: { position: sticky, offset: 0 } infinite_scroll: { trigger: auto (near bottom of feed) } pull_to_refresh: { mobile: true, animation: spinner } scroll_to_top: { floating button, appears after scroll > 300px } ``` --- ## MEDIA & ICONOGRAPHY ### Icon System ```yaml library: Custom Facebook icon set (rebuilt for accessibility) style: outline (navigation), filled (active states), custom (reactions) size: small: 16px, medium: 20px, large: 24px, xl: 32px color: inherit (uses currentColor or specific hex) stroke_width: 1.5px (outline icons) corner_style: rounded ``` ### Image Treatment ```yaml default_ratio: 16:9 (videos), 4:3 (photos), 1:1 (profile pics), 9:16 (stories) rounded_corners: medium (8px) for feed images, large (12px) for stories, full (50%) for avatars object_fit: cover (most images), contain (product photos) overlay: { gradient: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3)), opacity: 1 } # stories shadow: { type: drop, value: 0 2px 8px rgba(0,0,0,0.08) } filter: { type: none } # images are naturally sharp ``` ### Video Components ```yaml aspect_ratio: 16:9 (feed), 9:16 (Reels/stories) controls: custom (play/pause, volume, fullscreen, speed) autoplay: true (muted, on scroll into view) loop: true (for Reels) muted: true (autoplay), user-controlled for sound poster: { style: first frame with gradient overlay } play_button: { style: circle with white icon, position: center } progress_bar: { height: 3px, bg: rgba(255,255,255,0.3), fill: #1877F2 } ``` --- ## RESPONSIVE BEHAVIORS ### Priority of Elements ```yaml mobile_priority: [stories, create post, feed posts, notifications, messages] tablet_priority: [stories, create post, feed, right sidebar (condensed)] desktop_priority: [left sidebar, feed, right sidebar, create post, stories] ``` ### Collapse Points ```yaml left_sidebar: 1024px (collapses to icons-only or hides) right_sidebar: 1024px (hides on tablet, shows on desktop) multi_column_layout: 768px (3 cols → 2 cols → 1 col) story_tray: 480px (horizontal scroll always) ``` ### Touch Targets ```yaml minimum_size: 44x44px (all interactive elements) spacing_between: 8px tap_feedback: ripple (on buttons), highlight (on cards), scale (on icons) ``` --- ## ACCESSIBILITY FEATURES ### Semantic HTML Structure ```yaml landmarks: [
,