QBench – Cloud-based LIMS. Modern. Flexible. Easy-to-use.

Design Specification — QBench – Cloud-based LIMS. Modern. Flexible. Easy-to-use.

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#457DE5). All type is set in Icons Tech Ui Kit,sans-serif. Detected font weights: 400, 700. Detected style signatures: rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://cdn.prod.website-files.com/6376996f89260e285fdf008b/63c2cbfa8fc67558348bf1c9_qbench-logo.png · https://cdn.prod.website-files.com/6376996f89260e285fdf008b/639ba1a8725aeb3354c066a5_smithers-logo.webp

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Typography

Primary typeface: Icons Tech Ui Kit — stack: Icons Tech Ui Kit,sans-serif

Font stacks (most used first)

• Icons Tech Ui Kit,sans-serif
• Space Grotesk
• monospace
• webflow-icons
• webflow-icons!important
• Arial,sans-serif
• Icons Tech Ui Kit
• Filled Icons
• Line Square Icons
• Line Rounded Icons

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 1px 6px #0d0c5405,0 6px 22px #0d0c540a
• 0 1px 6px #03205405,0 6px 22px #0d0c540f
• 0 10px 20px #0000001a

Layout

Container max-width: 991px

Breakpoints

• 479px
• 767px
• 991px
• 1440px

Animation & Motion

Transitions

• color .35s border-color: .35s
• color .35s
• background-color .35s,transform .35s
• transform .35s,border-color .35s,color .35s,background-color .35s
• color .35s,border-color .35s
• background-color .35s,color .35s
• color .35s,border-color .35s,background-color .35s
• transform .35s,background-color .35s
• transform .35s
• border-color .35s,background-color .35s

Keyframes

@keyframes spin { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }

CTA labels found on page

• Get a Demo
• See Pricing
• Download PDF Now
• Streamline My Lab
• Learn More About LIMS Compliance

Source Design Tokens (CSS custom properties)

:root {
  --neutral-700: #30466e;
  --neutral-800: #032054;
  --primary-1-lighter: #457de5;
  --primary-1: #1a52ba;
  --neutral-100: white;
  --secondary-1: #f2f7ff;
  --secondary-2: #ebf2ff;
  --secondary-3: #3f5a8c;
  --secondary-4: #163163;
  --neutral-600: #566887;
  --neutral-500: #a5afc2;
  --neutral-400: #cfd6e3;
  --neutral-300: #e9edf5;
  --neutral-200: #f5f8fc;
  --secondary-5: #b5cfff;
  --primary-darker: #0c3a92;
  --illustrations--blue-1: #1647a1;
  --primary: #fff;
  --brand: #333;
}

Do's and Don'ts

Do

• Do reserve the accent #457DE5 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.

Design Tokens (copy-paste)

:root {
  --color-primary: #FFFFFF;
  --color-accent: #457DE5;
  --color-background: #FFFFFF;
  --color-surface: #EEEEEE;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #DDDDDD;
  --color-border: #333333;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #EEEEEE;
  --color-surface-container: #E2E2E2;
  --color-surface-container-high: #DDDDDD;
  --color-surface-container-highest: #CFD6E3;
  --font-sans: Icons Tech Ui Kit,sans-serif;
  --font-size-display: 56px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 22px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-md: 10px;
  --radius-lg: 30px;
  --radius-pill: 100%;
  --shadow-sm: 0 1px 6px #0d0c5405,0 6px 22px #0d0c540a;
  --shadow-md: 0 1px 6px #03205405,0 6px 22px #0d0c540f;
  --shadow-lg: 0 10px 20px #0000001a;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 40px;
  --space-xl: 60px;
  --tracking-display: -.03em;
  --tracking-label: .03em;
  --container-max: 991px;
}