Indeed

Overview

Indeed is a global employment marketplace designed to reduce friction between job seekers and employers through a trust-forward, accessible interface. The design aesthetic is "Professional Clarity"—a modern, minimalist approach that prioritizes information hierarchy and conversion without sacrificing warmth. The brand serves millions of users across diverse geographies and languages, requiring a system that scales from mobile to desktop while maintaining visual consistency. The emotional response is one of confidence and possibility: users should feel that finding their next opportunity is straightforward, achievable, and within reach.

The voice is direct, encouraging, and human. Indeed speaks in active verbs and concrete outcomes: "Find your next job," "Apply on company site," "View similar jobs." The vocabulary avoids corporate jargon and instead uses everyday language that resonates across cultures and education levels. The brand personality is pragmatic yet optimistic—it acknowledges the job search is real work, but frames it as a solvable problem. Example sentence in Indeed's voice: "Upload your CV and find your next job on Indeed."

Colors

The color system is anchored by a confident, action-oriented primary blue (#004fcb) that appears on all primary CTAs, links, and focus states. This blue is the visual signature of Indeed's brand and drives conversion across the platform. The primary blue is supported by a secondary blue (#5592fd) used for secondary actions, hover states, and informational elements. The neutral palette ranges from pure white (#ffffff) for surfaces down through carefully calibrated grays (#f7f6f5, #f3f2f1, #e4e2e0, #d4d2d0, #767676, #595959, #2d2d2d) that provide sufficient contrast for accessibility (WCAG AA minimum 4.5:1 on body text) while maintaining visual breathing room. Tertiary green (#1f662c) is reserved for success states and positive feedback. Error red (#a9252b) signals destructive actions and va

Typography

The type system uses Indeed Sans, a custom variable font optimized for legibility across screen sizes and languages. The hierarchy is built on a 4px baseline grid with six core levels: display (56px, 700 weight) for hero headlines, headline-lg (32px, 700) for page titles, headline-md (24px, 700) for section headers, title-lg (20px, 700) for card titles, body-lg (16px, 400) for primary content, and body-md (14px, 400) for secondary content and metadata. Label styles (label-md at 14px/700, label-sm at 12px/500) are used exclusively for buttons, badges, and form labels. Letter-spacing is minimal (0 to 0.02em) to maintain density and readability. Line-height is set to 1.5x the font size (e.g., 24px text gets 36px line-height) to ensure comfortable reading on mobile and desktop. Apply text-shad

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, scaling from 320px mobile to desktop. The gutter is 24px on desktop, reducing to 16px on tablet and 12px on mobile. White-space is semantic: lg spacing (40px) separates major sections (hero to job list), md spacing (24px) separates cards within a list, and sm spacing (12px) separates form fields and inline elements. The container max-width of 1280px ensures readability on ultra-wide displays while preventing lines from exceeding 80 characters. Job listings use a two-column layout on desktop (left sidebar for filters, right for results) that collapses to single-column on mobile. The search bar at the top uses 100% width on mobile and constrains to the container max-width on desktop. Padding inside cards is consistently md (2

Elevation & Depth

Depth is conveyed through a subtle shadow system rather than color shifts. The elevation scale uses three levels: sm (0 0.125rem 0.1875rem rgba(45, 45, 45, 0.08)) for cards and containers at rest, md (0 0.25rem 0.5rem rgba(45, 45, 45, 0.08)) for cards on hover, and lg (0 0.5rem 1rem rgba(45, 45, 45, 0.08)) for modals and popovers. Shadows use a dark neutral (rgba(45, 45, 45, 0.08)) rather than pure black to maintain warmth. Focus states use a 3px ring of primary-container (#ecf2ff) with a 1px inner stroke of primary (#004fcb), creating a double-ring effect (box-shadow: 0 0 0 3px rgba(0, 79, 20

Shapes

The shape philosophy is "Soft Technical"—rounded corners are used to soften the interface without sacrificing clarity or professionalism. Buttons and primary CTAs use lg radius (1rem / 16px), creating a pill-like appearance that signals interactivity. Input fields and search bars use lg radius (1rem) for consistency with buttons. Cards and containers use md radius (0.75rem / 12px) to create visual distinction from buttons while maintaining the soft aesthetic. Filter chips and badges use full radius (9999px) to emphasize their role as discrete, removable elements. The radius scale progresses fr

Components

Action Elements Buttons are the primary conversion mechanism on Indeed. Primary buttons use #004fcb background with white text, 48px height, 12px vertical padding, 24px horizontal padding, and lg radius (1rem). On hover, the background shifts to #003a9b (primary-900) with a transition of 200ms ease-out. On active/press, the background becomes #002970 (primary-1000). Focus states apply a 3px ring of primary-container (#ecf2ff) with a 1px inner stroke of primary (#004fcb). Secondary buttons use a transparent background with a 1px border in outline (#595959), white text on hover background surface-container-low (#f3f2f1), and the same height and padding as primary buttons. The "Find jobs" CTA on the hero uses primary styling with a 16px font-weight 700 to maximize prominence.

Contain

Do's and Don'ts

**Do**

• Do use primary blue (#004fcb) exclusively for primary CTAs and focus states—never use it for decorative elements or backgrounds.
• Do maintain 24px gutter spacing on desktop and 12px on mobile to ensure content breathes and scans easily.
• Do apply lg radius (1rem) to all interactive elements (buttons, inputs, chips) and md radius (0.75rem) to containers to create a clear visual hierarchy.
• Do use the neutral gray scale (#f7f6f5 to #2d2d2d) for surfaces and text, ensuring minimum 4.5:1 contrast ratio for body text.
• Do apply 150ms ease-out transitions on hover and focus states to provide smooth, predictable feedback.
• Do use Indeed Sans exclusively across all text—never fall back to system fonts in component definitions.

**Don't**

• Don't use primary blue for backgrounds or large surface areas—reserve it for interactive elements and focus indicators only.
• Don't apply shadows with blur radius greater than 1rem or opacity greater than 0.08—the system is intentionally flat and minimal.
• Don't mix rounded and sharp corners on related elements (e.g., button and input in the same form)—maintain consistency within a component family.
• Don't use color alone to convey status or error states—always pair with an icon or text label for accessibility.
• Don't apply letter-spacing greater than 0.02em on body text—it reduces legibility and creates visual noise.
• Don't use the secondary blue (#5592fd) on primary CTAs—it's reserved for secondary actions and hover states only.