# Biosero Design System

> High-contrast laboratory automation interface anchored by deep violet accents and geometric precision on a sterile white canvas.

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

## TL;DR
Biosero utilizes a high-clarity "monochrome+" system where a stark white foundation (#ffffff) and near-black text (#070707) are punctuated by a vibrant primary purple (`--color-purple-600`: #9b10e3). The visual language is defined by geometric cards with generous 20px radii and pill-shaped interactive elements. Typography is split between the geometric **Poppins** for headings and the highly legible **Open Sans** for functional body copy. Atmospheric depth is achieved through soft purple and aqua gradients that serve as section backdrops, maintaining a clean, "biotech-modern" aesthetic.

## Signature DNA
1. **The Violet Pulse** (The consistent use of #9b10e3 for primary actions and key headings across all pages, often paired with a soft #efe6fc background tint).
2. **Geometric Softness** (The juxtaposition of sharp 0px layout containers with 20px rounded cards and 9999px pill buttons/badges).
3. **Atmospheric Gradients** (Soft, low-opacity radial blooms in purple and aqua that break the clinical white canvas without adding visual clutter).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-neutral-900` | `#070707` | Primary text, button labels | 189 | 1 | Computed Style |
| `--color-white` | `#ffffff` | Page canvas, card surfaces | 111 | 1 | Computed Style |
| `--color-neutral-200` | `#e4e4e4` | Subtle section backgrounds | 5 | 1 | Computed Style |
| `--color-neutral-800` | `#1b1b1b` | Secondary text emphasis | 1 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-purple-600` | `#9b10e3` | Primary brand color, headings | 30 | 1 | CSS Variable |
| `--color-purple-500` | `#b136f1` | Secondary brand color | 11 | 1 | CSS Variable |
| `--color-purple-75` | `#efe6fc` | Soft surface background | 9 | 1 | CSS Variable |
| `--color-aqua-800` | `#117985` | Secondary text / link color | 9 | 1 | CSS Variable |
| `--color-periwinkle-800` | `#122d74` | Dark surface background | 6 | 1 | CSS Variable |
| `--color-aqua-100` | `#e9fafc` | Light aqua surface background | 3 | 1 | CSS Variable |
| `--color-aqua-200` | `#b5eff5` | Decorative only | 2 | 1 | CSS Variable |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Poppins | 400, 500, 600 | Headings, UI, Display | Poppins (Google Fonts) | SIL Open Font |
| Open Sans | 400, 600 | Body, Lists, Captions | Open Sans (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display-lg}` | 68px | 68px | -1.7px | 600 | Hero Headlines | `p` (Hero) |
| `{type.display-md}` | 54px | 81px | normal | 400 | Section Headers | `div.font-poppins` |
| `{type.display-sm}` | 48px | 57.6px | -1.2px | 600 | Secondary Heroes | `h2.font-poppins` |
| `{type.heading-lg}` | 40px | 48px | -1px | 600 | Section Titles | `h3.font-poppins` |
| `{type.heading-md}` | 32px | 40px | normal | 600 | Card Titles | `div.font-poppins` |
| `{type.heading-sm}` | 24px | 28.8px | -0.6px | 600 | Sub-section Heads | `h3.font-poppins` |
| `{type.body-lg}` | 18px | 28px | normal | 400 | Intro Paragraphs | `p` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default Body | `p` |
| `{type.caption}` | 12px | 16px | 0.6px | 600 | Overlines / Badges | `div.inline-block` |

### Principles
1. **Heading Tightness:** Display sizes (40px+) utilize negative letter spacing (-1px to -1.7px) to maintain visual density.
2. **Functional Split:** Poppins is strictly for brand-heavy moments (headings, buttons); Open Sans handles all long-form reading.
3. **Semantic Weight:** Weight 600 is reserved for structural emphasis; Weight 400 is the standard for both Poppins and Open Sans in body contexts.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 27 |
| `{space.sm}` | 16px | 48 |
| `{space.md}` | 32px | 51 |
| `{space.lg}` | 40px | 18 |
| `{space.xl}` | 96px | 8 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Main layout containers | 267 occurrences |
| `{radius.sm}` | 6px | Standard cards | 15 occurrences |
| `{radius.lg}` | 20px | Feature cards | 10 occurrences |
| `{radius.pill}` | 9999px | Buttons, Badges, Tags | 25 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | none | Standard UI | Default state |
| Floating | `rgba(88, 92, 95, 0.16) 0px 16px 40px -8px` | Feature cards on white | 19 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#070707` | Border: `none` | Radius: `9999px` | Padding: `16px 28px` | Typography: `Poppins 600`
**States observed:** Default | Hover: captured (subtle shadow increase)

#### Pill Badge
**Role:** Category labeling
**Pages observed:** biosero.com, biosero.com/about
**Spec:** Background: `transparent` | Text: `#070707` | Border: `1px solid #070707` | Radius: `9999px` | Typography: `Poppins 600 16px`
**States observed:** Default

### Tier 2: Patterns

#### Feature Card (Purple)
**Role:** Highlighting software features
**Pages observed:** biosero.com, biosero.com/pricing
**Spec:** Background: `#efe6fc` | Text: `#9b10e3` | Radius: `20px` | Padding: `16px 32px`
**States observed:** Default

#### Content Card (White)
**Role:** General information blocks
**Pages observed:** biosero.com, biosero.com/about
**Spec:** Background: `#ffffff` | Text: `#070707` | Radius: `6px` | Shadow: `rgba(88, 92, 95, 0.16) 0px 16px 40px -8px` | Padding: `32px 40px`
**States observed:** Default

### Tier 3: Surface-specific

#### Navigation Bar
**Role:** Global site navigation
**Pages observed:** All
**Spec:** Background: `#ffffff` | Height: `80px` | Text: `#070707` | Typography: `Poppins 500 16px`
**States observed:** Default

#### Section Surface (Aqua)
**Role:** Alternating section background
**Pages observed:** biosero.com
**Spec:** Background: `#e9fafc` | Padding: `96px 0px`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1280px |
| Section Gutter | 96px |
| Column Gap | 32px |

## Do's
- Use `#9b10e3` for all primary interactive text and icons.
- Apply `{radius.pill}` to all standalone action buttons.
- Ensure all feature cards use the `{radius.lg}` (20px) for a distinct brand feel.
- Pair Poppins headings with negative letter spacing at sizes above 40px.
- Use `#efe6fc` as a background tint for purple-themed content blocks.

## Don'ts
- **Wrong:** Using a generic blue for primary CTAs. **Right:** Always use `#9b10e3`. **Reason:** Blue is not part of the Biosero primary palette.
- **Wrong:** Applying sharp corners to interactive buttons. **Right:** Use `{radius.pill}`. **Reason:** Sharp corners are reserved for layout containers only.
- **Wrong:** Mixing Poppins and Open Sans within the same text block. **Right:** Keep Poppins for headers and Open Sans for body.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #9b10e3;
  --color-primary-soft: #efe6fc;
  --color-text-main: #070707;
  --color-bg-canvas: #ffffff;
  --radius-card: 20px;
  --radius-pill: 9999px;
  --shadow-feature: 0px 16px 40px -8px rgba(88, 92, 95, 0.16);
}
```

## Known gaps
- Hover and Active states for secondary navigation items were not explicitly captured in the token evidence.
- Mobile-specific typography scaling for display sizes (68px) was not fully mapped in the provided evidence.
- Error and Success semantic colors were not present in the analyzed pages.