# Labkey Design System

> Clinical precision meets corporate stability through a palette of deep laboratory blues and high-contrast Roboto typography.

**Source:** [https://labkey.com](https://labkey.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Labkey utilizes a "monochrome-plus" system where a foundational achromatic scale (#ffffff, #f7f7f8, #212529) is punctuated by a specific corporate blue (#2d6592). The visual language is structured around high-density information grids and clinical white space, using Roboto as the sole typeface across all weights. Interactive elements are defined by generous 100px pill-shaped radii for primary CTAs and sharp 0px corners for structural surfaces. A secondary "growth green" (#76b600) is reserved strictly for conversion-critical actions like "Get a Demo" or "Submit," creating a clear functional hierarchy against the dominant blue brand color.

## Signature DNA
1. **The Clinical Pill** (100px rounded buttons used for primary navigation and hero actions across all pages to soften the dense, data-heavy layout).
2. **Corporate Blue Anchoring** (The use of #2d6592 for headings, primary text links, and iconography to establish scientific authority).
3. **Functional Green Signaling** (Strategic use of #76b600 for high-intent conversion points, distinct from the navigational blue).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary background, button text | 20 | 1.0 | `--bs-white` |
| `{color.off-white}` | `#f7f7f8` | Section backgrounds, secondary text | 18 | 1.0 | `--bs-light` |
| `{color.dark}` | `#212529` | Primary body text | 33 | 1.0 | `--bs-dark` |
| `{color.charcoal}` | `#393939` | Secondary body text, button text | 82 | 0.8 | Computed Style |
| `{color.border-light}` | `#ebebeb` | Card borders, dividers | 11 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#2d6592` | Headings, text links, brand accents | 87 | 0.8 | Computed Style |
| `{color.primary-light}` | `#62b0e0` | Decorative surfaces, borders | 40 | 0.8 | Computed Style |
| `{color.action-green}` | `#76b600` | Primary CTAs (Demo, Submit) | 13 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Roboto | 300, 400, 500, 700 | All (Display, Heading, Body) | Roboto (Google Fonts) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 42px | 50px | normal | 500 | Hero H1 | `h1.darkblue` |
| `{type.h2-light}` | 36px | 48px | normal | 300 | Section Headings | `h2.fw-light` |
| `{type.h2-bold}` | 36px | 48px | normal | 500 | Feature Headings | `h2` |
| `{type.price}` | 24px | 24px | normal | 500 | Pricing Figures | `p.lk-card-price` |
| `{type.h3}` | 20px | 48px | normal | 400 | Sub-headings | `h3` |
| `{type.body-lg}` | 18px | 31px | normal | 400 | Lead Paragraphs | `p` |
| `{type.button}` | 16px | 19px | normal | 500 | CTA Labels | `a.btn.btn-primary` |
| `{type.caption}` | 13px | 18.2px | normal | 400 | Card Tags | `p.lk-card-tag` |

### Principles
1. **Weight Contrast:** Headlines frequently pair a 300-weight (light) H2 with a 500-weight (medium) H1 to create hierarchy without changing font families.
2. **Blue for Emphasis:** All major headlines (`h1`, `h2`, `h3`) utilize the brand primary `#2d6592` rather than black.
3. **Generous Leading:** Body text maintains a 1.7x line-height (31px on 18px text) to ensure legibility in technical contexts.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 40 |
| `{space.sm}` | 16px | 43 |
| `{space.md}` | 24px | 15 |
| `{space.lg}` | 80px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Layout containers, footer | 197 occurrences |
| `{radius.sm}` | 4px | Form inputs, pricing cards | 11 occurrences |
| `{radius.pill}` | 100px | Primary/Secondary Buttons | 24 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button (Primary)
**Role:** Main call to action
**Pages observed:** All
**Spec:** Background: `#76b600` / Text: `#ffffff` / Radius: `100px` / Font: `Roboto 500`
**States observed:** Default | Hover: Not captured

#### Rounded Button (Secondary)
**Role:** Navigation and secondary actions
**Pages observed:** All
**Spec:** Background: `transparent` / Text: `#393939` / Border: `1px #2d6592` / Radius: `100px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Pricing Card
**Role:** Product tier display
**Pages observed:** `/pricing`
**Spec:** Background: `#ffffff` / Border: `1px #ebebeb` / Radius: `4px` / Padding: `12px 12px 80px`
**States observed:** Default

#### Feature Grid Item
**Role:** Product capability summary
**Pages observed:** Homepage
**Spec:** Background: `transparent` / Text: `#212529` / Icon Color: `#2d6592`
**States observed:** Default

### Tier 3: Surface-specific
#### Global Footer
**Role:** Site-wide navigation
**Pages observed:** All
**Spec:** Background: `#1a2b3b` (dark blue variant) / Text: `#ffffff` / Radius: `0px`
**States observed:** Default

#### Product Navigation Pill
**Role:** Sub-menu filtering
**Pages observed:** Homepage
**Spec:** Background: `#62b0e0` / Text: `#2d6592` / Radius: `50%` (Circular)
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Gap | 80px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 3-column grids stack to 1-column. |
| Desktop | 1440px | 12-column grid system; horizontal top-nav. |

## Do's
- Use `#2d6592` for all primary headings to maintain brand authority.
- Apply `100px` border-radius to all interactive buttons.
- Reserve `#76b600` exclusively for conversion-oriented actions.
- Maintain `31px` line-height for body text to ensure scientific readability.
- Use Roboto Light (300) for large-scale section headers to reduce visual weight.

## Don'ts
- **Wrong:** Using `#0d6efd` (standard Bootstrap blue) for links. **Right:** Use `{color.primary}` (#2d6592). **Reason:** Standard blue breaks the custom corporate palette.
- **Wrong:** Applying rounded corners to main content cards. **Right:** Use `{radius.none}` or `{radius.sm}`. **Reason:** The brand uses sharp geometry for structural containers.
- **Wrong:** Using black (#000000) for body text. **Right:** Use `{color.dark}` (#212529). **Reason:** Pure black creates excessive contrast on white backgrounds.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --lk-primary: #2d6592;
  --lk-accent-green: #76b600;
  --lk-text-main: #212529;
  --lk-bg-light: #f7f7f8;
  --lk-radius-pill: 100px;
  --lk-font-family: 'Roboto', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using Labkey's action green #76b600 and a 100px border radius."
- "Generate a section header using Roboto Light 300 at 36px in Labkey blue #2d6592."
- "Design a content card with a 1px #ebebeb border and 4px corner radius."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Specific shadow tokens were not detected; the system appears to rely on borders and flat color for depth.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | `https://labkey.com` | 1440px | 2026-06-06 |
| Pricing | `https://labkey.com/pricing` | 1440px | 2026-06-06 |
| Mobile Home | `https://labkey.com` | 390px | 2026-06-06 |