Labexchange

Overview

Labexchange is a B2B e-commerce platform for certified used laboratory and analytical equipment, serving research institutions, hospitals, and industrial labs across Europe. The design aesthetic is "Technical Pragmatism"—a clean, confidence-driven interface that prioritizes clarity and trust over decorative flourish. The teal-and-orange color palette (#00998b primary, #f39600 secondary) signals both scientific precision and approachability; the interface feels institutional yet modern, never sterile. The brand voice is direct, knowledgeable, and reassuring: "Gebrauchte Laborgeräte geprüft und mit Garantie" (used lab equipment tested and guaranteed). Example sentence in brand voice: "Alle Geräte werden vor dem Versand vollständig überprüft – Sie erhalten nur Ausrüstung in technisch einwandfreiem Zustand."

Colors

The color system balances institutional trust with commercial energy. Primary (#00998b, a rich teal) anchors all interactive elements—buttons, links, focus states, and the brand identity—evoking laboratory precision and environmental responsibility (circular economy messaging). Secondary (#f39600, a warm orange) highlights promotional offers, badges, and accent elements, creating visual contrast and urgency without aggression. Tertiary (#1863dc, a professional blue) is reserved for informational badges and secondary CTAs. The surface stack is deliberately neutral: pure white (#ffffff) for main content, with grays (#eeeeee, #d1d1d1, #f4f4f4) for containers and dividers. On-surface text is dark gray (#333333) for body copy, with lighter gray (#7d7d7d) for secondary information. Error states

Typography

The type system uses Open Sans exclusively—a humanist sans-serif that balances technical credibility with accessibility. Display (60px, 700 weight) is reserved for hero headlines and major section breaks; Headline-lg (40px, 700) for page titles and product category headers; Headline-md (32px, 700) for subsection titles. Body-lg (18px, 400) is used for introductory paragraphs and feature descriptions; Body-md (16px, 400) for standard body copy and product descriptions. Label-md (14px, 600) is applied to button text, form labels, and navigation items; Label-sm (12px, 500) for badges, metadata, and helper text. All headlines use -0.02em to -0.04em letter-spacing to tighten the visual weight. Body copy uses 0em letter-spacing for legibility. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. The gutter between columns is 24px; section margins use the lg spacing token (40px) for vertical rhythm. The page follows a modular card-based structure: hero banner (full-width, 400–500px height), followed by 3–4 section blocks (each with 24px internal padding, 40px between sections). Container widths are fluid up to 1280px, then fixed. Hero sections use full-width background images with a semi-transparent overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility. Product grids use 3 columns on desktop (1024px+), 2 columns on tablet (768px–1023px), and 1 column on mobile (<768px). All cards maintain consistent 24px padding and 12px gap between grid items. Whitespace is generous: 40px minimum between major

Elevation & Depth

Depth is achieved through subtle shadows and layering, never through darkness. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), border: 1px solid #d1d1d1. Level 3 (Elevated/Modals): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), border: 1px solid #cccccc. Hover states on cards transition from Level 2 to Level 3 over 200ms. Buttons use no shadow by default; on hover, they shift to a darker background color (primary #00796b, secondary #d97e00) rather than adding shadow. Input fields use a 1px border (#d1d1d1) with no

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, reflecting both approachability and precision. Buttons use 1rem (16px) border-radius, creating a friendly but professional appearance. Cards and containers use 0.75rem (12px) for standard layouts, 1.5rem (24px) for elevated modals and hero sections. Input fields use 0.5rem (8px) to signal form-like utility. Badges and pills use 9999px (full) for maximum roundness, emphasizing their secondary, decorative role. The rationale: sharp corners (0px) would feel cold and institutional; excessive rounding (>2rem) would

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses #00998b background, white text, 48px height, 12px vertical / 24px horizontal padding, 1rem border-radius, and label-md typography (14px, 600 weight). On hover, the background shifts to #00796b (darkened by ~5% lightness) with a 200ms ease-in-out transition. Button-secondary uses #f39600 background with identical sizing and transitions to #d97e00 on hover. Button-ghost has a transparent background with a 2px solid #00998b border and teal text; on hover, it fills with #b3f0e8 (primary-container) and text becomes #003d37 (on-primary-container). All buttons disable at opacity: 0.5 with cursor: not-allowed.

Containers & Surfaces Cards are the primary container for product listings, testimonials, and featur

Do's and Don'ts

**Do**

• Do use the primary teal (#00998b) for all CTAs, focus states, and interactive elements—it signals trust and precision in a laboratory context.
• Do maintain 40px vertical spacing between major sections and 24px between subsections to create breathing room and guide the eye through content hierarchy.
• Do apply the 200ms ease-in-out transition to all hover and focus states (buttons, cards, inputs) to signal interactivity without feeling sluggish.
• Do use Open Sans exclusively for all typography—its humanist character balances technical credibility with accessibility for international audiences.
• Do layer shadows subtly (0 3px 8px for standard, 0 16px 40px for elevated) rather than relying on darkness or high contrast to convey depth.
• Do use the secondary orange (#f39600) sparingly—only for promotional badges, limited-time offers, and accent highlights to maintain visual hierarchy.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds—always use the on-* color tokens (e.g., on-primary, on-secondary) to ensure 4.5:1 contrast.
• Don't apply border-radius greater than 1.5rem on cards or modals—excessive rounding undermines the technical, institutional feel of the brand.
• Don't mix typefaces; Open Sans is the sole font family. Avoid system fonts, serif fonts, or decorative fonts that would dilute the professional aesthetic.
• Don't use shadows greater than 0 16px 40px rgba(0, 0, 0, 0.12)—deeper shadows create visual heaviness and contradict the clean, minimal design philosophy.
• Don't animate transitions faster than 150ms or slower than 300ms—the 200ms standard balances responsiveness with smoothness for a professional feel.
• Don't use the tertiary blue (#1863dc) or error red (#b3261e) for primary CTAs; reserve them for informational badges and destructive actions only.