Indeed Design System Deep-Dive

1. Brand Overview

Indeed’s visual language is unapologetically utilitarian. It’s an interface built for people who need to get things done, not for people browsing casually. The design is clean, but not sterile — it’s functional minimalism with just enough warmth to make job-hunting feel approachable.

This is a brand whose audience spans every possible demographic. Students looking for part-time work. Senior engineers hunting their next role. HR teams posting positions. That breadth forces the design to be accessible, legible, and platform-neutral. No niche aesthetics here — no pastel gradients, no whimsical illustrations. Instead, it’s typography that’s easy to scan, colors that pass accessibility checks, and components that behave predictably.

The primary blue (#004fcb) is the anchor. It’s bold enough to stand out in a sea of tabs, but not so saturated that it feels aggressive — a balance between authority and friendliness. There’s a secondary deep blue (#0000ee) in the palette, but it’s clearly a legacy or link-oriented color, not the core brand tone.

Typography is consistent: Noto Sans everywhere, with a fallback stack of Helvetica Neue, Helvetica, Arial. No custom letterforms, no playful quirks — just a reliable sans-serif that renders well across OSes and browsers. Sizes are tuned for readability, with a lot of 16px and 14px usage for body and UI elements, and bold weights for headings and buttons.

Spacing is built on an 8px grid. You see 8px padding inside inputs, 12px in buttons, 24px for section gaps. The rhythm is tight, which keeps the interface feeling efficient and precise.

Buttons are rounded but not overly pill-like (12px radius), except for occasional full-radius elements. Shadows are minimal — most depth comes from borders and color changes on hover/focus. That’s very “enterprise” — it works well in accessibility contexts and on low-spec devices.

The philosophy here: clarity over decoration. Every style decision is about keeping the user focused on the task — finding or posting jobs — while making sure the interface is accessible, responsive, and trustworthy.

2. Color System

2.1 Primary Colors

The hero color is #004fcb (rgb(0, 79, 203)). It’s used for CTAs, primary buttons, and key interactive states. Psychologically, this blue reads as dependable and professional — exactly the qualities you want when someone’s making career decisions.

Compared to competitors:

• LinkedIn leans lighter (#0077b5), which feels more corporate social.
• Glassdoor uses greens, pushing a “growth” narrative.
• Indeed’s darker blue is more grounded. It’s authority without coldness.

2.2 Complete Palette

Here’s every extracted color from the palette. The “Role” and “Usage” are based on the semantic variable names and component sources.

And the CSS variable palette (selected semantic tokens):

…and dozens more expressive tones for aqua, earth, orange, purple, magenta, green — clearly used in special contexts (alerts, info, premium badges).

2.3 Color Relationships

Contrast is strong. White on #004fcb passes WCAG AAA. Text grays (#2d2d2d on white) are comfortably above 7:1 contrast ratio. Even secondary text (#595959) holds ~4.7:1 — borderline AA for small text but safe for larger UI labels.

Dark mode? The palette contains inverse colors (--colors-foreground-inverse: #fff, --colors-background-inverse-weaker: #424242), so the system is prepared for dark backgrounds.

2.4 Usage Guide

• Primary + White: Use for CTAs. Works for buttons, links, badges.
• Dark Gray + White: Navigation, logo.
• Medium Gray: Secondary labels, meta info. Avoid on small text unless large enough for contrast.
• Expressive colors: Aqua, magenta, purple, green — these are functional, not decorative. Use them for status indicators, not for general UI flourishes.
• Avoid pairing saturated expressive colors with primary blue — they’ll fight for attention.

3. Typography

3.1 Font Families

Noto Sans everywhere. Fallbacks: "Helvetica Neue", Helvetica, Arial. No Google Fonts link in extracted sources — likely self-hosted or system fonts.

No variable fonts, no Adobe Fonts.

3.2 Type Scale

3.3 Hierarchy

The hierarchy is compressed. H1 ranges from 32px to 16px depending on context — clearly, “heading-1” is reused for smaller modules. Bold weights (700) are common for headings and action labels, medium (600) reserved for secondary buttons, and regular (400) for body text. This keeps contrast in weight high enough to guide the eye without relying solely on size.

4. Spacing & Layout

4.1 Spacing Scale

8px base grid. All values:

4.2 Layout

Breakpoints are exhaustive — from 320px up to 1740px. They’re not limited to standard device widths; they include odd ones like 426px, 530px, 896px. This suggests careful tuning for specific UI components.

5. Visual Elements

Border Radius

Indeed leans on 12px as the default. Rounded enough to feel friendly, but not overly soft.

Shadows

Two shadows found:

• rgba(45,45,45,0.16) 0 0 2px, rgba(45,45,45,0.08) 0 4px 8px, rgba(45,45,45,0.04) 0 8px 16px — layered shadow for cards/modals.
• rgba(0,0,0,0.2) 0 0 18px — heavier depth.

Shadows are rare — most depth comes from borders.

Borders/Dividers

Frequent use of 0 0 1px solid #e4e2e0 for dividers in lists. Buttons sometimes have 1px solid white or 1px solid #2557a7.

6. Components

6.1 Buttons

Primary (gnav-header-1ue33bt)

• Default: bg: #004fcb, color: #fff, radius: 12px, border: none, font-weight: 700, font-size: 16px.
• Hover: bg: rgb(22,64,129), color: #fff.
• Active: bg: var(--ifl-colors-background-action-primary-active), color: var(--ifl-colors-foreground-inverse), box-shadow: var(--ifl-shadows-inset).
• Focus: box-shadow: #fff 0 0 0 2px, #2557a7 0 0 0 3px, bg: rgb(30,174,219).

Secondary (ot-button-order-0)

• Default: bg: #2557a7, color: #fff, padding: 12px 16px, radius: 8px, border: 1px solid #fff, font-weight: 600, font-size: 16px.
• Hover: bg: rgb(22,64,129).
• Focus: Same double outline as primary.

6.2 Links

Four styles:

1. Dark gray (#2d2d2d), bold, no underline. Hover: lighter gray.
2. Primary blue (#004fcb), bold, underline default, no underline on hover.
3. Medium gray (#595959), regular weight, no underline. Hover: underline, color var(--ifl-colors-foreground).
4. Link blue (#3860be), bold, underline default, no underline on hover.

6.3 Forms

Text inputs:

• Default: transparent bg, dark gray text, radius: 12px, padding: 8px, no border.
• Focus: bg: rgb(30,174,219), text: white, border: 1px solid black.

6.4 Cards

Not explicitly extracted, but shadow values suggest light elevation for grouped content.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #004fcb;
  --color-link-legacy: #0000ee;
  --color-dark-gray: #2d2d2d;
  --color-medium-gray: #595959;
  --color-white: #ffffff;
  --color-hover-deep-navy: #153467;
  --color-hover-royal-blue: #0042ad;
  --colors-indeed-logo: #003a9b;
  --colors-primary-800: #2557a7;
  --colors-primary-1000: #0d2d5e;
  --colors-primary-1100: #001e57;
  --colors-neutral-200: #f3f2f1;
  --colors-neutral-300: #e4e2e0;
  --colors-neutral-600: #949494;
  --colors-neutral-1100: #222222;
  --colors-neutral-1200: #151515;
  --colors-neutral-1300: #000000;
  --colors-success-default: #1f662c;
  --colors-alert-700: #d93a40;
  --colors-warning-600: #d87d24;

  /* Typography */
  --font-family-base: "Noto Sans","Helvetica Neue",Helvetica,Arial;
  --font-size-h1-lg: 32px;
  --font-size-h1-md: 24px;
  --font-size-h1-sm: 20px;
  --font-size-button: 16px;
  --font-size-link-lg: 16px;
  --font-size-link-sm: 14px;
  --font-size-caption: 14px;

  /* Spacing */
  --space-2: 2px;
  --space-5: 5px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-21: 21px;
  --space-21-44: 21.44px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 159984px;

  /* Shadows */
  --shadow-card: rgba(45,45,45,0.16) 0px 0px 2px 0px, rgba(45,45,45,0.08) 0px 4px 8px 0px, rgba(45,45,45,0.04) 0px 8px 16px 0px;
  --shadow-deep: rgba(0,0,0,0.2) 0px 0px 18px 0px;
}

8. AI Coding Assistant Prompt

# Indeed Design System Specification

You are an Indeed design expert. Build UIs matching their visual language exactly.

## Brand Context
Indeed’s design is utilitarian and professional. It values clarity, legibility, and accessibility across all devices. Colors are functional, typography is consistent, and spacing follows an 8px grid. Components are rounded but restrained, with minimal shadows.

## Color Palette
- Primary Blue: #004fcb — CTAs, primary buttons
- Link Blue (legacy): #0000ee — Inline links
- Dark Gray: #2d2d2d — Navigation text, logo
- Medium Gray: #595959 — Secondary labels
- White: #ffffff — Background, text on dark
- Deep Navy: #153467 — Hover/focus states
- Royal Blue: #0042ad — Alternate hover
- Indeed Logo Blue: #003a9b — Logo mark
- Primary 800: #2557a7 — Button hover
- Primary 1000: #0d2d5e — Focus/active backgrounds
- Primary 1100: #001e57 — High contrast areas
- Neutral 200: #f3f2f1 — Background
- Neutral 300: #e4e2e0 — Dividers
- Neutral 600: #949494 — Secondary text
- Neutral 1100: #222222 — Text
- Neutral 1200: #151515 — Text
- Neutral 1300: #000000 — Icons/text
- Success Default: #1f662c — Success states
- Alert 700: #d93a40 — Critical actions
- Warning 600: #d87d24 — Warnings

## Typography
Font family: "Noto Sans","Helvetica Neue",Helvetica,Arial

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 lg | 32px | 700 | — | Page titles |
| H1 md | 24px | 700 | 1.25 | Section titles |
| H1 sm | 20px | 700 | 1.50 | Module headings |
| Button bold | 16px | 700 | 1.50 | Primary buttons |
| Button medium | 16px | 600 | 1.20 | Secondary buttons |
| Link lg bold | 16px | 700 | 1.25 | Nav links |
| Link sm reg | 14px | 400 | 1.50 | Body links |
| Link sm bold | 14px | 700 | 1.50 | Emphasis links |
| Caption bold | 14px | 700 | 0.00 | Labels |
| Caption reg | 14px | 400 | 1.50 | Meta info |

## Spacing & Grid
Base: 8px
Scale: 2px, 5px, 8px, 9px, 10px, 12px, 16px, 20px, 21px, 21.44px, 24px, 32px, 48px

## Border Radius
- sm: 8px — small buttons, inputs
- md: 12px — default buttons, nav
- lg: 20px — special containers
- full: 159984px — extreme pills

## Shadows & Depth
- Card: rgba(45,45,45,0.16) 0 0 2px, rgba(45,45,45,0.08) 0 4px 8px, rgba(45,45,45,0.04) 0 8px 16px
- Deep: rgba(0,0,0,0.2) 0 0 18px

## Component Specifications

### Primary Button
Default: bg #004fcb, color #fff, radius 12px, border none, font-weight 700, font-size 16px  
Hover: bg rgb(22,64,129)  
Active: bg var(--ifl-colors-background-action-primary-active), color var(--ifl-colors-foreground-inverse), box-shadow var(--ifl-shadows-inset)  
Focus: box-shadow #fff 0 0 0 2px, #2557a7 0 0 0 3px, bg rgb(30,174,219)

### Secondary Button
Default: bg #2557a7, color #fff, padding 12px 16px, radius 8px, border 1px solid #fff, font-weight 600  
Hover: bg rgb(22,64,129)  
Focus: same double outline as primary

### Navigation Links
Dark Gray bold, no underline; hover lighter gray  
Primary Blue bold, underline default; hover removes underline  
Medium Gray reg, no underline; hover underline

### Input Fields
Default: transparent bg, dark gray text, radius 12px, padding 8px, no border  
Focus: bg rgb(30,174,219), text white, border 1px solid black

## Layout & Responsive Rules
Breakpoints: 320px, 375px, 400px, 425px, 426px, 480px, 500px, 530px, 550px, 600px, 640px, 767px, 768px, 769px, 800px, 832px, 850px, 890px, 896px, 897px, 940px, 1023px, 1024px, 1280px, 1296px, 1350px, 1360px, 1364px, 1440px, 1740px

## Interaction Rules
- Transition timing: 150ms ease for state changes
- Focus indicators: double outline (#fff + #2557a7)
- Disabled states: opacity 0.5

## DO List
- Use ONLY colors from the palette
- Maintain 8px grid spacing
- Keep border radius consistent per component type
- Apply bold weights for actionable elements
- Use double outline for focus on buttons

## DON'T List
- Don’t mix random radius values
- Don’t invent new blues — stick to defined tokens
- Don’t remove hover/focus styles
- Don’t use shadows outside defined tokens

## Code Examples

Primary button:
```css
.btn-primary {
  background: #004fcb;
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: rgb(22,64,129); }
.btn-primary:focus { box-shadow: #fff 0 0 0 2px, #2557a7 0 0 0 3px; background: rgb(30,174,219); }
```

Secondary button:
```css
.btn-secondary {
  background: #2557a7;
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #fff;
  font-weight: 600;
  font-size: 16px;
}
```

Input:
```css
.input {
  background: transparent;
  color: #2d2d2d;
  border-radius: 12px;
  padding: 8px;
  border: none;
}
.input:focus {
  background: rgb(30,174,219);
  color: #fff;
  border: 1px solid #000;
}
```

9. Summary

TL;DR — Indeed’s design is about clarity and trust. Blue is king, Noto Sans is everywhere, and the 8px grid keeps everything tight. Rounded corners are consistent, shadows are rare, and focus states are explicit.

Brand Keywords — utilitarian-professional, accessible-minimal, trust-first, grid-disciplined