Facebook (Fb) Design System Deep Dive

1. Brand Overview

Facebook’s design language is utilitarian, familiar, and engineered for scale. You can feel that it’s built to serve billions, not boutique audiences. This isn’t about delight in micro-interactions — it’s about clarity, speed, and trust. The vibe is corporate-yet-friendly: clean white surfaces, deep blue CTAs, subtle grays, and an interface that’s been refined through countless iterations.

The homepage is a login gateway. No fluff, no marketing carousel. Just the brand mark, the form, and the buttons. This is intentional — Facebook’s global reach means the UI must load fast in rural areas, work on outdated browsers, and still feel modern.

The design philosophy here: familiarity beats novelty. Fonts lean on system stacks (system-ui, SFProDisplay, Helvetica, Arial) so they render well everywhere. The color palette sticks to known safe blues, grays, and whites — no risky hues. Spacing follows an 8px scale, which means everything aligns neatly in responsive grids.

This is a brand for mass adoption. The choices aren’t about “expressing personality” — they’re about removing friction. Borders are minimal. Shadows are rare and subtle. Hover states are clear but not flashy. Even the border-radius system is conservative, with 6px being the most common — enough to soften without feeling cartoonish.

Who’s this for? Anyone with an internet connection. The design has to work for a teenager in Manila on a budget Android phone just as well as for a retiree in Berlin using Safari on an iPad. And it does.

2. Color System

2.1 Primary Colors

Primary blue is the DNA of Facebook: #0866ff (rgb(8, 102, 255)). It’s used for CTAs, links, focus states — anywhere you need the user’s attention. The psychology: blue = trust, stability, and approachability. Compared to competitors like Twitter (#1DA1F2) or LinkedIn (#0077B5), Facebook’s blue is slightly richer and warmer, giving it a bit more weight.

