Forbes Design System Deep Dive

1. Brand Overview

Forbes is the archetype of a legacy media brand adapting to a digital-first world. The name itself carries weight—business, wealth, influence. The design system needs to serve that identity without clutter or trend-chasing. It’s aimed at high-information users: executives, investors, entrepreneurs, and aspirants who want to move fast and get credible information. The site isn’t trying to be playful. It’s a serious experience, but it’s not sterile.

The vibe is restrained elegance. Dark, neutral-heavy palette. Text is the hero, not the UI chrome. You don’t see candy-colored buttons or heavy gradients. Interaction cues are subtle—underline on hover, slight opacity changes. It’s a confidence play: “We don’t need to scream; you’ll listen.”

Typography is where they flex brand voice. They mix classic serif (Merriweather) for authority, modern sans (Graphik) for clarity, and a distinctive display face (Highlander Bold, Schnyder S) for brand recognition. This is rare—most brands stick to one or two families. Forbes uses at least four, deliberately. It lets them differentiate editorial layers: headline, deck, body, label.

Spacing is disciplined—8px base grid with some 4px half-steps. It’s not maximal white space; it’s compact, which makes sense for a content-dense site. Borders and thin dividers provide structure instead of heavy drop shadows. The few shadows that appear are functional—modals, sliders—not decorative.

