Greenhouse

Overview

Greenhouse is a modern, data-driven hiring platform that transforms recruitment from a manual, time-intensive process into an intelligent, confidence-backed workflow. The design language embodies 'Confident Clarity'—a philosophy that combines the trust of deep forest greens (#008561, #15372c) with the optimism of sky blues (#3574d6) and warm marigold accents (#ffd093), creating an interface that feels both professional and approachable. The visual system prioritizes clarity through generous whitespace (surface: #ffffff), high-contrast typography (Untitled Serif for headlines at 70px, Untitled Sans for body at 16px), and purposeful color placement that guides users toward confident hiring decisions. The brand personality is methodical yet human—precise in data presentation, warm in tone, never corporate-stiff. Example voice: 'Your next great hire is already in your pipeline. Let's find them faster.'

Colors

The Greenhouse color system is rooted in nature-inspired trust and digital confidence. Primary (#3574d6, rgb(53, 116, 214)) is the signature action color—deployed on CTAs ('Request a demo'), interactive elements, and focus states—commanding attention without aggression. Secondary (#008561, rgb(0, 133, 97)) is the brand's evergreen anchor, used for success states, confirmations ('Interested' badges), and secondary CTAs, reinforcing the growth and stability narrative. Tertiary (#ffd093, rgb(255, 208, 147)) is the optimistic accent—applied to highlights, callouts, and UI flourishes that inject warmth into data-heavy interfaces. The surface stack is deliberately minimal: surface (#ffffff) for clean backgrounds, surface-container-high (#d8d8d8) for subtle dividers and disabled states, and surfa

Typography

The type system balances editorial sophistication with functional clarity. Display (Untitled Serif, 70px, 400 weight, -0.02em letter-spacing, 84px line-height) anchors hero sections with serif elegance, signaling that hiring is a thoughtful, human endeavor. Headline-lg (48px, 400 weight) and headline-md (32px, 400 weight) maintain the serif voice for section titles, creating visual rhythm through serif-to-sans transitions. Body copy (Untitled Sans, 16px, 400 weight, 24px line-height) is set in a clean, modern sans-serif for maximum legibility in data-dense contexts—critical for reading candidate profiles and reports. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons, badges, and form labels, providing visual weight without bulk. All text over busy backgrounds (e.g.,

Layout

Greenhouse employs a fluid 12-column grid with a max-width of 1440px, allowing content to breathe on large screens while maintaining focus on medium devices (991px breakpoint). The gutter spacing is consistently 24px (md spacing token), creating rhythm between columns and sections. Hero sections use full-width backgrounds (e.g., the mint-green hero with #e6fff8 background) paired with centered content containers (max 1200px) to balance visual impact with readability. Section separation is achieved through lg spacing (40px) between major blocks, with md spacing (24px) for subsections. Card-based layouts (e.g., feature grids, testimonials) use md spacing for internal padding and sm spacing (12px) for element-to-element relationships. The container-max-width of 1440px accommodates side-by-sid

Elevation & Depth

Depth in Greenhouse is conveyed through subtle shadows and layering, never through darkness. Level 1 (Base): flat white surfaces (surface: #ffffff) with no shadow, establishing the primary plane. Level 2 (Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border in surface-container-high (#d8d8d8), creating gentle separation from the base. Level 3 (Modals, Popovers, Dropdowns): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with a 1px border in outline (#90d1c2), signaling modal prominence. Hover states elevate cards from Level 2 to Level 3 via transition: all 200ms cubic-be

Shapes

The shape language is 'Approachable Precision'—combining soft corners with geometric clarity. Buttons use full radius (9999px / border-radius: 25px) to feel friendly and clickable, reducing perceived friction on high-stakes actions like 'Request a demo'. Cards and containers use md radius (12px), balancing softness with structure—not so rounded as to feel playful, not so sharp as to feel corporate. Form inputs use DEFAULT radius (8px), a middle ground that signals 'functional but not cold'. Badges and pills use full radius (9999px) to emphasize their role as discrete, self-contained labels. Mo

Components

Action Elements Buttons are the primary conversion mechanism. Button-primary (background: #3574d6, color: #ffffff, padding: 8px 20px 10px, border-radius: 25px, height: 40px, font-size: 14px, font-weight: 600) is the dominant CTA—'Request a demo', 'Learn more'. On hover, background transitions to #2e65ba (primary-container) over 200ms. Button-secondary (background: #008561, color: #ffffff, padding: 12px 32px, border-radius: 24px, height: 44px) is for supporting actions—'Read the blog', 'Explore features'. Button-ghost (background: transparent, border: 1px solid #3574d6, color: #3574d6) is for tertiary actions; on hover, background becomes rgba(53, 116, 214, 0.08). All buttons use transition: background-color 200ms cubic-bezier(0.2, 0, 0.13, 1) for smooth state changes. Focus state: outl

Do's and Don'ts

**Do**

• Do use primary (#3574d6) exclusively for high-priority CTAs and interactive states—never dilute it with secondary uses.
• Do maintain minimum 24px padding around buttons and form inputs to reduce cognitive load and improve touch targets.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to all text overlaid on photography or busy backgrounds.
• Do use full border-radius (25px) on buttons to signal approachability and reduce perceived friction on conversions.
• Do transition all interactive states over 200ms using cubic-bezier(0.2, 0, 0.13, 1) for smooth, professional feel.
• Do preserve the serif-to-sans hierarchy: Untitled Serif for headlines, Untitled Sans for body and UI labels.
• Do use the secondary color (#008561) for success states, confirmations, and growth-oriented messaging.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and 0 8px 24px rgba(0, 0, 0, 0.12) to modals for consistent elevation.

**Don't**

• Don't use hard corners (border-radius: 0) on buttons or cards—softness is core to the brand's approachability.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15)—the brand is light and airy, not heavy or dramatic.
• Don't mix primary and secondary colors on the same CTA—each button should have a single, clear role.
• Don't use the tertiary color (#ffd093) for critical actions or error states—reserve it for highlights and warmth.
• Don't set font sizes smaller than 14px for body text or 12px for labels—readability is non-negotiable in a data platform.
• Don't use system fonts (Arial, sans-serif) as primary typefaces—always load Untitled Sans and Untitled Serif from Google Fonts.
• Don't apply opacity below 0.8 to interactive elements—low contrast reduces perceived clickability.
• Don't transition states faster than 150ms or slower than 300ms—the sweet spot is 200ms for professional, responsive feel.