# BioDigital design system

> BioDigital design system measured from biodigital.com: Roboto font, #DE3838 primary on #142034, 8 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/biodigital.com/

BioDigital’s website (biodigital.com) uses the Roboto font and #DE3838 as its main color on a #142034 background. Measured by Sitepeel on November 7, 2026.

## What font does BioDigital use?

BioDigital uses Roboto (weight 500) and Lato (weights 400, 500 and 700) on biodigital.com. Page titles are 48px at weight 500 (36px on phones) and body text is 18px. Measured on November 7, 2026.

- Roboto (weights 500)
- Lato (weights 400, 500, 700)

## BioDigital colors: palette and hex codes

BioDigital’s main colors are #142034 (deep blue) for the background, #FFFFFF (white) for text and #DE3838 (red) as the main accent, with #0F4AB0 (dark blue) as another accent. Measured on November 7, 2026.

- #142034: deep blue
- #FFFFFF: white
- #BAC3CA: cool silver
- #000000: near black
- #283853: dark blue
- #DE3838: red
- #0F4AB0: dark blue

## What is BioDigital built with?

BioDigital’s website (biodigital.com) is built with Craft CMS, jQuery, Swiper, Tailwind CSS and Nginx. Measured on November 7, 2026.

- JavaScript framework: jQuery 3.6.0
- UI & CSS: Swiper, Tailwind CSS 3.x
- Site builder & CMS: Craft CMS
- Server: Nginx
- Fonts & icons: Material Symbols, Google Fonts
- Analytics: Plausible, Google Analytics, Google Tag Manager, LinkedIn Insight Tag

## Questions and answers

### What font does BioDigital use?

BioDigital’s website uses Roboto (weight 500) and Lato (weights 400, 500 and 700). Page titles are 48px at weight 500 (36px on phones) and body text is 18px. Measured on November 7, 2026.

### What are the BioDigital colors and hex codes?

On biodigital.com: #142034 (deep blue) for the background, #FFFFFF (white) for text and #DE3838 (red) as the main accent, with #0F4AB0 (dark blue) as another accent. The color palette above lists all 8 colors with their hex codes and where each one is used.

### What is the BioDigital design system?

The design system on this page is biodigital.com’s, as measured on November 7, 2026: Roboto type, #DE3838 as the main color, 4px corners and a 4px spacing grid, written down as a DESIGN.md. It is not BioDigital’s own documentation.

### What is BioDigital built with?

BioDigital’s website (biodigital.com) is built with Craft CMS, jQuery, Swiper, Tailwind CSS and Nginx. The full tech stack Sitepeel found: jQuery, Swiper, Craft CMS, Nginx, Material Symbols, Plausible, Cookiebot, HubSpot, Tailwind CSS and Google Fonts. Measured on November 7, 2026.

### What is the BioDigital DESIGN.md?

A plain-text file with BioDigital’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this BioDigital’s official design system?

No. Sitepeel measured it from biodigital.com’s public page on November 7, 2026. It is an independent analysis, not made or approved by BioDigital.

### Can I use BioDigital’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy BioDigital’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/biodigital.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with BioDigital.

## The DESIGN.md file

```markdown
---
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).

```