Green (#38a722 / #36a420) is used for secondary success actions (e.g., “Create new account”). It’s bright but grounded, not neon.

Grays dominate the rest of the UI. #8a8d91 for tertiary text, #1c1e21 for primary text on light backgrounds, and lighter gray borders in the #ccd0d5 to #dddfe2 range.

White (#ffffff) is the canvas. There’s minimal deviation — no ivory or off-white.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong. Primary blue #0866ff on white background hits WCAG AA easily for normal text and AAA for large text. Gray text #8a8d91 on white is borderline — fine for captions but not for body text (contrast ratio ~4.5).

No explicit dark mode in this data, but the palette could invert easily: dark gray backgrounds with white text, primary blue for accents.

2.4 Usage Guide

• Primary Blue + White: Always for key actions. Works well and is accessible.
• Green + White: For secondary positive actions only. Don’t use green for destructive or neutral actions.
• Gray Text: Only for secondary info or disabled states — avoid using for interactive elements.
• Hover States: Stick to the defined hover colors (#365899, #36a420) to maintain brand consistency.
• Avoid adding custom accent colors — the palette is tight and minimal for a reason.

3. Typography

3.1 Font Families

Two main families:

• SFProDisplay-Regular with fallbacks Helvetica, Arial — likely used for headings where Apple users see SF Pro, Windows users see Arial.
• system-ui with fallbacks -apple-system, system-ui, .SFNSText-Regular — used for buttons, links, captions.

No Google Fonts or Adobe Fonts — everything is system-safe. This keeps performance high and renders consistently.

3.2 Type Scale

3.3 Hierarchy

28px is rare — used only for big headings. Most UI text is 17px (comfortable for forms). Links drop to 14px and captions go as low as 11px. Weight jumps are clear: 700 for buttons to signal interactivity, 400 for body text for readability. Line heights vary — buttons have oversized line heights to increase click/tap area.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px. Values: 6, 8, 10, 14, 16, 20, 24, 28, 40, 72, 112px.

4.2 Layout

Breakpoints: 480px, 900px, 1075px. This suggests mobile, tablet, and desktop tiers. Containers likely max around 1075px. There is no explicit grid system here — spacing tokens keep things aligned.

5. Visual Elements

Border Radius

• 2px — small buttons
• 6px — most common; inputs, buttons
• 8px — occasional divs
• 50% — circular avatars

6px is the sweet spot — enough to soften without losing the corporate feel.

Shadows

Two shadows:

1. rgba(0, 0, 0, 0.1) 0px 2px 4px, rgba(0, 0, 0, 0.1) 0px 8px 16px — subtle depth, likely for modals.
2. rgb(231, 243, 255) 0px 0px 0px 2px — focus ring for inputs.

Shadows are functional, not decorative.

Borders

Thin 1px borders, solid, in grays or blue for focus. Used for inputs and dividing content.

6. Components

6.1 Buttons

Primary (Blue)

• Default: bg #0866ff, text #ffffff, padding 0 16px, radius 6px, no border.
• Hover: bg #365899.
• Active: bg #29487d, transform scale(0.98).
• Focus: bg #f5f6f7, no outline.

Secondary (Green)

• Default: bg #42b72a, text white, radius 6px.
• Hover: bg #36a420, border 1px solid #ccd0d5.
• Active: bg rgb(199, 11, 17) (!), color gray — odd destructive tone.
• Focus: bg #f5f6f7, color #bec3c9.

Tertiary (Gray)

• Default: bg #f5f6f7, text #8a8d91, radius 2px, border 1px solid #ccd0d5.
• Hover: bg white, text #4b4f56.
• Active: same destructive red as above — weird.
• Focus: bg #f5f6f7, text #bec3c9.

6.2 Links

Four variants: blue (#0866ff), white (#ffffff), dark (#1c1e21), gray (#8a8d91). All no underline by default, underline on hover with gray color.

6.3 Forms

Inputs: white bg, dark text, blue border on focus, 6px radius, focus ring in #e7f3ff. Padding is 14px vertical, 16px horizontal.

Password inputs: transparent bg, no border by default — border appears on focus.

6.4 Cards

No explicit card data, but shadows suggest light elevation for modals or popups. Likely use 8px radius.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-gray-text: #8a8d91;
  --color-dark-text: #1c1e21;
  --color-white: #ffffff;
  --color-deep-blue: #385898;
  --color-black: #000000;
  --color-primary-blue: #0866ff;
  --color-bright-blue: #1675f4;
  --color-alt-blue: #365899;
  --color-green-success: #38a722;
  --color-green-hover: #36a420;

  /* Typography */
  --font-sfprodisplay: "SFProDisplay-Regular", Helvetica, Arial;
  --font-system: system-ui, -apple-system, system-ui, ".SFNSText-Regular";

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

  --line-height-h1: 1.14;
  --line-height-button-lg: 2.40;
  --line-height-h1-sm: 0.94;
  --line-height-button-sm: 0.94;
  --line-height-button-sm2: 2.82;
  --line-height-link: 1.34;
  --line-height-caption: 1.34;
  --line-height-button-xs: 1.50;

  /* 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;

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

  /* Shadows */
  --shadow-elevation: rgba(0,0,0,0.1) 0px 2px 4px, rgba(0,0,0,0.1) 0px 8px 16px;
  --shadow-focus: 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 utilitarian and globally accessible. It prioritizes clarity, trust, and performance over ornamental design. Colors are minimal, typography is system-based, and spacing adheres to an 8px grid for consistency.

## Color Palette
- Gray Text: #8a8d91 — captions, disabled states
- Dark Text: #1c1e21 — primary text
- White: #ffffff — backgrounds, text on dark
- Deep Blue: #385898 — hover state for primary buttons
- Black: #000000 — rare icon/text use
- Primary Blue: #0866ff — CTAs, primary links
- Bright Blue: #1675f4 — hover/focus highlight
- Alt Blue: #365899 — hover/focus variant for CTAs
- Green Success: #38a722 — secondary success actions
- Green Hover: #36a420 — hover for secondary buttons

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

| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| H1      | 28px | 400    | 1.14        | Page titles |
| Button lg | 20px | 700  | 2.40        | Primary CTAs |
| H1-sm   | 17px | 400    | 0.94        | Section headers |
| Button sm | 17px | 700  | 2.82        | Secondary CTAs |
| Link    | 14px | 500/600| 1.34        | Inline links |
| Caption | 12px | 400    | 1.34        | Small text |
| Caption-sm | 11px | 400 | 1.34        | Tiny text |

## Spacing & Grid
Base: 8px grid.
Scale: 6px, 8px, 10px, 14px, 16px, 20px, 24px, 28px, 40px, 72px, 112px.
Use multiples for all padding/margins.

## Border Radius
- sm: 2px — tiny buttons
- md: 6px — most buttons/inputs
- lg: 8px — cards
- full: 50% — circular avatars

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

## Component Specifications

### Primary Button
Default: bg #0866ff, color #ffffff, padding 0 16px, radius 6px, font-weight 700, font-size 20px.  
Hover: bg #365899  
Active: bg #29487d, transform scale(0.98)  
Focus: bg #f5f6f7, no outline  
Disabled: opacity 0.5

### Secondary Button
Default: bg #42b72a, color white, radius 6px.  
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  
Hover: bg #ffffff, color #4b4f56  
Active: bg rgb(199, 11, 17), color gray  
Focus: bg #f5f6f7, color #bec3c9

### Navigation Links
Default: no underline, color per variant  
Hover: underline, color gray

### Input Fields
Default: bg #ffffff, color #1d2129, border 1px solid #0866ff, radius 6px, padding 14px 16px  
Focus: border-color #0866ff, box-shadow rgb(231,243,255) 0px 0px 0px 2px

## Layout & Responsive Rules
Breakpoints: 480px (mobile), 900px (tablet), 1075px (desktop)  
Max content width: 1075px  
Section spacing: multiples of 8px

## Interaction Rules
- State change transitions: 150ms ease
- Focus indicators: blue border + light blue shadow
- Click feedback: scale(0.98) active state

## DO List
- Use only palette colors
- Maintain 8px grid
- Use SFProDisplay for headings, system-ui for body
- Respect defined hover/active colors
- Keep border-radius consistent (6px common)

## DON'T List
- Add extra shadows
- Mix sharp and rounded corners
- Use colors not in palette
- Change font stacks
- Remove hover underline from links

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0866ff;
  color: #ffffff;
  padding: 0 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 20px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #365899; }
.btn-primary:focus { outline: none; background: #f5f6f7; }
.btn-primary:active { background: #29487d; transform: scale(0.98); }
```

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

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.1) 0px 2px 4px, rgba(0,0,0,0.1) 0px 8px 16px;
}
```

9. Summary

TL;DR — Facebook’s design system is utilitarian, accessible, and globally optimized. Blues and grays dominate. Typography sticks to system stacks. Spacing is an 8px grid. Components are restrained, predictable, and built to scale.

Brand Keywords:

• trust-first
• global-accessible
• utilitarian-minimal
• performance-driven