Facebook Design System Deep-Dive

1. Brand Overview

Facebook’s interface is as familiar as a street you’ve walked down a thousand times. That’s intentional. Their design language is built for billions of daily users, from teenagers to retirees, across every device imaginable. No flashy experiments here — it’s about recognition, trust, and speed. The brand leans on blue not just because it’s part of their history, but because it’s psychologically safe and neutral in a social context. It’s also a color that works well for accessibility and brand consistency across global markets.

The design philosophy here is functional minimalism. Elements are clear, spacing is predictable, and actions stand out. They don’t overload you with gradients or ornamental UI. Instead, they lean on subtle shadows, clean borders, and sharp interaction states to signal intent. Color is used sparingly: the primary blue for key CTAs, green for secondary actions like “Sign Up,” and gray for neutral states.

The typography choices reinforce this. System fonts dominate — SF Pro on Apple devices, Helvetica, Arial — ensuring fast load times and familiarity. Sizes are tightly tuned: headings aren’t oversized, body text is readable without being indulgent. Weight is a key differentiator here; bold is used to mark importance, not to decorate.

Layout-wise, the site is built on an 8px-ish grid, but with some 6px and 14px anomalies for specific UI controls. Breakpoints are standard: mobile under 480px, tablet-ish around 900px, and desktop scaling past 1075px. No full-bleed chaos; content sits inside well-defined containers.

Facebook’s design system is less about brand spectacle and more about a frictionless daily tool. They’ve stripped away anything that could slow down recognition, leaning on consistency over novelty. You can see the discipline in their button states, their link behaviors, and the predictable way inputs respond. It’s a system that prizes efficiency, not aesthetic experimentation.

2. Color System

2.1 Primary Colors

The star of the palette is #0866ff (rgb(8, 102, 255)). This blue is used for primary CTAs, focus states, and links. It’s saturated enough to stand out against white, yet dark enough for good contrast. Compared to Twitter’s lighter sky blue or LinkedIn’s more corporate blue, Facebook’s choice feels solid and grounded.

Secondary brand color: #38a722 (rgb(56, 167, 34)) — the green used for secondary actions like "Create New Account." It’s bright, almost optimistic, and pairs well with the blue without clashing.

Neutral colors are carefully tiered: deep charcoal #1c1e21 for primary text, mid-gray #8a8d91 for secondary text, and #ffffff for backgrounds. This keeps the interface clean and legible.

2.2 Complete Palette

2.3 Color Relationships

