# Labstep Design System

> Scientific precision meets high-contrast clarity: Midnight blue anchors a clean, airy canvas punctuated by high-voltage yellow actions.

**Source:** https://labstep.com | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None

## TL;DR
Labstep utilizes a high-contrast "monochrome" foundation where Midnight Blue (`#002667`) serves as the primary structural color for text and navigation. The system breathes on a near-white Azure canvas (`#fafeff`), creating a clinical yet modern atmosphere. Brand energy is concentrated in functional accents: a bright Sky Blue (`#3898ec`) for secondary surfaces and a signature Yellow (`#fec61b`) reserved for high-priority Call to Action buttons. Typography is exclusively Poppins, using a range of weights from 300 for descriptive text to 500/700 for authoritative display headings.

## Signature DNA
1. **The Midnight Anchor** (Midnight Blue `#002667` is used for all primary text and navigation, providing a more sophisticated contrast than pure black against the `#fafeff` canvas.)
2. **Functional Yellow Pop** (The token `--yellow` (`#fec61b`) is used strictly for conversion-oriented buttons, creating a clear visual hierarchy for "Book a demo" or "Contact Support" actions.)
3. **Lightweight Poppins** (Body copy consistently uses Poppins at weight 300 with generous line heights (30px-35px), maintaining a scientific, readable pace.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--background-color` | `#fafeff` | Page background, primary surface | 10 | 1.0 | CSS Variable |
| `foundation-ink` | `#333333` | Secondary body text | 11 | 0.8 | Computed Style |
| `foundation-dark` | `#222222` | High-contrast text (Pricing) | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--midnight-blue` | `#002667` | Primary brand color, nav, headings | 122 | 1.0 | CSS Variable |
| `--yellow` | `#fec61b` | Primary CTA background | - | 1.0 | CSS Variable |
| `primary-sky` | `#3898ec` | Secondary buttons, card backgrounds | 8 | 0.6 | Computed Style |
| `link-blue` | `#0000ee` | Inline text links | 58 | 0.8 | Computed Style |
| `--azure` | `#e6f8ff` | Decorative section background | 1 | 1.0 | Decorative Only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Poppins | 300, 500, 600, 700 | Display, Heading, Body | Poppins (Google Fonts) | OFL |
| Arial | 400 | Navigation fallback, Small text | Arial (System) | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-mega` | 64px | 70px | normal | 500 | Homepage hero h1 | `h1.heading` |
| `display-xl` | 48px | 70px | normal | 500 | Section hero h1 | `h1.heading-two-left` |
| `display-lg` | 40px | 70px | normal | 500 | Sub-hero headings | `h1.heading-two._70` |
| `heading-sm` | 22px | 40px | normal | 300 | Section subheadings | `p.subheading-left` |
| `heading-caps` | 20px | 24px | normal | 500 | Uppercase labels | `h1.uppercase-heading` |
| `body-lg` | 18px | 20px | normal | 500 | Feature blocks | `div.text-block-5` |
| `body-md` | 16px | 35px | normal | 300 | Default paragraph | `p.paragraph-6` |
| `button-text` | 16px | 24px | normal | 600 | Yellow CTA text | `a.yellow-button.w-button` |
| `nav-link` | 14px | 20px | normal | 500 | Menu items | `div.menu-point` |

### Principles
1. **Generous Vertical Rhythm**: Paragraphs (`body-md`) use a 35px line height for 16px text, ensuring high legibility in technical contexts.
2. **Weight-Based Hierarchy**: Display titles use weight 500, while body copy drops to 300 to reduce visual density on long-form pages.
3. **Midnight for Authority**: All major headings and navigation elements use `#002667` instead of black to maintain brand cohesion.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `space-xs` | 10px | 57 |
| `space-sm` | 20px | 48 |
| `space-md` | 30px | 13 |
| `space-lg` | 70px | 5 |
| `space-xl` | 97px | 5 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-none` | 0px | Default containers, sections | 189 occurrences |
| `radius-sm` | 5px | Buttons, Pricing Cards, Inputs | `Rounded Button` component |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `flat` | none | Default state | Surface component |
| `elevated` | `rgba(5, 47, 114, 0.1) 0px 10px 10px 1px` | Pricing/Feature Cards | Card component |
| `subtle` | `rgba(0, 0, 0, 0.2) 0px 2px 5px 0px` | Hover/Small elements | Shadow evidence |

## Components

### Tier 1: Foundational

#### Primary CTA (Yellow)
**Role:** High-priority conversion actions (Book a demo, Contact Support)
**Pages observed:** https://labstep.com, https://labstep.com/pricing
**Spec:** Background: `#fec61b` / Text: `#002667` / Radius: `5px` / Padding: `12px 30px` / Typography: `Poppins 600 16px`
**States observed:** Default: Captured | Hover: Not captured

#### Secondary Button (Sky)
**Role:** Secondary actions and feature highlights
**Pages observed:** https://labstep.com, https://labstep.com/pricing
**Spec:** Background: `#3898ec` / Text: `#002667` / Radius: `5px` / Padding: `12px 30px` / Typography: `Poppins 600 16px`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Pricing tiers and testimonial blocks
**Pages observed:** https://labstep.com, https://labstep.com/pricing
**Spec:** Background: `#fafeff` / Text: `#333333` / Radius: `5px` / Shadow: `rgba(5, 47, 114, 0.1) 0px 10px 10px 1px`
**States observed:** Default: Captured

#### Navigation Bar
**Role:** Global site navigation
**Pages observed:** https://labstep.com, https://labstep.com/pricing
**Spec:** Background: `#fafeff` / Text: `#002667` / Height: `~80px` / Font: `Poppins 500 14px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Pricing Tab
**Role:** Toggle between monthly and annual billing
**Pages observed:** https://labstep.com/pricing
**Spec:** Background: `#3898ec` (Active) or `#fafeff` (Inactive) / Border: `1px solid #002667` / Radius: `1px`
**States observed:** Active: Captured | Inactive: Captured

#### Input Field
**Role:** Form data entry
**Pages observed:** https://labstep.com
**Spec:** Background: `#fafeff` / Border: `1px solid #002667` / Radius: `5px` / Padding: `10px`
**States observed:** Default: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px |
| Section Padding (Vertical) | 70px - 97px |
| Column Gap | 20px - 30px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; Padding reduces to 20px |
| Desktop | 1440px | Multi-column grids (3-up for features); Horizontal navigation |

## Do's
- Use `--midnight-blue` (`#002667`) for all primary headings to maintain brand authority.
- Reserve `--yellow` (`#fec61b`) exclusively for the "Book a demo" or primary conversion path.
- Maintain a minimum line-height of 30px for Poppins 300 body text.
- Apply a `5px` border radius to all interactive elements (buttons, inputs).
- Use the subtle blue shadow `rgba(5, 47, 114, 0.1)` for cards on the light canvas.

## Don'ts
- **Wrong:** Using pure black `#000000` for primary text. **Right:** Use `#002667`. **Reason:** Midnight blue is the core brand identifier.
- **Wrong:** Using `#3898ec` for primary conversion buttons. **Right:** Use `#fec61b`. **Reason:** Sky blue is a secondary accent; yellow is the primary CTA.
- **Wrong:** Applying sharp `0px` corners to buttons. **Right:** Use `5px`. **Reason:** Labstep's interactive language is softened.
- Do not use `#0000ee` for anything other than standard inline text links.
- Do not exceed weight 500 for body copy; keep the "light" scientific feel with weight 300.

## Similar brands
- Benchling
- TetraScience
- Dotmatics
- Starlims

## Quick start

```css
/* CSS Variables */
:root {
  --midnight-blue: #002667;
  --yellow: #fec61b;
  --sky-blue: #3898ec;
  --background-color: #fafeff;
  --font-main: 'Poppins', sans-serif;
  --radius-standard: 5px;
  --shadow-card: rgba(5, 47, 114, 0.1) 0px 10px 10px 1px;
}
```

## Agent prompt examples
- "Create a pricing card for Labstep using a `#fafeff` background, a `5px` border radius, and the `--midnight-blue` for the title. Include a primary CTA button in `#fec61b`."
- "Design a hero section with Poppins 500 text at 64px in `#002667` and a subheading in Poppins 300 at 22px with a 40px line height."
- "Generate a navigation bar with a `#fafeff` background and menu items using Poppins 500 at 14px in `#002667`."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the source CSS variables.
- The specific mobile breakpoint for the hamburger menu transition was inferred from the 390px viewport but not explicitly tokenized.
- Success and Error semantic colors were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Main Page | https://labstep.com | Desktop 1440 | 2026-06-06 |
| Pricing | https://labstep.com/pricing | Desktop 1440 | 2026-06-06 |
| Mobile Main | https://labstep.com | Mobile 390 | 2026-06-06 |