Fbcdn Design System: Functional Global UI Patterns

Alright — let's tear this apart piece by piece.

1. Brand Overview

Facebook (or more precisely, its cdn-hosted front-end assets under the fbcdn domain) is still one of the most recognisable digital brands globally. The visual language here is unmistakable: the blue that has been drilled into our collective memory, the rounded buttons, the system-ui typography, the restrained shadows. The design is utilitarian. This isn’t a brand that’s trying to wow you with flourishes — the priority is clarity, speed, and trust.

The vibe: social infrastructure. This UI is built to be a utility in people’s lives, not a playground for experimental layouts. Everything is functional and direct. The blue is loud enough for CTAs but not garish. The neutral greys are consistent. Borders and shadows are used sparingly — just enough to separate interactive elements from the background.

Philosophy: consistency over novelty. Facebook’s design system has been iterated to death internally; what you see now is the distillation of years of testing. Every pixel is there because it survived countless A/B tests. The typography stack leans heavily on system fonts to load fast and feel native to each OS. The spacing grid is a predictable 8px scale, with a few oddball values like 6px and 10px sprinkled in where historical components demanded it.

Audience: literally everyone. That’s the hard part — it has to be accessible to your grandma on a ten‑year‑old laptop and the teenager on the latest iPhone. That means high contrast for text, large enough hit‑areas for touch, and no fragile visual styles that break on low-res screens.

In short: this is industrial‑grade UI design. It’s not precious. It’s not “dribbble‑pretty.” It’s built to endure, at scale, with billions of users hammering it every day.

2. Color System

2.1 Primary Colors