The primary blue (#0866ff) on white easily passes WCAG AA for normal text and AAA for large text. White on blue also passes AA for normal sizes. The greens (#38a722, #36a420) are vibrant enough against white, but green on white for text will need to be bold to meet AA contrast for small sizes.

Grays are used for secondary info; #8a8d91 on white is borderline for small text, so weight and size help it pass accessibility. Facebook mitigates this by not using light gray for critical information — it's mostly for meta text.

Dark mode isn’t represented in this data, but the palette suggests easy inversion: charcoal backgrounds, white text, and blue/green accents.

2.4 Usage Guide

• Primary actions: Use #0866ff. Don’t dilute it. Hover states can use #365899 or #1573f5.
• Secondary actions: Use #38a722 with #36a420 hover.
• Text: #1c1e21 for primary, #8a8d91 for secondary. Never use blue for body text unless it’s a link.
• Avoid: Mixing green and blue in the same CTA cluster — it splits attention.
• Borders: Neutral grays (#ccc, #ddd equivalents) keep structure without drawing attention.

3. Typography

3.1 Font Families

Facebook uses a mix of SF Pro Display/Text and the system UI stack:

• SFProDisplay-Regular, Helvetica, Arial — for headings.
• SFProText-Semibold, Helvetica, Arial — for some links.
• system-ui, -apple-system, .SFNSText-Regular — for buttons, links, captions.

No Google or Adobe font calls — this is about speed and platform-native rendering.

3.2 Type Scale

3.3 Hierarchy

The jump from 28px heading to 17px subheading is significant — it creates clear page sections. Buttons at 20px bold feel big and tappable, while 17px bold secondary buttons keep hierarchy without overpowering the primary. Body and link sizes (14px, 12px) are small but readable, relying on color for distinction. The 11px captions are for microcopy — anything smaller would be inaccessible.

4. Spacing & Layout

4.1 Spacing Scale

The base is mostly 8px multiples, but Facebook breaks it with 6px and 14px for specific controls.

4.2 Layout

Breakpoints:

• 480px: mobile
• 900px: tablet
• 1075px: desktop

This suggests a three-tier responsive system. Containers scale fluidly between these, with padding and spacing adjusting per breakpoint.

5. Visual Elements

Border Radius:

• 2px: For small buttons.
• 6px: Dominant — inputs, most buttons.
• 8px: Occasional divs.
• 50%: Circular elements (avatars, icons).

Consistency: 6px is the standard, which gives a slightly soft but not overly rounded feel.

Shadows:

• Soft elevation: rgba(0,0,0,0.1) 0px 2px 4px 0px, rgba(0,0,0,0.1) 0px 8px 16px 0px
• Focus ring simulation: rgb(231,243,255) 0px 0px 0px 2px

Shadows are minimal; depth is subtle.

Borders:

• 1px solid #0866ff for active inputs.
• 1px solid light grays (#ddd, #ccc) for dividers.
• Underlines with dark or mid-gray for section headers.

6. Components

6.1 Buttons

Primary Button (blue, 20px, bold):

• Default: bg #0866ff, text white, 6px radius, 16px padding.
• Hover: bg #365899.
• Active: bg rgb(41,72,125), scale 0.98.
• Focus: bg #f5f6f7 (odd — likely a subtle bug or alt state), no outline.

Secondary Button (green, 17px, bold):

• Default: bg #42b72a (rgb(66,183,42)), text white, 6px radius.
• Hover: bg #36a420, border 1px solid #ccd0d5.
• Active: bg rgb(199,11,17) (fallback? same as destructive), gray text.
• Focus: bg #f5f6f7, gray text.

Tertiary Button (gray, 12px, bold):

• Default: bg #f5f6f7, text #8a8d91, 2px radius, border 1px solid #ccd0d5.
• Hover: bg white, darker gray text.
• Active: same destructive red as above — interesting reuse.
• Focus: same bg as default.

6.2 Links

Four styles:

1. Blue (#0866ff, 14px/500) — default link.
2. White (bold) — on dark backgrounds.
3. Dark text (#1c1e21, semi-bold) — section titles as links.
4. Gray (#8a8d91) — secondary nav links.

All gain underline and gray color on hover.

6.3 Forms

Text Input:

• Default: white bg, #1d2129 text, 1px solid #0866ff border, 6px radius, 14px vertical padding.
• Focus: same blue border, blue-tinted box shadow.

Password Input:

• Default: transparent bg, no border (inside composite control).
• Focus: blue border + shadow.

7. Design Tokens

:root {
  /* Colors */
  --color-gray-secondary: #8a8d91;
  --color-text-primary: #1c1e21;
  --color-white: #ffffff;
  --color-legacy-blue: #385898;
  --color-black: #000000;
  --color-blue-primary: #0866ff;
  --color-blue-hover: #1573f5;
  --color-blue-alt-hover: #365899;
  --color-green-secondary: #38a722;
  --color-green-hover: #36a420;

  /* Typography */
  --font-sf-pro-display: "SFProDisplay-Regular", Helvetica, Arial;
  --font-sf-pro-text-semibold: "SFProText-Semibold", Helvetica, Arial;
  --font-system: system-ui, -apple-system, .SFNSText-Regular;

  --font-size-h1: 28px;
  --font-size-button-lg: 20px;
  --font-size-h2: 17px;
  --font-size-button-md: 17px;
  --font-size-link: 14px;
  --font-size-caption: 12px;
  --font-size-caption-sm: 11px;

  /* Spacing */
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-40: 40px;
  --space-72: 72px;
  --space-112: 112px;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-elevated: rgba(0,0,0,0.1) 0px 2px 4px, rgba(0,0,0,0.1) 0px 8px 16px;
  --shadow-focus-ring: rgb(231,243,255) 0px 0px 0px 2px;
}

8. AI Coding Assistant Prompt

# Facebook Design System Specification

You are a Facebook design expert. Build UIs matching their visual language exactly.

## Brand Context
Facebook’s design is functional, familiar, and built for billions. It uses a restrained color palette, platform-native typography, and predictable spacing to make daily interaction intuitive. The brand relies on subtle depth and clear state changes, not visual ornamentation.

## Color Palette
- Primary Blue: #0866ff — CTAs, links, focus outlines
- Blue Hover: #365899 — Primary button hover
- Bright Blue Hover: #1573f5 — Alternate hover/focus
- Success Green: #38a722 — Secondary CTA (Sign Up)
- Success Green Hover: #36a420 — Secondary hover
- Neutral Gray: #8a8d91 — Secondary text, icons
- Charcoal: #1c1e21 — Primary text
- White: #ffffff — Backgrounds, text on dark
- Black: #000000 — Icons, rare accents
- Legacy Blue: #385898 — Legacy link/hover

## Typography
- Headings: SFProDisplay-Regular, Helvetica, Arial
- Body/UI: system-ui, -apple-system, .SFNSText-Regular
- Link Semibold: SFProText-Semibold, Helvetica, Arial

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 28px | 400 | 1.14 | Page titles |
| Button Large | 20px | 700 | 2.40 | Primary CTA |
| H2/Subheading | 17px | 400 | 0.94 | Section titles |
| Button Medium | 17px | 700 | 2.82 | Secondary CTA |
| Link | 14px | 500-600 | 1.34 | Navigation |
| Caption | 12px | 400 | 1.34 | Meta info |
| Caption Small | 11px | 400 | 1.34 | Fine print |

## Spacing & Grid
Base: 8px grid with exceptions (6px, 14px)
Scale: 6px, 8px, 10px, 14px, 16px, 20px, 24px, 28px, 40px, 72px, 112px
Apply to component padding, margins, and gaps.

## Border Radius
- xs: 2px — Small buttons
- sm: 6px — Inputs, main buttons
- md: 8px — Larger containers
- full: 50% — Avatars, circular icons

## Shadows & Depth
- Elevated: rgba(0,0,0,0.1) 0px 2px 4px, rgba(0,0,0,0.1) 0px 8px 16px
- Focus Ring: rgb(231,243,255) 0px 0px 0px 2px

## Component Specifications

### Primary Button
Default: bg #0866ff, color #fff, padding 0 16px, radius 6px, font-weight 700, font-size 20px
Hover: bg #365899
Active: bg rgb(41,72,125), transform scale(0.98)
Focus: bg #f5f6f7, no outline

### Secondary Button
Default: bg rgb(66,183,42), color #fff, radius 6px, font-weight 700, font-size 17px
Hover: bg #36a420, border 1px solid #ccd0d5
Active: bg rgb(199,11,17), color gray
Focus: bg #f5f6f7, color #bec3c9

### Tertiary Button
Default: bg #f5f6f7, color #8a8d91, radius 2px, border 1px solid #ccd0d5, font-size 12px
Hover: bg #fff, color #4b4f56
Active: bg rgb(199,11,17), color gray
Focus: bg #f5f6f7, color #bec3c9

### Links
Blue: #0866ff, no underline; hover underline + gray
White: #fff bold; hover underline + gray
Dark: #1c1e21 semi-bold; hover underline + gray
Gray: #8a8d91; hover underline + gray

### Inputs
Text: border 1px solid #0866ff, radius 6px, padding 14px 16px, focus with blue border + rgb(231,243,255) shadow
Password: transparent bg, no border default, same focus as text

## Layout & Responsive Rules
Breakpoints:
- Mobile < 480px
- Tablet: 480–900px
- Desktop: >1075px

## Interaction Rules
- State change transitions: ~150ms ease
- Focus indicators via border/shadow
- Active states scale to 0.98

## DO List
- Use only extracted palette colors
- Maintain 8px grid (with noted exceptions)
- Use 6px border radius for most controls
- Keep typography weights as specified
- Use hover/active/focus states exactly as defined

## DON'T List
- Don’t invent new blues or greens
- Don’t mix 2px and 6px radii in same component group
- Don’t drop focus indicators
- Don’t oversize headings
- Don’t add heavy shadows

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0866ff;
  color: #fff;
  padding: 0 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 20px;
  border: none;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary:hover { background: #365899; }
.btn-primary:active { background: rgb(41,72,125); transform: scale(0.98); }
```

Secondary Button:
```css
.btn-secondary {
  background: rgb(66,183,42);
  color: #fff;
  padding: 0 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 17px;
  border: none;
}
.btn-secondary:hover { background: #36a420; border: 1px solid #ccd0d5; }
```

Input:
```css
.input-text {
  background: #fff;
  color: #1d2129;
  border: 1px solid #0866ff;
  border-radius: 6px;
  padding: 14px 16px;
}
.input-text:focus {
  border-color: #0866ff;
  box-shadow: rgb(231,243,255) 0px 0px 0px 2px;
  outline: none;
}
```

9. Summary

TL;DR — Facebook’s design system is about trust and efficiency. Blue and green signal action, gray and charcoal handle text hierarchy, system fonts keep it fast, and spacing is disciplined. Interactions are clear without being flashy.

Brand Keywords:

• utility-first
• trust-focused
• high-contrast
• globally-consistent
• low-friction