# Labfellows Design System

> Professional laboratory operations interface defined by slate-blue typography, geometric Poppins headings, and high-contrast white surfaces.

**Source:** https://labfellows.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Labfellows utilizes a clean, enterprise-grade aesthetic that pairs a foundational white canvas (#ffffff) with a sophisticated slate-blue primary text color (#6a7c92). The typographic system is built on a hierarchy of Poppins for high-impact display moments and Roboto for functional body copy, often set against soft-blue backgrounds (#f3f5fd) to delineate sections. UI elements favor rounded geometry, ranging from 8px cards to 30px pill-style inputs, while depth is achieved through generous soft shadows (rgba(0, 0, 0, 0.11)) rather than heavy borders. The palette is strictly controlled, using deep navy (#060221) for emphasis and vibrant sky blues (#64a6f4) for interactive surfaces.

## Signature DNA
1. **The Slate-Blue Ink** (#6a7c92 used as the primary text and UI stroke color across all pages, replacing standard grays for a softer, more specialized laboratory feel).
2. **Geometric Display Pairing** (Poppins at weight 700 for massive 90px heroes, transitioning to Futura-PT for technical section headers to maintain a "scientific" precision).
3. **Soft-Depth Layering** (White cards using 8px radii and 20px blur shadows floating over #f3f5fd or #ffffff surfaces to create clear information architecture).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, primary card surface | 270 | 1.0 | Computed |
| `{color.surface.muted}` | `#f3f5fd` | Alternating section backgrounds, input fields | 36 | 0.8 | Computed |
| `{color.ink.primary}` | `#6a7c92` | Default body text, icons, secondary UI strokes | 365 | 0.8 | Computed |
| `{color.ink.deep}` | `#060221` | High-contrast headings, hero text | 170 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.blue}` | `#64a6f4` | Primary buttons, active state highlights | 12 | 0.8 | Computed |
| `{color.accent.link}` | `#337ab7` | Inline text links | 14 | 0.8 | Computed |
| `{color.surface.dark}` | `#404353` | Footer backgrounds, dark-mode section blocks | 13 | 0.8 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 500, 600, 700 | Display, Hero Headings | Poppins (Google) | OFL |
| futura-pt | 300, 500, 600, 700 | Section Headings, Subtitles | Jost | Adobe |
| Roboto | 400, 500, 600, 700 | Body, UI Labels, Buttons | Roboto (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 90px | 108px | normal | 700 | Homepage Hero | `h2.bdt-heading-tag` |
| `{type.display.lg}` | 54px | 40px | normal | 700 | Feature Titles | `h3.elementor-icon-box-title` |
| `{type.heading.md}` | 36px | 44px | normal | 700 | Section Headers | `h2.elementor-heading-title` |
| `{type.heading.sm}` | 25px | 40px | -0.3px | 600 | Card Titles | `h3.elementor-image-box-title` |
| `{type.subheading}` | 17px | 44px | normal | 500 | Section Labels | `h2.elementor-heading-title` |
| `{type.body.md}` | 16px | 28px | 0.7px | 500 | Form Submits | `input.wpcf7-submit` |
| `{type.body.sm}` | 15px | 28px | normal | 400 | Default Body | `p` |
| `{type.caption}` | 14px | 25.2px | normal | 400 | Icon Descriptions | `p.elementor-icon-box-description` |

## Spacing
**Base unit:** 5px (derived from common multiples 10, 15, 20, 25, 40, 50)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 10 |
| `{space.sm}` | 10px | 46 |
| `{space.md}` | 20px | 15 |
| `{space.lg}` | 40px | 10 |
| `{space.xl}` | 50px | 16 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers | 660 occurrences |
| `{radius.sm}` | 3px | Form inputs | `Text Input` component |
| `{radius.md}` | 8px | Feature cards | `Card` component |
| `{radius.lg}` | 30px | Pill buttons, search bars | `Text Input` (Pricing) |
| `{radius.pill}` | 999px | Secondary buttons | 8 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.soft}` | `rgba(0, 0, 0, 0.11) 0px 8px 20px 0px` | Feature cards | Card component (About) |
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.08) 0px 0px 20px 0px` | Pricing cards | Card component (Pricing) |
| `{shadow.nav}` | `rgba(0, 0, 0, 0.15) 0px 0px 10px 0px` | Sticky navigation | Navigation component |

## Components

### Tier 1: Foundational

#### Text Input
**Role:** Lead capture and search
**Pages observed:** Homepage, About, Pricing
**Spec:** Background `{color.surface.muted}` (#f3f5fd) | Text `{color.ink.primary}` (#6a7c92) | Radius 3px | Padding 0px 22px | Typography `{type.body.sm}`
**States observed:** Default | Hover: captured | Focus: captured

#### Navigation
**Role:** Global site header
**Pages observed:** Homepage, Pricing
**Spec:** Background transparent | Text `{color.ink.primary}` (#6a7c92) | Shadow `{shadow.nav}` | Font Size 15px
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Benefit and service highlights
**Pages observed:** Homepage, About
**Spec:** Background `{color.canvas}` (#ffffff) | Radius 8px | Padding 40px 25px | Shadow `{shadow.soft}`
**States observed:** Default | Hover: captured

#### Pricing Tier
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background `{color.canvas}` (#ffffff) | Radius 30px | Padding 0px 0px 0px 25px | Typography Poppins 700
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific

#### Testimonial Block
**Role:** Social proof
**Pages observed:** Homepage
**Spec:** Background `{color.canvas}` (#ffffff) | Text `{color.ink.primary}` (#6a7c92) | Font Roboto 400 22px (Header)
**States observed:** Default

#### Footer
**Role:** Global site map
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{color.surface.dark}` (#404353) | Text `{color.canvas}` (#ffffff) | Typography Roboto 14px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max-width | 1140px |
| Section Padding | 100px (Vertical) |
| Column Gap | 30px |

## Do's
- Use Poppins 700 for display headings over 36px to maintain brand authority.
- Apply `#f3f5fd` as a background color for sections containing form inputs.
- Use `#6a7c92` for all secondary text and icon strokes.
- Ensure cards have an 8px border radius and the `{shadow.soft}` elevation.
- Maintain a 100px vertical gap between major content sections.

## Don'ts
- Do not use pure black (#000000) for body text; use `#6a7c92` or `#0a0a0a`.
- Do not apply borders to cards; use shadows to define edges.
- Do not use sharp corners (0px) for interactive elements like buttons or inputs.
- **Wrong:** Using `#007aff` for primary buttons. **Right:** Use `#64a6f4`. **Reason:** Standard system blue breaks the custom slate-blue palette.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #6a7c92;
  --color-heading: #060221;
  --color-accent: #64a6f4;
  --color-bg-muted: #f3f5fd;
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --shadow-card: 0px 8px 20px 0px rgba(0, 0, 0, 0.11);
  --radius-card: 8px;
}
```

## Known gaps
- Hover states for the primary blue buttons were not explicitly captured in the token evidence.
- Mobile-specific typography scale for display sizes (90px) was not fully mapped.
- Success and Error semantic colors were not present in the analyzed page fragments.

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