FlexJobs

Overview

FlexJobs is a trust-first remote job platform built on the principle of verified opportunity. The design system embodies "Accessible Professionalism"—a visual language that combines institutional credibility (deep teal headers, clean typography) with approachable warmth (vibrant coral CTAs, generous whitespace). The brand serves job seekers who are tired of scams and junk listings; they want clarity, legitimacy, and a fast path to opportunity. The UI evokes confidence through precision: every element has a clear purpose, every color choice signals intent. Voice: direct, encouraging, never patronizing. Example: "220,968 verified jobs from 15,207 trusted companies—start your search today."

Colors

The FlexJobs color system balances institutional trust with energetic action. Primary (#FF5322, a vibrant coral-orange) is reserved exclusively for call-to-action buttons, search icons, and key interactive moments—it's the color users click on to change their career. Secondary (#004F6D, a deep teal) anchors the header, navigation, and brand identity, communicating stability and expertise. Tertiary (#48A4FF, a bright sky blue) supports secondary actions, badges, and informational highlights. The surface stack (white #FFFFFF as base, progressing through #F9FAFB, #F3F4F6, #E9ECEF, #D0D0D0) provides subtle visual hierarchy without overwhelming the content. On-surface text is pure black (#000000) for maximum legibility; on-surface-variant (#505050) is used for secondary copy and disabled states

Typography

The type system uses Halcyon as the primary typeface, paired with Open Sans as a fallback, creating a modern yet professional voice. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major announcements; Headline-LG (55px, 600 weight) is used for primary page titles like "The #1 Job Site to Find Work From Home Jobs"; Headline-MD (40px, 600 weight) breaks up content sections. Body-LG (18px, 400 weight, 28px line-height) is used for hero copy and prominent descriptions; Body-MD (16px, 400 weight, 24px line-height) is the default for all body text, ensuring 1.5x line-height for comfortable reading. Label-MD (14px, 600 weight, 0.01em tracking) is applied to button text and form labels; Label-SM (12px, 500 weight, 0.02em tracking) is used for helper text and metada

Layout

FlexJobs uses a 12-column fluid grid with a max-width of 1280px (container-max), ensuring content remains readable on all screen sizes. The page rhythm is built on an 8px unit system: spacing uses semantic keys (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) to create consistent breathing room. The hero section uses lg spacing (40px) for section separation, with md spacing (24px) for internal component padding. The gutter (24px) is applied to all horizontal container padding, creating a consistent left-right margin. Cards and containers use md padding (24px) internally, with sm spacing (12px) between stacked elements. The search bar at the top of the page uses a 2-column layout on desktop (job title + location inputs), collapsing to single-column on mobile. All form inputs are 44px tall

Elevation & Depth

Depth in FlexJobs is conveyed through subtle shadows and layering, never through color darkening. Level 1 (Base): the white surface (#FFFFFF) with no shadow. Level 2 (Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to all cards, input fields, and dropdown panels. Level 3 (Modals & Elevated Content): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), used for modals, popovers, and hover states of cards. The header uses a subtle Level 1 shadow (0 1px 2px rgba(0, 0, 0, 0.06)) to separate it from the page without visual heaviness. Focus states on interactive elements use a 3px sp

Shapes

The shape philosophy is "Minimal Geometry"—rounded corners are used sparingly to maintain a professional, trustworthy appearance. Buttons and inputs use 4px border-radius (rounded.sm / 0.25rem), just enough to soften hard edges without appearing playful. Cards and containers use 12px border-radius (rounded.md / 0.75rem) to create visual distinction from buttons while maintaining the same design language. Badges and pills use full border-radius (9999px) to signal secondary or supplementary information. The search input uses 4px on the left side and 0px on the right (where the search button atta

Components

Action Elements Buttons are the primary interaction pattern. Button-Primary (#FF5322, 16px label-md, 48px height, 12px 24px padding, 4px radius) is used for all primary CTAs: "Sign Up", "Find Your Next WFH Job!", and search submission. On hover, the background shifts to #E64A1A (darker coral) with a 200ms ease-in-out transition. On active/pressed, the background becomes #CC3D14. Button-Secondary uses a transparent background with a 2px solid border in primary coral, maintaining visual hierarchy while offering an alternative action path. The search icon button uses the primary color (#FF5322) on a transparent background, with a 4px radius and 12px padding. All buttons use font-weight: 600 and fontSize: 16px for consistency.

Containers & Surfaces Cards use a white background (#FFFFF

Do's and Don'ts

**Do**

• Do use primary coral (#FF5322) exclusively on CTAs and interactive moments—it's the brand's action color and should feel intentional and rare.
• Do maintain 24px gutter padding on all horizontal container edges and 40px lg spacing between major sections to preserve breathing room.
• Do apply the focus ring (0 0 0 3px rgba(255, 83, 34, 0.1)) to all keyboard-interactive elements for accessibility compliance.
• Do use Halcyon typeface at 600+ weight for all headlines and 400 weight for body text to maintain the professional-yet-approachable voice.
• Do apply 200ms ease-in-out transitions to all hover and focus state changes for a responsive, polished feel.

**Don't**

• Don't use primary coral for backgrounds, borders, or non-interactive elements—it dilutes its power as an action signal.
• Don't apply rounded corners larger than 12px (rounded.md) to buttons or cards; the brand's professionalism depends on geometric restraint.
• Don't use shadows darker than 0 16px 40px rgba(0, 0, 0, 0.12) or lighter than 0 1px 2px rgba(0, 0, 0, 0.06); the elevation system is carefully calibrated.
• Don't mix typefaces—Halcyon is the primary, Open Sans is fallback only. Never introduce a third font family.
• Don't reduce padding below 12px on inputs or buttons; the interface must remain spacious and accessible, never cramped.