---
title: "Integrated Biosciences design system"
variant: extended
source: https://integratedbio.com/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/integratedbiosciences-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Integrated Biosciences · Design System

> Quiet scientific clarity with a vivid signal of discovery

**Theme:** light · **Industry:** health · **Source:** https://integratedbio.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A restrained biotechnology homepage pairs expansive editorial typography with an ivory canvas, deep green-black text, and a precise lime accent. Abstract, organic imagery gives the scientific story an atmospheric, future-facing frame.

## North star

Let spacious editorial typography and a disciplined warm-neutral palette lead, using lime only as a small signal of action or discovery.

## Overview

The visual system balances a warm off-white canvas (#f7f7f5) with deep green-black typography (#222f30), keeping the long-form scientific story calm and legible. A pale lime (#cef79e) appears sparingly as a discovery cue: a small arrow control, card surface, or tiny section marker, rather than a broad page wash. Oversized Aspekta headlines carry the editorial hierarchy, while Roboto Mono uppercase labels make navigation, badges, and metadata feel precise and technical. The layout uses a wide content frame and generous open intervals; two-column narrative sections alternate with a compact three-card platform row and a more structured newsroom band. The opening hero is full-bleed abstract imagery with rounded outer corners, white headline and supporting copy over the image, and a compact pill-shaped navigation panel. Most other sections remain flat and restrained, allowing the image-led hero and dark footer to punctuate the pale page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Ivory | `#f7f7f5` | `--color-warm-ivory` | brand | Primary page canvas and the continuous background for most editorial and company sections. |
| Deep Bio Ink | `#222f30` | `--color-deep-bio-ink` | brand | Primary text, navigation, dark platform card, and the background of the main CTA. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Hero-over-image text, pill navigation surface, and light badges. |
| Newsroom Mist | `#eeeeee` | `--color-newsroom-mist` | surface | Newsroom section band and subtle rules separating navigation or content surfaces. |
| Muted Slate | `#4d5757` | `--color-muted-slate` | semantic | Secondary and supporting copy where primary ink would feel too dominant. |
| Footer Black | `#000000` | `--color-footer-black` | surface | Full-bleed closing footer surface; not the main text colour across the page. |
| Rule Charcoal | `#333333` | `--color-rule-charcoal` | neutral | Subtle footer divider or hairline detail rather than a prominent page surface. |
| Discovery Lime | `#cef79e` | `--color-discovery-lime` | accent | Small CTA arrow surface, platform highlight card, and restrained section-marker accent. |
| Soft Mineral | `#e7e8e1` | `--color-soft-mineral` | neutral | Muted card or supporting surface; subordinate to the main canvas and core brand colours. |
| Deep Teal | `#445e5f` | `--color-deep-teal` | neutral | Minor supporting colour in measured details, not a defining page-wide brand surface. |

### Semantic aliases

`--color-canvas` → `#f7f7f5` (Warm Ivory) · `--color-surface` → `#000000` (Footer Black) · `--color-surface-2` → `#eeeeee` (Newsroom Mist) · `--color-surface-3` → `#ffffff` (Clean White) · `--color-surface-4` → `#222f30` (Deep Bio Ink) · `--color-text` → `#222f30` (Deep Bio Ink) · `--color-text-muted` → `#ffffff` (Clean White) · `--color-text-subtle` → `#4d5757` (Muted Slate) · `--color-border` → `#eeeeee` (Newsroom Mist) · `--color-accent` → `#cef79e` (Discovery Lime)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#222f30` | `#f7f7f5` | 12.9:1 | AAA |
| `#222f30` | `#000000` | 1.52:1 | fail |
| `#222f30` | `#eeeeee` | 11.93:1 | AAA |
| `#222f30` | `#ffffff` | 13.84:1 | AAA |
| `#ffffff` | `#f7f7f5` | 1.07:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#eeeeee` | 1.16:1 | fail |
| `#4d5757` | `#f7f7f5` | 6.95:1 | AA |
| `#4d5757` | `#000000` | 2.82:1 | fail |
| `#4d5757` | `#eeeeee` | 6.43:1 | AA |

### Gradients

- `linear-gradient(rgb(34, 47, 48), rgb(34, 47, 48))`
- `linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Aspekta | `--font-body` | webfont | 400 | Display and editorial sans-serif for headlines, body copy, and most page text. | Inter |
| Roboto Mono | `--font-mono` | webfont | 400 | Monospaced utility type for navigation, captions, badges, and uppercase labels. | IBM Plex Mono |

- **Aspekta:** Regular weight throughout; large headlines use tight negative tracking, while body copy remains compact and calm.
- **Roboto Mono:** Regular weight, uppercase, and neutral tracking; use for short functional labels rather than paragraphs.

### Type scale — Perfect Fifth (ratio ≈ 1.531, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 160px | 400 | 1 | -0.001em | — | Aspekta | Oversized moving or marquee-style brand statement across the page. |
| h1 | 112px | 400 | 1 | -0.03em | — | Aspekta | Hero headline introducing the future of aging medicine. |
| h2 | 76px | 400 | 1.1 | -0.02em | — | Aspekta | Major platform, newsroom, and editorial section headings. |
| h3 | 58px | 400 | 1.1 | -0.02em | — | Aspekta | Subsection headlines and prominent company statements. |
| h4 | 42px | 400 | 1.2 | -0.02em | — | Aspekta | Platform cards and smaller feature or newsroom titles. |
| body | 19px | 400 | 1.3 | -0.02em | — | Aspekta | Supporting descriptions, company narrative, and article summaries. |
| caption | 14px | 400 | 1 | 0 | uppercase | Roboto Mono | Uppercase section labels, publication metadata, and small annotations. |
| nav | 14px | 400 | 1 | 0 | uppercase | Roboto Mono | Compact uppercase navigation and utility actions. |
| code | 14px | 400 | 1 | 0 | uppercase | Roboto Mono | Technical-looking micro-labels and compact system metadata. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 17, 20, 24, 26, 32, 40, 44, 48, 60 px.
- Section rhythm 48px · element gap 20px · card padding 40px · max content width 1344px.

A wide, centered content frame supports a deliberately sparse editorial composition, with measured max width of 1344px. The opening is a full-bleed visual inset within rounded page edges; later content returns to the warm canvas. Narrative sections use two-column alignment, followed by a three-column platform card row. Long vertical pauses are part of the rhythm, not unused space. The newsroom shifts into a light gray band with a more compact multi-column feed, before a full-width dark footer closes the page.

## Shape & elevation

- Radius: button `8px` · badge `8px` · nav `8px` · xs `8px` · sm `12px` · md `16px` · lg `20px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.6s cubic-bezier(0.16, 1, 0.3, 1)` on interactive elements.

The page is mostly flat: sections rely on open canvas and tonal changes rather than shadows or layered cards. Borders are subtle hairlines, especially around the pill-like navigation surface and section boundaries. Use the measured 8px button and badge radius and 12px nav radius; the platform cards themselves are square-edged.

## Imagery

The hero uses full-bleed abstract imagery with fluid, organic forms and subdued green, cream, and near-black tones. Treat it as atmospheric background rather than literal scientific documentation, preserving strong contrast behind white headline text. Platform cards include restrained line-based scientific motifs, while the company area has a supporting image. The closing footer reprises dark abstract imagery and oversized white wordmark-like typography.

## Components

### Floating navigation

Compact light pill panel with company and newsroom links plus a deep-ink WORK WITH US action; use uppercase Roboto Mono for utility labels.

### Hero CTA

Deep-ink DISCOVER OUR COMPANY button with white monospaced uppercase text, paired with a separate lime arrow control.

### Section badge

Small uppercase Roboto Mono label on white or canvas, with a restrained lime marker and an 8px radius.

### Platform cards

Three square-edged cards for datasets, drug design, and AI; alternate lime, deep ink, and muted light surfaces with simple line motifs.

### Newsroom feed

Editorial articles arranged within a #eeeeee band, with publication labels, dates, titles, and image-led content.

### Closing footer

Full-bleed black section with abstract dark imagery and prominent white IntegratedBio wordmark treatment.

### Measured component styles

- **Primary button** (“WORK WITH US”): background #222f30 · text #ffffff · radius 8px · padding 8px 20px · 400 14px Roboto Mono · uppercase
- **Link** (“DISCOVER OUR COMPANY”): transparent background · text #222f30 · radius 0px · padding 0px · 400 0px Aspekta
- **Card** (“01. Aging datasets We generate different”): background #cef79e · text #222f30 · radius 0px · padding 40px · 400 0px Aspekta
- **Badge** (“THE INTEGRATED PLATFORM”): background #ffffff · text #222f30 · radius 8px · padding 8px 12px 8px 8px · 400 14px Roboto Mono · uppercase
- **Navigation item** (“COMPANY NEWSROOM WORK WITH US”): transparent background · text #222f30 · radius 0px · padding 0px · 400 16px Aspekta

## Do

- Use #f7f7f5 as the dominant page canvas.
- Set primary text and dark actions in #222f30.
- Reserve #cef79e for small, meaningful discovery cues.
- Use Aspekta for editorial text and Roboto Mono for utility labels.
- Give major sections generous breathing room.
- Keep platform cards square-edged and visually distinct by surface colour.

## Don't

- Do not spread the lime accent across large page areas.
- Do not add drop shadows to otherwise flat sections.
- Do not turn the page into a dense dashboard or conventional product grid.
- Do not use mono type for long descriptions.
- Do not compete with the hero image using extra decorative effects.
- Do not round the square platform cards.

## Agent prompt

Build a new biotechnology company page in this visual language. Use #f7f7f5 Warm Ivory as the main canvas and #222f30 Deep Bio Ink for text and dark controls. Keep #cef79e Discovery Lime rare: a small arrow, marker, or one highlighted card surface. Use large, regular-weight Aspekta-style sans-serif headlines with tight tracking, and Roboto Mono-style uppercase labels for navigation and metadata. Compose content as spacious two-column editorial sections, then use a concise three-card feature row and a light #eeeeee newsroom band. Frame the hero with abstract, organic imagery and readable white copy; finish with a dark full-bleed footer. Keep surfaces flat, borders quiet, spacing generous, and rounded corners limited to navigation, badges, and buttons.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Rounded full-bleed image area with floating top navigation and bottom-aligned supporting copy and CTA. | Primary company discovery link, Persistent-looking compact navigation | Oversized white headline, Abstract image background, Pill navigation, Lime arrow accent |
| 2 | feature-split | Two-column editorial introduction on the warm canvas, with generous vertical breathing room. | Company proposition at a glance, Scannable section label | Small uppercase label, Sparse two-column composition, Muted supporting text |
| 3 | feature-split | Section marker on the left and large heading, explanatory copy, and CTA aligned to the right. | Explain platform approach, Link to company discovery | White and canvas badges, Oversized dark heading, Lime CTA detail |
| 4 | feature-grid | Three equal-width cards in one row, each pairing a graphic motif with a title and short explanation. | Three-part process overview, Scannable numbered cards | Lime, deep ink, and pale card surfaces, Square corners, Minimal line illustrations |
| 5 | other | Wide, single-line oversized statement moving across the canvas. | Reinforces the core brand promise | Very large dark text, Open canvas, Horizontal marquee treatment |
| 6 | feature-split | Two-column company narrative with a section label, statement, image, and supporting link. | Company overview, Further discovery link | Editorial text-image pairing, Small label, Minimal image treatment |
| 7 | content-feed | Newsroom content on a #eeeeee band, arranged as a multi-column editorial feed. | View all articles, Publication and date metadata | Large section title, Article links, Image-led story cards, Subtle separators |
| 8 | footer | Full-bleed, single-column dark visual closing the page. | Strong brand sign-off | Black surface, Dark abstract imagery, Oversized white wordmark |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--color--sage-mist: #c9cbbe;
--wp--preset--color--fresh-lime: #a7e26e;
--wp--preset--color--soft-mint: #cef79e;
--wp--preset--color--light-gray: #eeeeee;
--wp--preset--color--medium-gray: #e4e3e3;
--wp--preset--color--off-white: #f7f7f5;
--wp--preset--color--dark-charcoal: #222f30;
--wp--preset--color--deep-sea-green: #445e5f;
--wp--preset--font-size--small: 0.875rem;
--wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.166), 1.125rem);
--wp--preset--font-size--large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.332), 1.375rem);
--wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.332), 2rem);
--wp--preset--font-size--xx-large: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.13), 3rem);
--wp--preset--font-family--aspekta: Aspekta;
--wp--preset--font-family--roboto-mono: Roboto Mono;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/integratedbiosciences-com