Labelbox Design System

Overview

Labelbox presents itself as "the data factory for AI teams," and its visual language delivers on that industrial metaphor with precision-engineered restraint. The design lives on a warm gray {colors.canvas} background — not pure white, but a sophisticated #e5e5e5 that reads as engineered aluminum or matte concrete. This is not a typical SaaS landing page; it's closer to architectural documentation, where every element feels specified rather than decorated.

The brand's voltage resides almost entirely in its custom headline typeface — "The Future" — an ultra-modern geometric sans-serif that appears at massive scales ({typography.display-lg} at 60px, {typography.display-xl} beyond). This face carries tight letter-spacing (-1.5px at 60px) and a weight range that stays light (300–400), creating headlines that feel expansive and confident without aggression. Body copy defaults to IBM Plex Sans at weight 300, maintaining the lightweight, breathable quality throughout. The pairing creates a clear hierarchy: display type announces; body copy explains.

Color is used sparingly and strategically. Beyond the grayscale foundation, the only chromatic accents appear in the signature isometric factory illustration — {colors.primary} blue cubes, {colors.accent-yellow} yellow cubes, and {colors.accent-orange} orange cubes moving along conveyor belts. These aren't decorative; they're semantic, suggesting data pipeline stages. UI chrome stays monochromatic: {colors.surface-dark} buttons with {colors.on-dark} text, transparent ghost buttons, and {colors.ink} navigation links.

Shape language is consistently soft but not pill-shaped. The {rounded.md} (8px) radius dominates buttons and cards, while smaller elements use {rounded.sm} (2px) or {rounded.DEFAULT} (6px). There's no sharp-edged geometry here — everything feels machined with controlled tolerances.

Depth is achieved through a distinctive neumorphic shadow system: white highlight layers offset against cool-gray shadow layers, creating surfaces that appear pressed into or lifted from the canvas. This is most prominent on elevated cards and interactive elements, where the {shadows.neumorphic} treatment replaces traditional drop shadows entirely.

Key Characteristics

