DESIGN.md · measured November 7, 2026

BioDigital design system

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.

#142034
#000000
#FFFFFF
#DE3838

Download DESIGN.md

From biodigital.com ↗ · 97 elements at 1440×900 and 390×844 Independent analysis, not affiliated with BioDigital

BioDigital color palette

8 colors with hex codes, grouped by where each one is used on the page.

Surfaces

Deep Blue#142034backgroundPage background · 2×

Near Black#000000surface-container-lowRaised areas one step from the page · 1×

Text

White#FFFFFFon-surface · --tw-ring-offset-colorPrimary text and headings · 10×

Cool Silver#BAC3CAon-surface-variantSecondary text · 2×

White#FFFFFFon-primaryText and icons on primary

Accents

Red#DE3838primaryPrimary buttons and calls to action · 6×

Dark Blue#0F4AB0secondaryAccent · 1×

Borders

Dark Blue#283853outlineBorders and dividers · 2×

BioDigital fonts and type scale

2 families.

AaRobotoWeights 500Roboto, Arial

AaLatoWeights 400, 500, 700Lato, Roboto, Arial

headline-displayPage title (h1)BioDigital48px · 500 · 1.17
mobile 36px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog36px · 700 · 1.11

headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog32px · 500 · 1.25 · 0.025em
mobile 24px

headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog24px · 400 · 1.5

body-mdBody textThe quick brown fox jumps over the lazy dog18px · 400 · 1.56

body-smSecondary and small textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog16px · 500 · 1.5

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog14px · 500 · 1.57

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog12px · 700 · 1 · 0.1em

Contrast

Text on #142034

AaAAA16.3:1

AaAAA9.1:1

Spacing

4px grid · 97% of values fit

xs4px

md12px

lg20px

xl40px

gutter32px

section80px

margin40px

container1280px

Breakpoints: 475px 640px 768px 1024px 1280px 1536px

Shapes

Corner radii, most used first.

md4px · 36×

Depth

Shadow

BioDigital UI components

Rebuilt from the measured CSS.

CONTACT

button-primaryFilled button · hover to see the measured hover state

button-secondaryFilled button · hover to see the measured hover state

button-outlineOutlined button

button-ghostText button

Inline link

linkInline link

Motion

Interface transitions

0.2s

ease

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

Use #142034 for the page and lift surfaces in small steps: #000000.
Keep text in 2 levels: #FFFFFF, #BAC3CA.
Reserve #DE3838 for primary actions and key highlights.
Keep spacing on the 4px grid.
Use 4px corners on most elements.
Introduce new font families beyond Roboto and Lato.
Use #DE3838 for large backgrounds or body text.
Make interface transitions slower than 0.2s.

BioDigital DESIGN.md212 lines

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

Fonts

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.

AaRoboto · 500
AaLato · 400, 500, 700

Find every font on biodigital.com with Font finder →

Colors

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

Get biodigital.com’s palette as CSS or Tailwind with Colors →

Tech stack

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

Check biodigital.com live with Tech stack →

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need a page behind a login?

The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.

See the Chrome extension

More designs

Brand examples →

CeylonNikah ceylonnikah.lk · Bricolage Grotesque

Sitepeel sitepeel.dev · Inter

Google google.com · Google Sans

DescriptBrand descript.com · brett

GitLabBrand gitlab.com · GitLab Sans

Darkroom EngineeringBrand darkroom.engineering · therma

Another site? Make a DESIGN.md from any link.

FAQ

BioDigital design system questions

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.