The primary brand color is rgb(8, 102, 255) (#0866ff). This is the Facebook blue you know — bright enough to stand out against white, dark enough to pass accessibility contrast for white text. Its usage is tightly controlled: primary buttons, key links, and focus borders.

Compared to competitors: Twitter/X’s blue is darker and flatter; LinkedIn’s is lighter and more corporate. Facebook’s sits in the middle: it feels energetic without being playful.

2.2 Complete Palette

These are literal extracted values. No made‑up names — I’ve given them descriptive roles based on usage.

2.3 Color Relationships

The system is basically two primaries (blue and green) plus neutrals. Blue is the “action” color, green is “positive action” (create, confirm). Neutrals handle all text hierarchy and container surfaces.

Contrast: white (#fff) on primary blue (#0866ff) passes WCAG AA easily. Grey on white is borderline in some contexts — the lighter grey (#8a8d91) is fine for captions but shouldn’t be used for body text.

Dark mode: interestingly, the palette here doesn’t show a dark mode variant — likely handled elsewhere in Facebook’s system.

2.4 Usage Guide

• Blue (#0866ff) is for interactive elements you want to draw attention to. Don’t use it for passive UI.
• Green (#38a722) only for success or account creation CTAs — using it for generic buttons would dilute its meaning.
• Neutrals are safe for text, dividers, and background fills.
• Avoid using the hover blues (#1573f5, #365899) outside of hover states — they’re meant to signal interaction.
• Never pair grey text (#8a8d91) with grey backgrounds — you’ll lose contrast.
• Keep white text only on strong colors (blue, green, dark neutrals).

3. Typography

3.1 Font Families

There’s a split here:

• SFProDisplay-Regular for headings, with Helvetica and Arial as fallbacks.
• system-ui for most UI text, with -apple-system, system-ui, .SFNSText-Regular in the stack.

No Google Fonts. No Adobe Fonts. This is pure OS-native typography — faster and more consistent across devices.

3.2 Type Scale

3.3 Hierarchy

They keep heading sizes modest — 28px is the biggest here. Buttons get unusually large line-heights (2.40, 2.82), which makes them feel spacious and easy to tap. Links and captions sit in the 12–14px range, which is readable without crowding.

The mix of SFPro for headings and system-ui for body text creates a subtle hierarchy without changing sizes dramatically — it’s a font change, not an aggressive scale jump.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, but with some 6px and 10px values as outliers.

4.2 Layout

Breakpoints:

• 480px — mobile threshold
• 900px — tablet
• 1075px — desktop

Responsive approach: these breakpoints are not standard Bootstrap sizes — they’re tuned to Facebook’s layouts and content density.

5. Visual Elements

Border Radius

6px is the workhorse here — most interactive elements use it.

Shadows

Two shadows found:

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

Borders

Multiple 1px solid borders in greys and blue. Used for inputs, button hover states, and dividers.

6. Components

6.1 Buttons

Primary Blue Button
Default: bg #0866ff, white text, padding 0 16px, radius 6px, no border.
Hover: bg #365899, white text.
Active: bg rgb(41, 72, 125), scale 0.98.
Focus: bg #f5f6f7 (!) — interesting choice — changes bg to a neutral.

Green Button
Default: bg #42b72a (actually rgb(66, 183, 42) in data), white text.
Hover: bg #36a420, white text, border 1px solid #ccd0d5.
Active: bg rgb(199, 11, 17) — odd red for active? Possibly a destructive variant reused.
Focus: bg #f5f6f7, grey text, border 1px solid #ccd0d5.

Grey Button
Default: bg #f5f6f7, grey text (#8a8d91), radius 2px, border 1px solid #ccd0d5.
Hover: bg white, darker grey text (#4b4f56).
Active: same weird red bg as green button active — again likely a shared pressed style.
Focus: bg #f5f6f7, light grey text (#bec3c9).

6.2 Links

Four styles:

• Blue link (#0866ff), 500 weight, underline on hover.
• White link (#fff), 700 weight, underline on hover.
• Dark neutral link (#1c1e21), 600 weight.
• Grey link (#8a8d91), 400 weight.

Hover state universally changes color to grey and underlines — consistent interaction feedback.

6.3 Forms

Text input: white bg, blue border (#0866ff) on default, 6px radius, 14px vertical padding. Focus retains blue border and adds light blue focus ring (#e7f3ff).

Password input: transparent bg, no border default, 6px radius. Focus same as text input.

6.4 Cards

No explicit “card” component extracted, but divs with 8px radius and grey borders suggest a flat card style. Shadow 1 is likely used here.

7. Design Tokens

:root {
  /* Colors */
  --color-gray-neutral: #8a8d91;
  --color-dark-neutral: #1c1e21;
  --color-white: #ffffff;
  --color-blue-medium: #385898;
  --color-black: #000000;
  --color-blue-primary: #0866ff;
  --color-blue-bright: #1573f5;
  --color-blue-deep: #365899;
  --color-green-bright: #38a722;
  --color-green-deep: #36a420;

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

  /* Font sizes */
  --font-size-h1: 28px;
  --font-size-button-lg: 20px;
  --font-size-h1-alt: 17px;
  --font-size-button-md: 17px;
  --font-size-link: 14px;
  --font-size-caption: 12px;
  --font-size-caption-sm: 11px;

  /* Line heights */
  --line-height-h1: 1.14;
  --line-height-button-lg: 2.40;
  --line-height-h1-alt: 0.94;
  --line-height-button-md: 2.82;
  --line-height-link: 1.34;
  --line-height-caption: 1.34;
  --line-height-caption-sm: 1.34;

  /* 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-card: rgba(0,0,0,0.1) 0px 2px 4px, rgba(0,0,0,0.1) 0px 8px 16px;
  --shadow-focus: #e7f3ff 0px 0px 0px 2px;
}

8. AI Coding Assistant Prompt

# Facebook (Fbcdn) Design System Specification

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

## Brand Context
Facebook's UI is functional, consistent, and tuned for billions of users. It uses a tightly controlled palette, native system fonts, and an 8px spacing grid. Elements are simple, with subtle depth and clear interaction states.

## Color Palette
- Neutral Gray: #8a8d91 — Secondary text, disabled states
- Dark Neutral: #1c1e21 — Primary text, icons
- White: #ffffff — Backgrounds, text on dark
- Medium Blue: #385898 — Hover state for primary buttons, secondary actions
- Black: #000000 — Rare use for icons/text
- Primary Blue: #0866ff — Primary buttons, links, focus borders
- Bright Blue: #1573f5 — Hover/focus variant of primary blue
- Deep Blue: #365899 — Hover state for primary buttons
- Bright Green: #38a722 — Success CTAs
- Deep Green: #36a420 — Hover state for green buttons

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

| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| Heading-1 | 28px | 400 | 1.14 | Page titles |
| Button-lg | 20px | 700 | 2.40 | Primary CTA |
| Heading-1-alt | 17px | 400 | 0.94 | Subheads |
| Button-md | 17px | 700 | 2.82 | Secondary CTA |
| Link | 14px | 500 | 1.34 | Inline links |
| Link-semibold | 14px | 600 | 1.34 | Emphasis links |
| Caption | 12px | 400 | 1.34 | Small text |
| Button-sm | 12px | 700 | 1.50 | Compact buttons |
| Caption-sm | 11px | 400 | 1.34 | Microcopy |

## Spacing & Grid
Base: 8px grid
Scale: 6px, 8px, 10px, 14px, 16px, 20px, 24px, 28px, 40px, 72px, 112px

## Border Radius
- sm: 2px — small buttons
- md: 6px — inputs, primary buttons
- lg: 8px — cards/divs
- full: 50% — avatars/icons

## Shadows & Depth
- Card: rgba(0,0,0,0.1) 0px 2px 4px, rgba(0,0,0,0.1) 0px 8px 16px
- Focus: #e7f3ff 0px 0px 0px 2px

## Components

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

### Secondary (Green) Button
Default: background rgb(66,183,42), color #fff, padding 0 16px, radius 6px.  
Hover: background #36a420, border 1px solid #ccd0d5.  
Active: background rgb(199,11,17), color gray, border 1px solid #ccd0d5.  
Focus: background #f5f6f7, color #bec3c9.

### Tertiary (Grey) Button
Default: background #f5f6f7, color #8a8d91, radius 2px, border 1px solid #ccd0d5.  
Hover: background #fff, color #4b4f56.  
Active: background rgb(199,11,17), color gray.  
Focus: background #f5f6f7, color #bec3c9.

### Links
Blue link: #0866ff, weight 500, underline on hover.  
White link: #fff, weight 700, underline on hover.  
Dark link: #1c1e21, weight 600, underline on hover.  
Grey link: #8a8d91, weight 400, underline on hover.

### Inputs
Text input: background #fff, border 1px solid #0866ff, radius 6px, padding 14px 16px, focus ring #e7f3ff.  
Password input: transparent bg, no border default, radius 6px, focus same as text input.

## Layout & Responsive Rules
Breakpoints: 480px (mobile), 900px (tablet), 1075px (desktop)

## Interaction Rules
- 150ms ease transitions for hover/focus/active
- Focus indicators via border color and shadow
- Pressed states scale to 0.98

## DO
- Use only palette colors
- Maintain 8px grid
- White text only on strong colors
- Keep button radii consistent (6px for most)
- Use system fonts for performance

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Use shadows outside defined ones
- Reduce button hit-area below 40px height

## 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); }
```

### Input
```css
.input-text {
  background: #fff;
  border: 1px solid #0866ff;
  border-radius: 6px;
  padding: 14px 16px;
  box-shadow: #e7f3ff 0px 0px 0px 2px;
}
.input-text:focus {
  outline: none;
  border-color: #0866ff;
  box-shadow: #e7f3ff 0px 0px 0px 2px;
}
```

### Card
```css
.card {
  background: #fff;
  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 here is pure utility: blue for action, green for success, neutrals for content. Native fonts, 8px spacing, subtle shadows. Built to scale, not to impress.

Brand Keywords:

• utilitarian-consistent
• high-contrast
• global-accessible
• native-feel