Primary Blue 800
#0f2e4d for hero/header/footer and primary headings.
Prototype
Design system reference
Relaunch design baseline with reusable tokens, components, and interaction patterns used across pages. The iconography section below introduces a biomedical illustration language.
Typography
Headlines in DIN, body in Inter
H1 Display - The Technology Hub
H2 - Focused services for complex biologics
H3 - Custom Antibodies
Body copy uses Inter for high readability in dense scientific contexts and long-form method descriptions.
Color tokens
Brand palette
Accent Green 500
#8bc53e for CTA emphasis and active states.
Light surfaces
#ffffff and #f4f7fa for clean clinical page rhythm.
Contrast module
Occasional dark strips break the light flow
Quality baseline
Documented SOPs and controlled reporting outputs.
Single contact
One study director per program lifecycle.
Transparent reports
Decision-ready data packages and milestones.
Icon Modules
Spot illustrations in page contexts
Content-plan SVG icons are deployed across the site via four reusable CSS modules. Each module controls the presentation context — tile, split intro, figure break, or banner — while the icon itself carries the semantic meaning.
card__spot
56px tile inside cards. Blue tint default, green tint + scale on hover. Used on homepage capability cards, overview hubs, and company entity cards.
Homepage examplepage-intro--split
160px spot illustration beside the page-intro heading. Grid: text | spot. Collapses to stacked on mobile. Used on all 30+ content pages.
Live examplefigure-module
50/50 text + spot split for visual breaks in long-form content. Alternating standard and reverse variants.
Live examplespot-banner
Centered gradient-background illustration break between sections. Used on homepage modality section.
Homepage examplemega__col-icon
24px icon in mega-menu column headers. Present on all 5 columns.
Hover Science in navhero__ticker-icon
56px anchor icons in hero capability card. Desaturated by default, full color on hover.
Homepage hero Iconography
Iconography mapped to the Website Content Plan
The set below provides one icon tile for every major point in the content plan. Visual direction uses soft outlined biomedical shapes, restrained fills, and semantic color accents.
All icons are generated as standalone SVG assets under /assets/icons/content-plan/ for review and iteration.
mRNA Vaccines
M1 icon token for the modalities system.
Gene and Cell Therapies
M2 icon token for the modalities system.
Antibodies and ADCs
M3 icon token for the modalities system.
Hematology and Hemostasis
M4 icon token for the modalities system.
Preclinical Studies
S1 icon token for the services system.
Drug Discovery and Antibody Development
S2 icon token for the services system.
Bioanalytical Services
S3 icon token for the services system.
Gene Expression Studies
S4 icon token for the services system.
Analytical Support for mRNA Therapeutics
S5 icon token for the services system.
Protein Quantification
S6 icon token for the services system.
Cytokine Analysis
S7 icon token for the services system.
Vaccine Development Analytics
S8 icon token for the services system.
Luciferase-Based Methods
S9 icon token for the services system.
Digital Droplet PCR
T1 icon token for the technology system.
Nucleic Acid Isolation
T2 icon token for the technology system.
Flow Cytometry
T3 icon token for the technology system.
Cell Sorting
T4 icon token for the technology system.
ELISpot
T5 icon token for the technology system.
ELISA
T6 icon token for the technology system.
Jess Western Blotting
T7 icon token for the technology system.
ECLIA on the MSD platform
T8 icon token for the technology system.
Biolayer Interferometry
T9 icon token for the technology system.
Luminescence Imaging
T10 icon token for the technology system.
Fluorescence Imaging
T11 icon token for the technology system.
microCT Imaging
T12 icon token for the technology system.
Confocal Imaging
T13 icon token for the technology system.
Serum Products
P1 icon token for the products system.
Primary Cells
P2 icon token for the products system.
Tissue Lysates
P3 icon token for the products system.
Antisera
P4 icon token for the products system.
Antibodies
P5 icon token for the products system.
preclinics GmbH
C1 icon token for the company system.
preclinics Italia
C2 icon token for the company system.
BCE Eystrup
C3 icon token for the company system.
preclinics Nordic
C4 icon token for the company system.
Funding and Cooperation
C5 icon token for the company system.
Timeline and Milestones
C6 icon token for the company system.
Our Team
C7 icon token for the company system.
Core Identity
C8 icon token for the company system.
Mouse
A1 icon token for the animals system.
Rat
A2 icon token for the animals system.
Rabbit
A3 icon token for the animals system.
Horse
A4 icon token for the animals system.
Llama
A5 icon token for the animals system.
Alpaca
A6 icon token for the animals system.
Goat
A7 icon token for the animals system.
Bovine
A8 icon token for the animals system.
Minipig
A9 icon token for the animals system.
Controls
Buttons and form fields
Buttons
Fields
Focus behavior
Use :focus-visible and green focus ring for keyboard clarity.
Interactive
Open Technology Hub example Technology Hub pattern
Accessible node-based selector with keyboard support, active state clarity, and mobile stacking.
Layout Variants
Content-driven page layouts
Different content types use different layout patterns. The variants below show which layout to choose based on the content structure.
1. Page-Intro + Feature List
Used for: Short modality pages with bullet-point content.
page-intro → section--soft → feature-list (ul)2. Page-Intro + Content Sections (long-form)
Used for: Content-heavy pages with multiple structured sections.
page-intro → content-section × N (h2 + p + feature-list + h3)3. Page-Intro + Card Grid
Used for: Service pages with discrete focus areas as cards.
page-intro → section → grid-3 → card × N4. Page-Intro + Tech Table + Key Features
Used for: All 13 technology detail pages.
page-intro → section--soft → tech-table + key-features5. Master-Detail (Hub Pattern)
Used for: Technology overview and Technology Hub (locations).
page-intro → section--soft → tech-hub (list + panel, keyboard nav)6. Page-Intro + Product Groups
Used for: Products page with categorized item grids.
page-intro → section--soft → product-group × N7. Page-Intro + Timeline
Used for: Company timeline with vertical milestone markers.
page-intro → section--soft → timeline (ul)8. Page-Intro + Figure Modules (split)
Used for: Company overview and text-heavy pages with alternating split.
page-intro → feature-row × N (text | media, alternating) Usage Rules
Best-practice application in UI/UX
Visual tone
Use light outlines and restrained fills for scientific neutrality. Reserve strong red hues for platelet/blood semantics only.
Layout
Use a 5-up grid on desktop and 2-up/1-up on smaller breakpoints. Keep icon area heights consistent for scanability.
Accessibility
Every illustration tile must include a text heading and a descriptive sentence so meaning never depends on visuals alone.