Facebook

Overview

Facebook is a global social platform designed to connect billions of people through authentic human experiences, shared communities, and meaningful interactions. The design system embodies a philosophy of "Accessible Clarity"—a refined, light-mode aesthetic that prioritizes legibility, trust, and immediate comprehension. The visual language is rooted in Facebook Blue (#0064E0), a signature accent that commands attention on CTAs, links, and interactive states without overwhelming the interface. The brand personality is conversational yet authoritative: warm, inclusive, and purposeful. Voice example: "Your memories are waiting. Reconnect with the moments that matter."

Colors

The color palette is anchored in a clean, light foundation with strategic accent deployment. Primary (#0064E0) is Facebook's signature blue, applied exclusively to call-to-action buttons, links, and focus states—it is the most trusted color in the interface and appears on the "Log in" button, "Create new account" link, and all interactive affordances. Secondary (#1877F2) is a slightly warmer blue variant used for brand identity and wordmark contexts. Tertiary (#D31130) is a deep red reserved for error states, notifications, and critical alerts. The surface stack progresses from pure white (#FFFFFF) at surface-container-lowest through subtle grays (#F2F3F5, #EBEDF0, #DADDE1) for layered depth without visual noise. On-surface text is a near-black (#1C1E21) at 100% opacity for body copy, with

Typography

The type system uses Optimistic (Facebook's proprietary typeface) paired with system fallbacks (-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial) to ensure consistent rendering across platforms. Display (60px, 700 weight, -0.04em tracking) anchors hero messaging and brand moments. Headline-lg (40px, 600 weight) is reserved for page titles and major section breaks. Headline-md (28px, 600 weight) structures secondary content hierarchies. Title-lg (20px, 600 weight) labels cards and modal headers. Body-lg (18px, 400 weight) and body-md (15px, 400 weight) form the reading layer, with 28px and 24px line-heights respectively for comfortable scanning. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels, while label-sm (12px, 500 weight, 0.02em track

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, enabling responsive scaling from mobile (single column) to desktop (full-width). The spacing scale is semantic: unit (4px) is the atomic increment, sm (8px) for tight grouping, md (16px) for standard component padding and gutter spacing, lg (24px) for section separation, and xl (32px) for major layout breaks. Cards and containers use md (16px) padding on all sides. Form inputs and buttons maintain 44px height (12px vertical padding + 20px line-height) for touch-friendly interaction. The page rhythm relies on consistent md (16px) gaps between list items and lg (24px) gaps between major sections. White-space is generous but purposeful: the login form on the right side of the hero uses lg spacing between input f

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual heaviness. Level 1 (Base) uses no shadow—surfaces sit flush on the background. Level 2 (Standard Card) applies box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1), creating a subtle lift for cards, input fields, and popovers. Level 3 (Elevated/Modal) uses box-shadow: 0px 4px 12px rgba(17, 17, 18, 0.12) for modals, dropdowns, and floating panels. Level 4 (Emphasis) stacks shadows: 0 8px 20px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1) for critical overlays and full-screen modals. Hover states transition between shadow l

Shapes

The shape philosophy is "Refined Approachability"—rounded corners are used strategically to soften the interface without sacrificing clarity or professionalism. Buttons use full (9999px) border-radius for a pill-shaped affordance that feels modern and inviting (e.g., the "Log in" button at 44px height with full radius). Input fields and cards use lg (1rem / 16px) border-radius, creating a cohesive visual family while maintaining distinct component identity. Smaller interactive elements like badges and chips use md (0.75rem / 12px) or sm (0.25rem / 4px) radius to indicate secondary importance.

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#0064E0) background with {colors.on-primary} (white) text, {typography.label-md} (14px, 600 weight), {rounded.full} (pill shape), and 44px height with 12px vertical padding. On hover, the background transitions to #0052B4 over 150ms using the soft easing curve. The button-secondary variant uses a transparent background with a 1px solid border in {colors.primary}, maintaining the same height and typography but signaling a lower-priority action. Button-ghost is used for tertiary actions (e.g., "Forgot password?") with a transparent background, {colors.on-surface} text, and a 36px height; on hover, it applies {colors.surface-container-low} (#F2F3F5) background. All buttons di

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0064E0) exclusively on primary CTAs, links, and focus states—it is Facebook's most trusted color and should never be diluted or overused.
• Do maintain 44px minimum height on all interactive elements (buttons, inputs, list items) to ensure touch-friendly targets on mobile devices.
• Do apply the soft easing curve (cubic-bezier(0.08, 0.52, 0.52, 1)) to all state transitions (hover, focus, active) over 150–200ms for a cohesive, polished feel.
• Do use {rounded.full} (pill-shaped) border-radius on primary buttons to signal confidence and approachability; reserve lg (16px) radius for cards and containers.
• Do layer shadows vertically (Level 1 → Level 2 → Level 3 → Level 4) to convey depth without introducing blur or glassmorphism effects.

**Don't**

• Don't use secondary or tertiary colors on primary CTAs—Facebook Blue (#0064E0) is the only acceptable primary accent; using #1877F2 or #D31130 on main actions dilutes brand recognition.
• Don't apply rounded corners below 12px on interactive elements; sharp corners (0px) are reserved for utility components like dividers and borders only.
• Don't use opacity or transparency for interactive feedback; instead, use solid color shifts (e.g., #0064E0 → #0052B4 on hover) for maximum accessibility and clarity.
• Don't exceed {elevation.lg} shadow depth on non-modal surfaces; excessive shadows create visual clutter and reduce the perceived clarity of the interface.
• Don't mix typefaces; Optimistic (with system fallbacks) is the only approved font family—avoid serif fonts, monospace, or custom web fonts outside this stack.