---
version: alpha
name: BioDigital
description: "Dark interface measured from biodigital.com: Roboto type with Lato, red accents, tonal surfaces and 4px corners."
colors:
  background: "#142034"
  surface: "#142034"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  on-surface-variant: "#BAC3CA"
  surface-container-low: "#000000"
  outline: "#283853"
  primary: "#DE3838"
  on-primary: "#FFFFFF"
  secondary: "#0F4AB0"
typography:
  headline-display:
    fontFamily: Roboto
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.17
  headline-lg:
    fontFamily: Lato
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.11
  headline-md:
    fontFamily: Roboto
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.025em
  headline-sm:
    fontFamily: Lato
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: Lato
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
  body-sm:
    fontFamily: Lato
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-lg:
    fontFamily: Lato
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
  label-md:
    fontFamily: Lato
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.57
  label-sm:
    fontFamily: Lato
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.1em
  headline-display-mobile:
    fontFamily: Roboto
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.11
  headline-md-mobile:
    fontFamily: Roboto
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.025em
rounded:
  md: 4px
spacing:
  base: 4px
  xs: 4px
  md: 12px
  lg: 20px
  xl: 40px
  gutter: 32px
  section: 80px
  margin: 40px
  container: 1280px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 16px 20px
    height: 46px
  button-primary-hover:
    backgroundColor: "#BF1205"
  button-secondary:
    backgroundColor: "{colors.on-surface}"
    textColor: "#101823"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 20px 28px
    height: 56px
  button-secondary-hover:
    backgroundColor: "#F3F4F5"
    textColor: "{colors.surface-container-low}"
  button-outline:
    textColor: "#1C2A3F"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 16px 20px
    height: 46px
  button-ghost:
    textColor: "#1C2A3F"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 16px 20px
  link:
    textColor: "#1C2A3F"
---

# BioDigital Design System

## Overview

BioDigital describes itself as: “The BioDigital Human is the first cloud based virtual model of the human body - 3D human anatomy, disease and treatment, all in interactive 3D.” The interface is dark, built on **Deep Blue (#142034)** with **White (#FFFFFF)** text, and **Red (#DE3838)** as the main accent.

Type is set in **Roboto** and **Lato**. Headlines run large; body text is 18px. Depth comes from soft drop shadows. Corners are mostly 4px.

Measured from [biodigital.com](https://www.biodigital.com/) on November 7, 2026 at 1440×900 and 390×844 from 97 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 8 roles.

- **Deep Blue (#142034):** Page background, seen 2 times. Token `background`.
- **White (#FFFFFF):** Primary text and headings, seen 10 times. Token `on-surface`, CSS `--tw-ring-offset-color`.
- **Cool Silver (#BAC3CA):** Secondary text, seen 2 times. Token `on-surface-variant`.
- **Near Black (#000000):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Dark Blue (#283853):** Borders and dividers, seen 2 times. Token `outline`.
- **Red (#DE3838):** Primary buttons and calls to action, seen 6 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Dark Blue (#0F4AB0):** Accent, seen 1 time. Token `secondary`.

## Typography

**Roboto** and **Lato** share the interface. Fallback stack: `Roboto, Arial`. Other loaded fonts: Material Icons.

- **headline-display:** Roboto 48px at weight 500, line height 1.17 (36px on mobile). Page title (h1).
- **headline-lg:** Lato 36px at weight 700, line height 1.11. Section headings (h2).
- **headline-md:** Roboto 32px at weight 500, line height 1.25, tracking 0.025em (24px on mobile). Sub-section headings.
- **headline-sm:** Lato 24px at weight 400, line height 1.5. Card and feature titles.
- **body-md:** Lato 18px at weight 400, line height 1.56. Body text.
- **body-sm:** Lato 16px at weight 400, line height 1.5. Secondary and small text.
- **label-lg:** Lato 16px at weight 500, line height 1.5. Large buttons and tabs.
- **label-md:** Lato 14px at weight 500, line height 1.57. Buttons, navigation and labels.
- **label-sm:** Lato 12px at weight 700, line height 1, tracking 0.1em. Small labels and badges.

## Layout

Spacing follows a 4px grid: 97% of measured gaps and paddings are multiples of 4px.

- **Scale:** xs 4px, md 12px, lg 20px, xl 40px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 32px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1280px.
- **Page margin:** 40px on each side of full-width sections.
- **Breakpoints:** 475px, 640px, 768px, 1024px, 1280px, 1536px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px`

## Shapes

Most elements use 4px corners. Measured radii, most used first:

- **md (4px):** 36 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“CONTACT”):** #DE3838 fill, #FFFFFF text, 12px/700, 4px radius, padding 16px 20px, border 1px solid #DE3838.
- **button-primary-hover:** background #BF1205, text #FFFFFF on hover.
- **button-secondary (“CONTACT US”):** #FFFFFF fill, #101823 text, 14px/600, 4px radius, padding 20px 28px, border 1px solid #FFFFFF.
- **button-secondary-hover:** background #F3F4F5, text #000000 on hover.
- **button-outline (“LOGIN”):** transparent fill, #1C2A3F text, 12px/700, 4px radius, padding 16px 20px, border 1px solid #283853.
- **button-ghost (“LOGIN”):** transparent fill, #1C2A3F text, 12px/700, 4px radius, padding 16px 20px, border 1px solid #283853.
- **link:** transparent fill, #1C2A3F text, padding 0px.

## Do's and Don'ts

- Do use #142034 for the page and lift surfaces in small steps: #000000.
- Do keep text in 2 levels: #FFFFFF, #BAC3CA.
- Do reserve #DE3838 for primary actions and key highlights.
- Do keep spacing on the 4px grid.
- Do use 4px corners on most elements.
- Don't introduce new font families beyond Roboto and Lato.
- Don't use #DE3838 for large backgrounds or body text.
- Don't make interface transitions slower than 0.2s.

## Motion

Interface transitions are quick: 0.2s.

- **Easing:** `ease`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/biodigital.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).