Labelbox

Overview

Labelbox is a reinforcement learning data engine built for frontier AI labs and enterprises training the next generation of intelligent agents. The brand embodies "Structured Pragmatism"—a design philosophy that balances technical precision with approachable warmth. The interface conveys clarity, rigor, and trustworthiness through a carefully calibrated palette of teal-blue accents (#36707f) against a warm, off-white canvas (#f1ede6), creating an environment where complex AI workflows feel navigable and purposeful. The visual language prioritizes legibility and cognitive efficiency: every element serves a function, every color choice signals meaning, and every interaction feels intentional.

The brand voice is direct, expert, and human-centered. Labelbox speaks to AI researchers and ML engineers with precision—avoiding hype while celebrating capability. The tone is confident but not arrogant, technical but not impenetrable. Example: "Every run is graded. Persistent, long-horizon, asynchronous agents that learn continually." This sentence exemplifies the brand: it states facts with quiet authority, uses domain-specific language without gatekeeping, and respects the reader's intelligence.

Colors

The color system is anchored in a sophisticated teal-blue primary (#36707f), derived from the brand's core identity as a data infrastructure company. This primary is used exclusively for interactive elements—buttons, links, focus states, and key CTAs—ensuring that user attention naturally flows to actionable moments. The secondary accent, a warm terracotta (#c1764f), provides visual relief and is reserved for highlights, status indicators, and secondary calls-to-action, creating a complementary warmth that humanizes the technical interface.

The surface stack is built on a warm, off-white foundation (#f1ede6, the meta theme color), which serves as both background and primary container. This choice—rather than pure white—reduces eye strain and creates a subtle, sophisticated baseline that f

Typography

The type system uses IBM Plex Sans as the primary typeface—a rational, geometric sans-serif that conveys technical competence—paired with the custom display font "The Future" for hero headlines, which introduces personality and visual distinction at the top of the page. The hierarchy is built on a 51.2px display size (for H1 hero text) that scales down through headline-lg (40px, 600 weight) for section titles, headline-md (28px, 600 weight) for subsections, and body-lg (19.2px, 400 weight) for primary content. This progression ensures that the visual weight of text naturally guides the eye through the page without requiring heavy color coding. Body text is set at 19.2px with 28px line-height (1.46x multiplier), providing generous breathing room for technical content and reducing cognitive

Layout

The page layout follows a 12-column grid with a max-width of 1280px, centered on the viewport with symmetric gutters of 24px on desktop (reducing to 16px on tablet, 12px on mobile). The spacing scale is semantic: lg spacing (40px) separates major sections (hero, features, testimonials), md spacing (24px) groups related content blocks, and sm spacing (12px) creates breathing room within components. The hero section uses full-width treatment with centered content, establishing visual authority before narrowing into the standard container for supporting sections. White-space is treated as a first-class design element—sections are separated by 40px vertical gaps, cards within sections by 24px, and internal card padding by 24px, creating a rhythm that feels unhurried and premium. The container-

Elevation & Depth

Depth in Labelbox is conveyed through a restrained shadow system and subtle surface-color shifts rather than dramatic layering. The elevation scale uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and micro-interactions, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated overlays. These shadows are soft and diffuse—never sharp or high-contrast—maintaining the warm, approachable aesthetic while still creating clear visual separation. The surface-container stack provides an alternative depth

Shapes

The shape philosophy is "Technical Warmth"—combining the precision of geometric forms with the approachability of softened corners. Buttons use 1rem (16px) border-radius, creating a distinctly rounded but not pill-shaped appearance that feels modern without being trendy. Cards and containers use 1.5rem (24px) radius, a more generous rounding that softens the technical nature of data-heavy interfaces and invites interaction. Form inputs and smaller UI elements use 0.5rem (8px) radius, maintaining geometric clarity while avoiding the harsh 90-degree corners of austere design. The full-radius (99

Components

Action Elements Buttons are the primary interaction mechanism and use a three-tier system. Primary buttons (background: #36707f, text: white, padding: 8px 12px, height: 40px, border-radius: 1rem) are reserved for the most important CTAs—"Contact us", "Log in", "Start for free". On hover, the background shifts to #2b5965 with a 200ms transition, maintaining the teal family while signaling state change. Secondary buttons (background: #bcd9e0, text: #274e58, border-radius: 9999px, padding: 4px 12px, height: 32px) are used for supporting actions like "Products", "Resources", and appear in the header navigation. Tertiary buttons (background: transparent, border: 1px solid #ccc7c0, text: #36707f) are used for low-priority actions and form submission alternatives. All buttons use IBM Plex San

Do's and Don'ts

**Do**

• Do use the primary teal (#36707f) exclusively for interactive elements and CTAs—never for backgrounds or decorative text.
• Do maintain the 24px gutter and 40px section spacing to preserve the premium, unhurried rhythm of the page.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and elevated containers; never use harsh, high-contrast shadows.
• Do use IBM Plex Sans for all body and UI text; reserve "The Future" display font only for hero headlines and major section titles.
• Do transition all interactive states (hover, focus, active) over 150–200ms with ease-in-out timing to feel responsive and polished.
• Do pair the warm off-white surface (#f1ede6) with the teal primary for maximum contrast and visual clarity; never use pure white backgrounds.

**Don't**

• Don't use the secondary terracotta (#c1764f) for primary CTAs or interactive elements—it's reserved for highlights and status indicators.
• Don't apply border-radius values smaller than 0.25rem; the brand rejects austere, sharp-cornered design.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or spread larger than 8px; harsh shadows conflict with the warm, approachable aesthetic.
• Don't mix typefaces within a single component; use IBM Plex Sans for all UI text and IBM Plex Mono only for code snippets.
• Don't reduce padding or spacing below the sm token (12px) in cards or containers; the brand values breathing room and legibility.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; always use the defined on-surface (#2a2622) and surface (#f1ede6) tokens to maintain warmth and reduce eye strain.