Buttons are sparse. The UI is link-driven. When buttons appear—newsletter forms, sliders—they’re high-contrast and purposeful. Blue (#007ac8 or #0060cb) for actions, dark neutrals for controls. Border radiuses are functional: 4px for inputs, 8px for rectangular buttons, 50% for circular controls.

Overall, this is a system for a brand that doesn’t need to “delight” in the consumer tech sense. It needs to deliver authority and legibility. The design says: “We’re here to inform, not entertain.” That restraint is the brand philosophy.

2. Color System

2.1 Primary Colors

The semantic primary is rgb(51, 51, 51) — hex #333333. That’s a dark grey, not pure black. It’s easier on the eyes than #000000 and reads as more premium. Black can feel cheap if overused; dark grey feels printed, editorial. It’s consistent with Forbes’ brand as an authority in print and digital.

Secondary is transparent (rgba(0, 0, 0, 0)), meaning they treat “secondary” as a non-color—likely for overlays or backgrounds.

They also have an action blue: #007ac8 (UI user action), #0060cb (blue-500), and #278bff (blue-200). This is a bold, saturated blue—trustworthy but not corporate navy. It stands out against the neutral backdrop.

Functional reds are rich and varied: #dc0000, #c41a23, #fa4040—used for alerts, errors, trending down indicators. The range from bright to deep lets them convey different urgency levels.

Gold (#baa055, #706031) is used for premium content indicators. It’s muted, not flashy.

Greys are abundant. They have a full tonal range from #f7f7f7 to #202020. This lets them control contrast and depth without introducing new hues.

2.2 Complete Palette

2.3 Color Relationships

Contrast is key here. Primary text #333333 on white #ffffff is ~15:1 contrast ratio—well above WCAG AA/AAA. Blue action colors (#007ac8) on white also pass easily. They avoid borderline contrast combos.

Dark mode isn’t explicitly defined, but the abundance of greys suggests they could invert easily—swap backgrounds to dark neutrals, text to light greys.

Red variants maintain contrast against white but would fail if placed on dark neutrals without adjusting.

2.4 Usage Guide

Works well:

• #333333 text on #ffffff background — editorial clarity
• Bright blues (#007ac8, #0060cb) on white — clear action
• Gold (#baa055) on dark backgrounds — premium feel
• Light greys (#f7f7f7) for section backgrounds — visual separation

Avoid:

• Red text on blue backgrounds — accessibility fails
• Low-contrast grey-on-grey without purpose
• Overusing gold—dilutes premium signal

3. Typography

3.1 Font Families

They use a layered font system:

• Schnyder S (custom) — Display serif for large headings. Fallback: Schnyder S Fallback.
• Highlander Bold (custom) — Strong display sans/serif hybrid for brand-heavy elements (buttons, key links).
• Graphik — Modern grotesque sans for UI and headings. Fallback: Helvetica.
• Merriweather — Classic serif for body and some headings. Fallback: GeorgiaCustom (custom Georgia variant).
• tabular-numbers — For numeric data tables. Fallback: Georgia.

No Google Fonts or Adobe Fonts—these are self-hosted or licensed.

3.2 Type Scale

3.3 Hierarchy

The system uses size and weight to signal importance, but also font family. Schnyder S and Highlander Bold are unmistakable at the top of the hierarchy—used sparingly for high-impact. Graphik handles most UI and mid-level headings. Merriweather gives body copy a classic editorial feel. The scale is dense—many 1–2px steps—allowing fine-tuned hierarchy in a content-heavy layout.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px grid with smaller increments (1px, 2px, 3px, 4px, 6px) for tight UI elements.

4.2 Layout

Breakpoints are numerous: from 380px up to 1850px, with many single-pixel distinctions (e.g., 479px, 480px, 481px). This suggests fine-tuned responsive behavior, possibly for ad slots and typography scaling. They use Vuetify, so grid behavior is component-driven.

5. Visual Elements

Border radius:

• 2px — badges
• 4px — inputs
• 8px — buttons, divs
• 16px — SVGs, notification panels
• 50px — pill buttons
• 50% — circular buttons, avatars

Shadows:

• Soft: rgba(28, 37, 68, 0.15) 0px 0px 10px
• Heavy: rgba(0, 0, 0, 0.2) 0px 0px 50px (modals)
• Inset: rgb(226, 226, 226) 0px -1px 0px inset

Mostly flat. Shadows are reserved for overlays and sliders.

Borders: Thin 1px solid rules in dark grey or light grey. Sometimes only on one side. Used for dividers, not decoration.

6. Components

6.1 Buttons

Variant 1 (_2Ff1YYRe):

• Default: bg #333333, text #171717, padding 4px, radius 50px, no border/shadow.
• Hover: bg #f0f0f0
• Active: bg #e3e3e3
• Focus: outline 2px solid #007ac8

Variant 2 (fbs-slider__control-right):

• Default: bg rgba(51,51,51,0.4), white text, radius 50%, shadow heavy, opacity 0.7
• Hover: bg #d8361e, opacity 1

Variant 3 (newsletter-submit-button):

• Default: bg #007ac8, white text, radius 8px, font-weight 550
• Hover: bg #f0f0f0 (odd—lightens dramatically)
• Active: bg #e3e3e3

6.2 Links

Six styles:

• Dark text (#171717), no underline until hover
• White text (#ffffff), no underline until hover
• Dark grey (#333333), underlined by default
• Blue (#003891), no underline until hover
• Darkest grey (#181716), semi-bold
• Red (#c41a23), no underline

Hover always underlines and changes color to var(--fbs-color-surface-hover).

6.3 Forms

Email input:

• Default: bg white, text black, border 1px solid #e3e3e3, radius 4px, padding 20px 12px 7px
• Focus: border 1.5px solid #4285f4

6.4 Cards

Not explicitly extracted, but div borders and shadows suggest flat cards with 1px borders and light grey backgrounds. 8px radius common.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: #333333;
  --color-secondary: transparent;
  --color-neutral-darkest: #181716;
  --color-neutral-mid-dark: #292929;
  --color-neutral-mid: #737373;
  --color-black: #000000;
  --color-neutral-light-mid: #bbbbbb;
  --color-gray-570: #424242;
  --color-gray-750: #202020;
  --color-gray-650: #292929;
  --color-gray-400: #bbbbbb;
  --color-gray-200: #f0f0f0;
  --color-gray-250: #f7f7f7;
  --color-gray-150: #f4f4f4;
  --color-gray-50: #ffffff;
  --color-ui-user-action: #007ac8;
  --color-blue-900: #003891;
  --color-blue-800: #005890;
  --color-blue-500: #0060cb;
  --color-blue-400: #5c76f6;
  --color-blue-200: #278bff;
  --color-blue-100: #bbc4f2;
  --color-gold-500: #baa055;
  --color-ui-premium: #706031;
  --color-red-800: #bd0000;
  --color-red-700: #c41a23;
  --color-red-600: #dc0000;
  --color-red-550: red;
  --color-red-450: #fa4040;
  --color-red-400: #d8361e;
  --color-red-300: #d5384d;
  --color-red-200: #ff696f;
  --color-red-150: #ff7a7a;
  --color-red-100: #f9858b;
  --color-border-error: #e50b16;
  --color-border-focus: #4285f4;
  --color-text-connoisseur: #537c7c;
  --color-text-trending-up: #008516;
  --color-green-200: #3ed170;
  --color-teal-400: #629393;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-25: 25px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;

  /* Border radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 50px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(28, 37, 68, 0.15) 0px 0px 10px 0px;
  --shadow-heavy: rgba(0, 0, 0, 0.2) 0px 0px 50px 0px;
  --shadow-inset-light: rgb(226, 226, 226) 0px -1px 0px 0px inset;
}

8. AI Coding Assistant Prompt

# Forbes Design System Specification

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

## Brand Context
Forbes is a legacy business media brand. The design is restrained, text-first, with a neutral-heavy palette and subtle interaction cues. Typography mixes classic serif authority with modern sans clarity and distinctive custom display faces.

## Color Palette
- Primary: #333333 — Main text, headers
- Secondary: transparent — Overlays
- Neutral Darkest: #181716 — Footer backgrounds
- Neutral Mid-Dark: #292929 — Hover/focus
- Neutral Mid: #737373 — Secondary text
- Black: #000000 — Text display
- Neutral Light-Mid: #bbbbbb — Borders/icons
- Gray-570: #424242 — Borders
- Gray-750: #202020 — Backgrounds
- Gray-650: #292929 — Surfaces
- Gray-400: #bbbbbb — Secondary borders
- Gray-200: #f0f0f0 — Light backgrounds
- Gray-250: #f7f7f7 — Backgrounds
- Gray-150: #f4f4f4 — Backgrounds
- Gray-50: #ffffff — Surfaces
- UI User Action: #007ac8 — CTAs, focus outlines
- Blue-900: #003891 — Links
- Blue-800: #005890 — Links
- Blue-500: #0060cb — Buttons
- Blue-400: #5c76f6 — Links
- Blue-200: #278bff — Hover accents
- Blue-100: #bbc4f2 — Background accents
- Gold-500: #baa055 — Premium badge
- UI Premium: #706031 — Premium label
- Red-800: #bd0000 — Alerts
- Red-700: #c41a23 — Alerts
- Red-600: #dc0000 — Alerts
- Red-550: red — Alerts
- Red-450: #fa4040 — Alerts
- Red-400: #d8361e — Alerts
- Red-300: #d5384d — Alerts
- Red-200: #ff696f — Alerts
- Red-150: #ff7a7a — Alerts
- Red-100: #f9858b — Alerts
- Border Error: #e50b16 — Error borders
- Border Focus: #4285f4 — Input focus
- Text Connoisseur: #537c7c — Category labels
- Text Trending Up: #008516 — Positive trend
- Green-200: #3ed170 — Success
- Teal-400: #629393 — Accents

## Typography
- Schnyder S, fallback: Schnyder S Fallback — Large display headings
- Highlander Bold, fallback: Highlander Bold Fallback — Brand-heavy display, buttons
- Graphik, fallback: Helvetica — UI text, headings
- Merriweather, fallback: GeorgiaCustom — Body copy, headings
- tabular-numbers, fallback: Georgia — Numeric tables

| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 Display | Schnyder S | 32px | 400 | 1.20 | Main headlines |
| Button L | Highlander Bold | 24px | 400 | - | Hero buttons |
| Link L | Highlander Bold | 24px | 400 | - | Key CTAs |
| H2 | Graphik | 24px | 500 | 1.33 | Section headings |
| Link Serif | Merriweather | 22px | 700 | 1.55 | Feature links |
... (include all extracted levels)

## Spacing & Grid
Base: 8px grid. Scale: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 16, 20, 22, 24, 25, 40, 48, 56px.
- Button padding: 4px–12px
- Card padding: 16–24px
- Section gaps: 24–40px

## Border Radius
- xs: 2px — badges
- sm: 4px — inputs
- md: 8px — buttons, cards
- lg: 16px — modals
- pill: 50px — pill buttons
- full: 50% — circular buttons, avatars

## Shadows & Depth
- Soft: rgba(28,37,68,0.15) 0 0 10px — cards
- Heavy: rgba(0,0,0,0.2) 0 0 50px — overlays
- Inset light: rgb(226,226,226) 0 -1px 0 inset — dividers

## Component Specifications

### Primary Button (.btn-primary)
Default: bg #333333; color #171717; padding 4px; border-radius 50px; no border/shadow  
Hover: bg #f0f0f0  
Active: bg #e3e3e3  
Focus: outline 2px solid #007ac8

### Slider Control (.fbs-slider__control-right)
Default: bg rgba(51,51,51,0.4); color #fff; radius 50%; shadow heavy; opacity 0.7  
Hover: bg #d8361e; opacity 1

### Newsletter Submit
Default: bg #007ac8; color #fff; radius 8px; font-weight 550  
Hover: bg #f0f0f0  
Active: bg #e3e3e3

### Navigation Links
Default: various color styles; underline only on hover  
Hover: underline; color var(--fbs-color-surface-hover)

### Input Field
Default: bg #fff; color #000; border 1px solid #e3e3e3; radius 4px; padding 20px 12px 7px  
Focus: border 1.5px solid #4285f4

## Layout & Responsive Rules
Breakpoints: 380px, 479px, 480px, 481px, 660px, 767px, 768px, 769px, 899px, 900px, 1023px, 1024px, 1025px, 1229px, 1230px, 1280px, 1400px, 1410px, 1439px, 1440px, 1500px, 1760px, 1820px, 1850px

## Interaction Rules
- Transition: 150ms ease for background-color changes
- Focus: 2px solid #007ac8 outline
- Hover: underline on links; bg change on buttons

## DO
- Use only palette colors
- Maintain 8px grid
- Use correct font per hierarchy level
- Keep buttons minimal — no extra shadows
- Ensure text contrast > 4.5:1

## DON'T
- Invent new colors
- Mix sharp and rounded corners in the same element
- Overuse gold
- Use shadows for decoration
- Break type hierarchy with random weights

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #333333;
  color: #171717;
  padding: 4px 12px;
  border-radius: 50px;
  font-weight: 400;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #f0f0f0; }
.btn-primary:focus { outline: 2px solid #007ac8; outline-offset: 2px; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e3e3e3;
}
```

### Input
```css
.input {
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  padding: 20px 12px 7px;
  font-size: 16px;
  background: #ffffff;
}
.input:focus { border-color: #4285f4; outline: none; }
```

9. Summary

TL;DR — Forbes’ design system is restrained, premium, and typography-driven. Neutral-heavy palette, disciplined spacing, and subtle interactions keep the focus on content. Buttons and colors are used sparingly to signal action or premium content.

Brand Keywords:

• authority-driven
• restrained-premium
• content-first
• neutral-heavy
• typographic-precision