• Canvas color is warm gray {colors.canvas} (#e5e5e5), never white — this defines the entire page atmosphere.
• Headlines use "The Future" at {typography.display-lg} (60px/400/-1.5px tracking) with IBM Plex Sans for all body text.
• Primary brand accent {colors.primary} (#93c5fd) appears in illustration only, rarely in UI chrome.
• CTA buttons use {colors.surface-dark} (#262626) backgrounds with {colors.on-dark} (#fafafa) text — inverted, not colored.
• Border radius clusters tightly around {rounded.md} (8px); maximum is {rounded['2xl']} (24px).
• Neumorphic shadow treatment {shadows.neumorphic} on elevated surfaces instead of standard drop shadows.
• Spacing uses an 8px base unit with {spacing.section} (86px) vertical rhythm between major sections.
• Illustration vocabulary: isometric factory line art with colored cubes representing data units.
• Typography weight stays light (300–400); bold is reserved only for emphasized button copy ({typography.button-emphasis} at 500).

Colors

Brand & Accent

• Primary ({colors.primary} — #93c5fd): Light sky blue used exclusively in the hero illustration's data cubes. Not applied to buttons, links, or UI controls in this view — its role is illustrative, signaling "data in motion."
• Primary Dark ({colors.primary-dark} — #60a5fa): Deeper blue variant available for hover states or secondary brand moments; inferred from the primary family.
• Accent Yellow ({colors.accent-yellow} — #fbbf24): Golden yellow appearing in illustration cubes (likely representing a different data category or processing stage).
• Accent Orange ({colors.accent-orange} — #fb923c): Warm orange cube color in the isometric factory illustration; provides warmth against the cool gray canvas.
• Accent Green ({colors.accent-green} — #4ade80): Success-state green detected in CSS inventory; likely used for status indicators or validation states not visible in the hero fold.

Surface

• Canvas ({colors.canvas} — #e5e5e5): The dominant page background. A medium-warm gray that reads as concrete, metal, or matte laminate. Every section sits on this or a slightly lighter/darker variant.
• Surface Soft ({colors.surface-soft} — #d4d4d4): One step darker than canvas; used for the logo ticker band at the bottom of the hero area, creating subtle zonal separation.
• Surface Strong ({colors.surface-strong} — #bfbfbf): Two steps darker than canvas; available for pressed states or heavily differentiated zones.
• Surface Light ({colors.surface-light} — #f5f5f5): One step lighter than canvas; used for the header/navigation bar and section containers, creating gentle lift from the main background.
• Surface Dark ({colors.surface-dark} — #262626): Near-charcoal; the fill color for primary CTA buttons ("Take a tour", "Contact us"). Provides high-contrast anchor points without resorting to pure black.

Text / Ink

• Ink ({colors.ink} — #171717): The darkest text color — near-black with slight warmth. Used for headlines, primary navigation, and high-importance body copy. Appears 516 times in the extracted DOM, confirming it as the dominant text token.
• Body ({colors.body} — #737373): Medium gray for secondary body text, descriptions, and supporting copy. Provides comfortable reading contrast against {colors.canvas} while receding visually behind {colors.ink} content.
• Muted ({colors.muted} — #525252): Darker than body; used for tertiary information, timestamps, or labels requiring more presence than body text but less than ink.
• Muted Secondary ({colors.muted-secondary} — #49535f): Cool-leaning gray with a hint of blue; appears in specific UI text instances, possibly for metadata or technical annotations.
• Muted Soft ({colors.muted-soft} — #a3a3a3): Light gray for disabled states, placeholder text, or very low-priority information.
• On Dark ({colors.on-dark} — #fafafa): Off-white text color for rendering on {colors.surface-dark} or {colors.pure-black} backgrounds. Used in "Contact us" and "Take a tour" button labels.
• On Primary ({colors.on-primary} — #171717): Dark text for rendering on {colors.primary} backgrounds when needed; satisfies AA contrast requirements against the light blue.
• Dark Text ({colors.dark-text} — #404040): Mid-dark gray for logo marks and branded lockups in the ticker band.
• Pure Black ({colors.pure-black} — #000000): Reserved for active/pressed states on dark buttons; the deepest available value.

Hairlines & Borders

• Hairline ({colors.hairline} — #d4d4d4): Standard border/divider color, matching {colors.surface-soft} for visual cohesion.
• Hairline Soft ({colors.hairline-soft} — #e5e5e5): Subtler divider matching canvas tone; nearly invisible but present for structural definition.
• Overlay ({colors.overlay} — rgba(0, 0, 0, 0.1)): Semi-transparent black for hover dimming, disabled state overlays, or focus ring backgrounds.

Typography

Font Family

Labelbox employs a two-typeface system with a third mono option for technical contexts:

"The Future" — A proprietary display face loaded via self-hosted WOFF2 files (/static/fonts/The-future/). This is a geometric, ultra-modern sans-serif with extreme thin-to-light weights (100–300 visible in font-face declarations). It carries all H1/H2-level headlines and any text needing editorial presence. The character set suggests European grotesque influences pushed toward futuristic minimalism — circular bowls, nearly straight-sided Os, extremely narrow apertures. This is the brand's signature typographic asset and cannot be substituted with a Google Font without losing identity.

IBM Plex Sans — An open-source grotesque from IBM (loaded via Google Fonts CDN). Serves all body copy, UI labels, navigation, button text, and caption-level information. Available in weights 100–700, but the design system restricts usage to 300 (body), 400 (standard UI), and 500 (emphasized buttons). Its slightly humanist proportions balance the mechanical precision of "The Future."

IBM Plex Mono (via Google Fonts) — Monospace companion for code snippets, technical annotations, API references, or numerical data displays. Loaded alongside Plex Sans in the same CDN request.

Aktiv Grotesk — Detected in font-face declarations (Typekit/Adobe Fonts hosted) but not actively used in the above-fold DOM; likely legacy or reserved for authenticated app surfaces.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 300 | 1.0 | -1.8px | Hero-scale headlines (inferred max) | | {typography.display-lg} | 60px | 400 | 1.0 | -1.5px | Main hero headline ("The data factory...") | | {typography.title-md} | 60px | 400 | 1.0 | -1.5px | Section titles (same spec as display-lg in current view) | | {typography.display-sm} | 48px | 400 | 1.0 | -1.2px | Sub-section headlines | | {typography.body-lg} | 24px | 300 | 1.33 | 0 | Hero subhead paragraph | | {typography.body-md} | 18px | 300 | 1.5 | 0 | Body copy (inferred standard) | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Navigation links, standard UI text | | {typography.label-md} | 14px | 500 | 1.43 | 0 | Form labels, small emphasis | | {typography.caption} | 12px | 400 | 1.33 | 0 | Ticker band label ("TRUSTED BY..."), legal | | {typography.button} | 16px | 400 | 1.5 | 0 | Standard button text | | {typography.button-emphasis} | 16px | 500 | 1.5 | 0 | Emphasized CTA button text | | {typography.nav-link} | 16px | 400 | 1.5 | 0 | Top navigation items | | {typography.mono} | 13px | 400 | 1.38 | 0 | Code, technical strings |

Principles

The typography system trusts scale and letter-spacing over weight to establish hierarchy. Notice that {typography.display-lg} runs at weight 400 (regular) — the same weight as navigation text — but achieves dominance through sheer size (60px vs 16px) and aggressive negative tracking (-1.5px). This is a deliberate choice: the brand avoids heavy/bold display type, keeping even the largest headlines feeling airy and modern rather than assertive or dated.

Body text at {typography.body-lg} drops to weight 300 (light), which is unusually light for web body copy at 24px. This works because the line height is generous (32px, 1.33 ratio) and the canvas isn't pure white — the warm gray background reduces harshness. IBM Plex Sans at 300 retains excellent legibility due to its open apertures and tall x-height.

There is no italic usage in the extracted headline or body styles, though "The Future" has italic cuts available in the font-face declarations (suggesting potential for pull quotes or editorial subheads). Uppercase is confined to the logo wordmark ("Labelbox") and the ticker band label ("TRUSTED BY COMPANIES OF ALL SIZES..."); sentence case dominates elsewhere, reinforcing the engineering-manual voice.

Letter-spacing is aggressively negative at display sizes (-1.2px to -1.8px) but returns to normal (0) at body sizes. This creates "tight but not touching" headlines that feel precision-set.

Note on Font Substitutes

"The Future" has no direct Google Fonts equivalent. For development environments without access to the self-hosted font files, approximate using:

• Space Grotesk (weights 300–400) — closest geometric feel with similar circular counters
• Syne (weight 400) — futuristic geometric alternative
• Outfit (weights 200–400) — modern geometric with good weight range

Define CSS variables:

--font-display: 'The Future', 'Space Grotesk', sans-serif;
--font-body: 'IBM Plex Sans', -apple-system, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;

IBM Plex Sans and IBM Plex Mono are freely available via Google Fonts and require no substitution.

Layout

Spacing System

• Base unit: 8px (with 2px and 4px micro-adjustments available).
• Tokens: {spacing.xxs} (2px — micro-offsets), {spacing.xs} (4px — icon gaps), {spacing.sm} (6px — tight internal padding), {spacing.md} (8px — standard gap), {spacing.lg} (10px — button padding vertical), {spacing.xl} (12px — button padding horizontal, input padding), {spacing['2xl']} (16px — common padding), {spacing['3xl']} (24px — card internal padding), {spacing['4xl']} (32px — component gaps), {spacing['5xl']} (48px — large gaps), {spacing['6xl']} (64px — header-height scale), {spacing.section} (86px — vertical section rhythm), {spacing.section-xl} (96px — hero-scale padding).
• Section padding (vertical): {spacing.section} (86px) — used between hero and logo-ticker band; likely consistent for all major section breaks below fold.
• Card internal padding: {spacing['3xl']} (24px) per {component.card-default} specification.
• Gutters: Content constrains to 1440px max-width ({component.section-container}), centered within viewport; horizontal gutters estimated at {spacing['3xl']}–{spacing['4xl']} (24–32px) based on container inner padding conventions.

Grid & Container

• Max content width: 1440px (explicit in extracted container widths for <main>, <section>, and <header> elements). This is wide — designed for dashboards and data-visualizations, not blog-like reading columns.
• Density choice: Marketplace/app density — the 1440px container and 60px headlines signal B2B enterprise tooling, not consumer marketing. Information density will be high below the fold.
• Desktop grid behavior: Hero section uses asymmetric two-column layout — approximately 55% width for headline+CTA text column (left), 45% for isometric illustration (right). No explicit CSS grid/flex column counts detected; likely flexbox with percentage-based splits.
• Hero column splits: Text column contains headline → subhead → CTA pair (vertical stack); illustration column contains full-width isometric factory scene extending to viewport edge (likely overflow-visible or negative-margin technique).

Whitespace Philosophy

The system practices generous-but-purposeful whitespace — not editorial-airy (the 1440px width prevents that), but certainly not marketplace-dense. The {spacing.section} (86px) vertical breathing room between major bands gives each section room to declare itself. Within components, padding follows the 8px grid strictly. The overall impression is "spacious blueprint" rather than "cramped spreadsheet."

Header Architecture

|--------------------------------------------------------------------------------|
| [Logo]     Why Labelbox  Resources ▾  What we offer ▾  Pricing   Log in |Start|Contact|
|            (nav-link)    (dropdown)    (dropdown)              (free)       us    |
|--------------------------------------------------------------------------------|
| max-width: 1440px (centered)                                                   |
| background: {colors.surface-light} (#f5f5f5)                                   |
| height: ~64px                                                                  |
|--------------------------------------------------------------------------------|

Navigation uses flush-left logo, center-left menu cluster with dropdown carets, and flush-right action cluster (login link, "Start for free" ghost link, "Contact us" filled button).

Hero Section

|--------------------------------------------------------------------------------|
|                                                                                |
|  The data factory                                      ┌─────────────────────┐|
|  for AI teams                                         │  ISOMETRIC          ||
|                                                       │  FACTORY            ||
|  From reinforcement learning...                       │  ILLUSTRATION        ||
|  partner with over 80%...                             │  (conveyor + cubes)   ||
|                                                       │                      ||
|  [Take a tour]  [Start for free]                      └─────────────────────┘|
|  (filled btn)   (ghost btn)                                                  |
|                                                                                |
|  padding-top: ~86px ({spacing.section})                                       |
|  padding-bottom: ~86px                                                        |
|  background: {colors.canvas} (#e5e5e5)                                        |
|--------------------------------------------------------------------------------|

Headline uses {typography.display-lg}, subhead uses {typography.body-lg}, CTA pair uses {component.hero-cta-primary} and {component.hero-cta-secondary}.

Logo Ticker Band

|--------------------------------------------------------------------------------|
|         TRUSTED BY COMPANIES OF ALL SIZES — FROM STARTUPS TO FORTUNE 500s     |
|                                                                                |
|  [Stryker] [Intuitive] [WB] [Peloton] [Dialpad] [Pinterest] [Ancestry] ...    |
|                                                                                |
|  background: {colors.surface-soft} (#d4d4d4)                                  |
|  padding-y: {spacing['5xl']} (48px)                                           |
|  label: {typography.caption} uppercase, centered                              |
|  logos: grayscale/monochrome at {colors.dark-text} (#404040)                  |
|--------------------------------------------------------------------------------|

This band sits immediately below the hero, providing social proof before scroll-driven content begins.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} or {colors.surface-light} background | Page base, header bar, flat sections | | 1 (Neumorphic Lift) | {shadows.neumorphic} — white highlight (-5px -5px) + gray shadow (7.5px 7.5px) | Elevated cards, floating panels, interactive surfaces | | 2 (Pressed Inset) | Inverted neumorphic (shadow inside, highlight outside) | Active button states, depressed inputs | | 3 (Modal/Dropdown) | Stronger neumorphic values or overlay backdrop | Dropdown menus, modals (not visible in screenshot) |

Philosophy: Labelbox employs neumorphism (soft UI) as its elevation language rather than Material Design-style directional shadows or flat layering. Surfaces appear to extrude from or press into the material plane. The shadow construction uses four layered box-shadows: two null shadows (for property slot reservation), one white highlight offset northwest, and one translucent cool-gray shadow offset southeast. This creates a "lit from top-left" consistency across all elevated elements. The effect is subtle — not the garish neumorphism of 2020 trends — but present enough to give UI elements tactile presence on the warm gray canvas.

If decorative depth exists in the isometric illustration (conveyor belts receding into perspective, overlapping cubes), that's handled as illustration-layer depth, not CSS elevation — the SVG/asset itself carries the perspective.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 2px | Minimal rounding — tags, badges, tiny inputs | | {rounded.DEFAULT} | 6px | Default fallback — small cards, secondary buttons | | {rounded.md} | 8px | Standard — primary buttons, navigation items, inputs, most cards | | {rounded.lg} | 12px | Large cards, panel containers | | {rounded.xl} | 16px | Feature cards, image containers | | {rounded['2xl']} | 24px | Maximum — hero cards, pill-adjacent shapes (not true pills) |

No {rounded.pill} or {rounded.full} (9999px) tokens exist in this system. Even the roundest elements cap at 24px — maintaining the "engineered" aesthetic and avoiding the startup-pill-button cliché.

Photography Geometry

No photographic imagery detected in the hero fold. All visual interest comes from vector isometric illustration — the factory/conveyor belt scene with colored cubes. Illustration characteristics:

• Isometric projection (30° angles)
• Line-art style with black strokes on {colors.canvas}
• Filled cubes in {colors.primary} (blue), {colors.accent-yellow} (yellow), {colors.accent-orange} (orange)
• Full-bleed right-column placement in hero
• Likely SVG or high-resolution PNG with transparent background

Logo assets in the ticker band are grayscale lockups (Stryker, Intuitive, Warner Bros., Peloton, etc.) rendered at uniform height with {colors.dark-text} fill.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.hero-cta-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.top-nav} — The fixed/sticky navigation bar spanning full viewport width. Background {colors.surface-light} (#f5f5f5), height ~64px, containing logo left, navigation center-left, actions right. Uses {typography.nav-link} for all text children. No visible border or shadow; separation from content comes from background-color difference alone.

{component.nav-logo} — The "Labelbox" wordmark with hexagon icon at far left of nav. Transparent background, {colors.ink} text, links to homepage.

{component.nav-link} — Standard navigation menu item ("Why Labelbox", "Pricing"). Transparent background, {colors.ink} text at {typography.nav-link}, padding {spacing.md} {spacing.lg} (8px 16px). Some items have dropdown carets (▸) indicated by "▾" in screenshot — these would be {component.nav-link-dropdown} variants.

{component.nav-login} — Ghost button for "Log in". Transparent background, {colors.ink} text, {typography.button}, {rounded.md} (8px), padding 8px 0px (no horizontal padding — text-width only). Sits in the right-side action cluster.

{component.nav-contact-us} — Filled button for "Contact us" in the nav bar. Background {colors.surface-dark} (#262626), text {colors.on-dark} (#fafafa), {typography.button}, {rounded.md} (8px), padding 8px 12px. Compact size distinguishes it from hero CTAs while maintaining visual weight.

{component.hero-cta-primary} — Primary call-to-action ("Take a tour") in the hero section. Background {colors.surface-dark} (#262626), text {colors.on-dark} (#fafafa), {typography.button-emphasis} (16px/500), {rounded.md} (8px), padding 12px 24px. This is the highest-conversion button on the page. Active state documented as {component.hero-cta-primary-active} with {colors.pure-black} background. Transition: likely {extensions.motion.duration-base} with {extensions.motion.ease-in-out} easing.

{component.hero-cta-primary-active} — Pressed/active state of the primary hero CTA. Background deepens to {colors.pure-black} (#000000), all other properties identical to default. Implement as :active pseudo-class.

{component.hero-cta-secondary} — Secondary/ghost CTA ("Start for free") sitting next to the primary. Background transparent, text {colors.ink}, {typography.button-emphasis} (16px/500), {rounded.md} (8px), padding 12px 24px. May gain {colors.overlay} background on hover (documented in {component.hero-cta-secondary-active}). The equal padding to the primary button creates visual parity despite the transparency difference.

{component.hero-cta-secondary-active} — Active/hover state for the secondary CTA. Gains {colors.overlay} (rgba(0,0,0,0.1)) background to provide interaction feedback without committing to a solid fill.

Cards & Containers

{component.hero-band} — The hero section container itself. Background {colors.canvas} (#e5e5e5), vertical padding {spacing.section} (86px). Contains the two-column headline+illustration layout. No visible border or radius — this is a flat band.

{component.logo-ticker-band} — Social proof band below hero. Background {colors.surface-soft} (#d4d4d4), text {colors.muted}, {typography.caption} for the label, padding {spacing['5xl']} (48px) vertical. Contains centered uppercase label followed by row of grayscale logos.

{component.card-default} — Standard content card (inferred from CSS patterns, may appear below fold). Background {colors.surface-light} (#f5f5f5), text {colors.ink}, {typography.body-sm}, {rounded.lg} (12px), padding {spacing['3xl']} (24px). Would carry {shadows.neumorphic} if elevated.

{component.card-elevated} — Variant of card with neumorphic shadow treatment. Same properties as {component.card-default} but with {shadows.neumorphic} applied, causing it to lift from the canvas. Use for feature highlight cards, pricing tiers, or interactive panels.

{component.section-container} — Inner wrapper constraining content to 1440px width. Transparent background, centers content within each section band.

Illustration Elements

{component.illustration-cube-blue} — Data cube in isometric factory illustration. Background {colors.primary} (#93c5fd). Part of the conveyor belt visualization; represents one category of data unit.

{component.illustration-cube-yellow} — Data cube variant. Background {colors.accent-yellow} (#fbbf24). Different data category or processing stage.

{component.illustration-cube-orange} — Data cube variant. Background {colors.accent-orange} (#fb923c). Third data category in the pipeline metaphor.

These illustration tokens document the color palette of the signature visual asset so that new illustrations can maintain brand consistency.

Do's and Don'ts

Do

• Do use {colors.canvas} (#e5e5e5) as the primary page background — never pure white #ffffff. The warm gray is foundational to the brand atmosphere.
• Do reserve "The Future" typeface for {typography.display-lg} and larger headlines only; never use it for body copy, labels, or UI text.
• Do maintain the {rounded.md} (8px) radius as the default for all buttons and interactive elements; deviate only to {rounded.lg} (12px) for significant containers.
• Do apply {shadows.neumorphic} to elevated cards and panels rather than standard drop shadows; this is the signature depth treatment.
• Do keep body text at weight 300 (light) when using IBM Plex Sans at sizes 18px+ — the system intentionally avoids bold body copy.
• Do use negative letter-spacing (-1.2px to -1.8px) on all "The Future" headlines above 36px; this is what makes them feel "designed" rather than "default."
• Do constrain page content to 1440px max-width via {component.section-container}; wider layouts break the intended dashboard-tool density.
• Do place the logo-ticker band ({component.logo-ticker-band}) immediately below the hero on landing pages — social proof placement is canonical.
• Do use {colors.surface-dark} (#262626) for primary CTA backgrounds with {colors.on-dark} (#fafafa) text — avoid coloring buttons with {colors.primary}.
• Do maintain {spacing.section} (86px) vertical rhythm between major sections; this breathing room is essential to the spacious-blueprint aesthetic.

Don't

• Don't substitute {colors.primary} (#93c5fd) into UI chrome — it's an illustration-only accent. Buttons, links, and borders stay grayscale.
• Don't increase headline font-weight above 400 for "The Future" text. If you need emphasis, increase size or tighten letter-spacing further; the face has no bold cut in the loaded weights (100–300).
• Don't add gradient backdrops or colored washes to the hero section — the {colors.canvas} background is flat and intentional.
• Don't use border-radius values beyond 24px ({rounded['2xl']}). There are no pill-shaped buttons or fully-rounded avatars in this system.
• Don't apply standard box-shadow: 0 4px 12px rgba(...) to cards — always use the four-layer {shadows.neumorphic} construct or no shadow at all.
• Don't mix font families beyond the three defined: "The Future" for display, IBM Plex Sans for UI/body, IBM Plex Mono for code. No Aktiv Grotesk in marketing surfaces (it's app-only).
• Don't reduce vertical section spacing below {spacing.section} (86px) except on mobile breakpoints; the generous rhythm is a key differentiator from dense competitor pages.
• Don't render logo-ticker logos in color — they must be grayscale/monochrome at {colors.dark-text} (#404040) or {colors.muted} (#737373) to avoid visual competition with the brand.
• Don't use italic style for "The Future" headlines unless implementing a specific editorial pull-quote pattern; the main headline hierarchy is upright only.
• Don't hard-code any spacing value that has a corresponding {spacing.x} token — the 8px grid is non-negotiable for implementation consistency.

Motion & Animation

Transition Tokens

Extracted CSS transitions (8 distinct patterns):

/* Base transition — used for general property changes */
--transition-all: all 0.3s cubic-bezier(0.4, 0, 1, 1);

/* Color transitions — background, border, text */
--transition-color: 0.3s cubic-bezier(0.4, 0, 1, 1);

/* Transform-only — translates, rotates, scales */
--transition-transform: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Fast interaction — hover lifts, focus rings */
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Slow reveal — dropdowns, accordions, modals */
--transition-slow: 0.5s cubic-bezier(0, 0, 0.2, 1);

/* Standard ease-in-out — default for most interactions */
--transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

Keyframe Animations

Three animations detected in CSS keyframe inventory:

• progress-bar-stripes — Linear striped animation for loading/progress indicators; stripes shift position continuously.
• marquee — Horizontal scrolling animation for the logo ticker band; moves logos leftward in infinite loop.
• marquee2 — Reverse or offset marquee variant; possibly for a second ticker row or reverse-scrolling element.
• react-loading-skeleton — Pulse/opacity animation for skeleton loading placeholders (from React Loading Skeleton library dependency).

Interaction Patterns

• Neumorphic button press: On :active, buttons transition from raised (highlight NW, shadow SE) to inset (shadow NW, highlight SE) over {extensions.motion.duration-fast} (150ms).
• Dropdown reveals: Navigation dropdowns animate with {extensions.motion.duration-base} (300ms) and {extensions.motion.ease-in-out} easing, likely opacity + translateY.
• Logo ticker scroll: Continuous marquee animation at constant velocity (CSS animation: marquee linear infinite). No pause-on-hover detected in static extraction but commonly implemented.
• Focus rings: Inputs and buttons gain outline or shadow change on :focus-within; duration matches {extensions.motion.duration-fast}.
• Skeleton loading: Content placeholders pulse with react-loading-skeleton keyframes during async data fetches.
• Scroll-triggered reveals: Sections below hero likely fade/slide in on intersection (not detectable from single screenshot, but consistent with the transition inventory suggesting scroll-driven orchestration).

Imagery Style

• Illustration-dominant approach: The hero fold relies entirely on vector isometric illustration, not photography. This aligns with the "factory/blueprint" metaphor — illustrations can depict abstract processes (data pipelines) that cameras cannot.
• Isometric projection: All illustration uses 30° isometric angle with consistent line weight (appears 1.5–2px black strokes).
• Line-art + selective fill: Factory structure (conveyors, machinery housing) is black outlines on {colors.canvas}; only the "data products" (cubes) receive solid color fills in brand accent colors.
• Color-coded data units: Blue ({colors.primary}), yellow ({colors.accent-yellow}), and orange ({colors.accent-orange}) cubes likely represent different data types, processing stages, or customer segments — a visual encoding system.
• No gradients or shading on fills: Cube faces appear flat-colored, not gradient-meshed, maintaining the technical-diagram aesthetic.
• Full-bleed placement: Illustration extends to the right edge of the viewport (or container edge), creating asymmetry with the left-aligned text column.
• Logo treatment: Partner/customer logos rendered as grayscale vector lockups, uniformly sized, horizontally spaced with consistent gaps (estimated 32–48px).
• No photography detected: Absence of photos reinforces the abstract/engineering positioning — this is a tool for building AI systems, not a lifestyle product.
• Favicon: Black hexagonal mark on transparent/white (per meta: /static/images/favicon-v4-black.png) — geometric, minimalist.

Icon System

• Library: Custom SVG icons (no Lucide, Heroicons, or Material class names detected in CSS classes). The logo mark (hexagon) and UI icons are bespoke.
• Specific icons observed:
  • Hexagon logo mark (Labelbox brand icon)
  • Dropdown carets (▾) in navigation items ("Resources", "What we offer")
  • Possible chevron-right in "Take a tour" button (gap-[.5em] suggests icon+text spacing)
  • External link or arrow icons may appear below fold
• Treatment: Icons appear to use currentColor for stroke/fill, inheriting from parent text color. Size is not explicitly extracted but estimated at 16–20px based on [.5em] gap relative to 16px button text.
• Alignment: Inline-flex with text, vertically centered via items-center, horizontal gap of .5em (~8px at 16px font size).
• Stroke vs fill: Logo mark is filled; UI icons (carets) are likely stroke-based or simple filled paths. No outlined/hollow button icon style observed.

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Remix — Labelbox's architecture suggests a modern React-based 
                  SPA/SSG hybrid with heavy client interactivity (marquees, dropdowns, skeleton loaders)
- Styling:        Tailwind CSS v3+ (confirmed by Tailwind-likely flag, arbitrary value syntax like 
                  gap-[.5em], lb-button utility classes, and JIT-compliant token patterns)
- Fonts:          Self-hosted WOFF2 for "The Future" (/static/fonts/The-future/); 
                  Google Fonts CDN for IBM Plex Sans + IBM Plex Mono;
                  Adobe Fonts/Typekit for Aktiv Grotesk (app surfaces only)
- Animation:      Framer Motion (for scroll-triggered reveals) + vanilla CSS keyframes 
                  (for marquee, progress-bar-stripes already in stylesheet)
- Icons:          Custom SVG components (inline React components or SVG sprite)
- Component lib:  Custom component layer (lb-button, lb-card classes suggest proprietary 
                  abstraction, not shadcn/radix)
- State mgmt:     React Context or Zustand for nav dropdown, theme toggle state

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single column; nav collapses to hamburger; hero illustration stacks below text; logo ticker scrolls to single-row or hides; CTA buttons stack vertically | | Tablet | 640–1024px | Two-column hero maintains but with reduced type scale (display-lg → 48px); nav may show abbreviated menu; container padding reduces | | Desktop | 1025–1440px | Full layout as shown in screenshot; 1440px container active | | Wide | > 1440px | Container stops expanding; hero illustration may gain additional horizontal bleed; increased lateral margins |

Touch Targets

• {component.hero-cta-primary}: Padding 12px 24px + 16px font = approximately 48px height, satisfying WCAG AAA 44×44 minimum.
• {component.hero-cta-secondary}: Same dimensions as primary — 48px height, passes touch target guidelines.
• {component.nav-contact-us}: Padding 8px 12px + 16px font ≈ 36px height — may fall short of 44px on some devices; consider increasing to 10px–12px vertical padding for mobile.
• {component.nav-link}: Padding 8px 16px + 16px font ≈ 36px height — adequate for desktop mouse, marginal for fat-thumb mobile; expand to 44px in responsive breakpoint.
• Navigation items generally sit within the 64px nav bar height, which provides sufficient touch area when the entire bar height is tappable on mobile.

Collapsing Strategy

• Navigation: At mobile (< 768px), the horizontal nav links ("Why Labelbox", "Resources", etc.) collapse into a hamburger menu (implied by standard B2B SaaS patterns; no mobile screenshot available). The right-side action cluster (Login, Start for free, Contact us) may persist as simplified icons or move into the hamburger panel.
• Hero layout: At tablet/mobile, the asymmetric two-column layout stacks vertically — headline+CTAs occupy full width, illustration moves below (or becomes hidden/replaced with a simplified version). {typography.display-lg} (60px) likely downsteps to {typography.display-sm} (48px) or smaller.
• Logo ticker: At narrow viewports, the horizontal logo row either scrolls faster (more logos per view) or converts to a compact "Trusted by 100+ companies" text summary with a modal/grid expansion on tap.
• CTA pair: The side-by-side "Take a tour" + "Start for free" buttons stack vertically on mobile, with the primary button first.
• Typography scaling: Display type scales down via fluid typography or breakpoint-specific overrides; 60px → 40px (mobile), 24px body-lg → 18px (mobile).
• Container padding: Horizontal gutter compresses from ~24–32px to 16px on mobile to maximize content width.

Image Behavior

• Hero isometric illustration: On desktop, illustration occupies ~45% of hero width (right column). On tablet, may reduce to 35–40%. On mobile, likely hidden or replaced with a simplified static version to save bandwidth and vertical space — complex isometric scenes perform poorly at <400px widths.
• Logo assets: SVG format preferred (infinitely scalable). Raster fallback PNGs should serve 2x resolution versions for retina displays. Grayscale filter applies via CSS filter: grayscale(100%) rather than pre-baked grayscale files.
• Favicon: Remains 16×16 or 32×32 at all breakpoints; no responsive icon switching detected.

Iteration Guide

1. Build a landing page shell using Next.js (App Router) with Tailwind CSS v3+. Configure the Tailwind theme to consume every token from the YAML frontmatter via theme.extend.colors, theme.extend.fontSize, theme.extend.borderRadius, theme.extend.spacing, etc. Never hard-code a hex or pixel value that has a token path.

2. Set up font loading: self-host "The Future" WOFF2 files in /public/static/fonts/The-future/ with @font-face declarations in your global CSS; load IBM Plex Sans + IBM Plex Mono via Google Fonts <link> tag or next/font/google. Define CSS custom properties --font-display, --font-body, --font-mono.

3. Implement the header first: {component.top-nav} with {colors.surface-light} background, 64px height, 1440px max-width inner container. Build the logo, nav links with dropdown support (use Radix Popover or Headless UI for accessibility), and right-side action cluster. Test the {component.nav-contact-us} filled button styling.

4. Construct the hero section: {component.hero-band} with {colors.canvas} background, 86px vertical padding, two-column flex layout (text left ~55%, illustration right ~45%). Place the {typography.display-lg} headline with -1.5px letter-spacing, then {typography.body-lg} subhead at weight 300, then the CTA button pair ({component.hero-cta-primary} + {component.hero-cta-secondary}).

5. Add the logo-ticker band immediately after hero: {component.logo-ticker-band} with {colors.surface-soft} background, uppercase caption label, horizontal logo row. Implement the marquee keyframe animation for continuous scroll (CSS animation: marquee 30s linear infinite with duplicated content for seamless loop).

6. Build the neumorphic card component: {component.card-elevated} applying the four-layer {shadows.neumorphic} box-shadow. Use this for any content cards below the fold. Ensure the shadow values match exactly — this is the most distinctive visual treatment in the system.

7. Add state variants for every interactive component: button-primary gets -hover (slight darken or overlay), -active ({component.hero-cta-primary-active} with pure-black bg), -disabled (opacity 0.5, pointer-events-none). Follow the same pattern for text inputs, nav links, and cards.

8. Implement responsive breakpoints: At 768px, collapse nav to hamburger; stack hero columns; reduce display type to 48px; adjust container padding to 16px. At 1024px+, restore full desktop layout. Test touch targets meet 44×44 minimum on all interactive surfaces.

9. Run npx @google/design.md lint DESIGN.md after any frontmatter edits — watch for broken-ref (token referenced but undefined), contrast-ratio (color pairs failing WCAG AA), and orphaned-tokens (tokens defined but never used in body prose).

10. When adding new sections below the fold (features, pricing, testimonials), decide which sub-system they belong to: marketing-landing (hero, logos, CTAs), feature-showcase (cards with {shadows.neumorphic}), or conversion (pricing table, form). Each sub-system may introduce 2–3 new component tokens but must reuse existing color/typography/spacing tokens.

Font Setup

For development environments without access to Labelbox's self-hosted "The Future" font files, configure substitution in tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: ['"The Future"', '"Space Grotesk"', 'sans-serif'],
        body: ['"IBM Plex Sans"', '-apple-system', 'sans-serif'],
        mono: ['"IBM Plex Mono"', 'ui-monospace', 'monospace'],
      },
    },
  },
}

Add to globals.css or layout:

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500&family=IBM+Plex+Mono:wght@400&family=Space+Grotesk:wght@300;400&display=swap');

:root {
  --font-display: 'The Future', 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudoclass styles are absent from this specification. Implementation teams should derive hover states from active states (e.g., hover = 50% of the active transformation).
• Loading skeletons beyond detection: The react-loading-skeleton keyframe is confirmed, but exact skeleton component dimensions (border-radius, shimmer direction, base/ highlight colors) are inferred, not extracted from rendered output.
• Form validation states: No error, warning, or success input states were visible in the hero fold. Tokens {colors.error}, {colors.success} are provisioned from CSS color inventory but lack component implementations.
• Dropdown panel styling: Navigation dropdowns are implied by carets in nav items but their panel structure (background, shadow, border, item list) is not captured in the above-fold DOM.
• Authenticated/app surfaces: The entire design system is derived from the public marketing landing page. Dashboard surfaces, data labeling interfaces, and settings panels (which may use Aktiv Grotesk) are not represented here.
• Mobile navigation pattern: Whether the collapsed nav is a slide-over drawer, fullscreen overlay, or bottom sheet is unknown — implement per platform convention.
• Dark mode: The site operates in light mode ({extensions.mode}: "light"). No dark-mode token mappings (e.g., canvas→#171717, ink→#fafafa) have been extracted or defined.
• Pixel-exact illustration specs: The isometric factory illustration's precise dimensions, layer count, and animation behavior (if any) are not captured in CSS extraction — treat as a static asset with known color palette.
• Accessibility markup: ARIA roles, focus management order, skip-navigation links, and screen-reader-only text are not visible in CSS extraction but must be implemented for production compliance.