# alphafold.com Design System

> Scientific precision meets academic utility: a structured blue-and-white canvas defined by IBM Plex Sans and rigid geometric containers.

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

## TL;DR
AlphaFold's design system is a functional, information-dense framework built for scientific data dissemination. The palette is anchored by a primary "AlphaFold Blue" (#3b6fb6) and supported by a range of neutral grays (#d0d0ce, #54585a) that organize complex academic content. Typography relies heavily on **IBM Plex Sans**, utilizing its technical clarity for both massive 42px display headers and dense 14px legal footers. Layouts are characterized by sharp edges (0px radius), heavy borders (up to 8px on footers), and a distinctive "offset shadow" pattern (#193f90) that provides depth to primary action buttons without using traditional blurs.

## Signature DNA
1. **The Offset Block Shadow** (A hard-edged, non-blurred shadow in dark blue `#193f90` offset by 8px, used to elevate primary white buttons on the homepage and about sections.)
2. **Technical Typography** (The exclusive use of IBM Plex Sans across all weights 400-700, signaling a "lab-grade" or technical tool aesthetic rather than a consumer product.)
3. **Primary Blue Accents** (The consistent application of `#3b6fb6` for interactive elements, link text, and section headers to maintain brand continuity across long-form text pages.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--vf-ui-color--white` | `#ffffff` | Page background, primary button surface | 137 | 1 | Computed |
| `--vf-ui-color--black` | `#000000` | Primary body text, search input text | 27 | 1 | Computed |
| `foundation-ink` | `#0a0a0a` | High-contrast heading text | 162 | 0.8 | Computed |
| `--vf-color--neutral--300` | `#d0d0ce` | Borders, dividers, secondary text | 62 | 1 | Declared |
| `--vf-color--neutral--700` | `#54585a` | Navigation background, footer surface | 4 | 1 | Declared |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--vf-theme--primary` | `#3b6fb6` | Primary brand color, links, button borders | 95 | 1 | Declared |
| `--vf-color--blue--light` | `#8bb8e8` | Deemphasized text, secondary accents | 9 | 1 | Declared |
| `--vf-theme--primary--dark` | `#193f90` | Offset shadows, decorative backgrounds | 2 | 1 | Decorative only |
| `--vf-theme--secondary` | `#18974c` | Footer top border accent | 2 | 1 | Decorative only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| IBM Plex Sans | 400, 500, 600, 700 | Primary Display, Body, UI | N/A (Google Fonts) | OFL |
| DM Sans | 500 | Navigation links | N/A (Google Fonts) | OFL |
| monospace | 400 | Code snippets, technical IDs | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-lg` | 42px | 58.8px | normal | 700 | Main section headers | `h3` |
| `heading-md` | 30px | 39px | normal | 500 | Large intro text | `p.large-text` |
| `heading-sm` | 24px | 28px | normal | 500 | Navigation headings | `a.show-for-large` |
| `body-lg` | 21px | 32px | normal | 400 | Standard paragraph text | `p.normal-text` |
| `body-md` | 19px | 31px | normal | 400 | Search input, nav links | `input#searchitem` |
| `body-ui` | 18px | 18px | normal | 700 | Search button text | `button#searchButton` |
| `body-sm` | 16px | 24px | normal | 400 | Footer links, FAQ text | `header#masthead-black-bar` |
| `caption` | 14px | 21px | normal | 400 | Legal text, image captions | `span.vf-footer__legal-text` |

### Principles
1. **Bold Weight for Authority:** Display headers always use weight 700 to anchor long-form content.
2. **Generous Line Heights:** Body text (21px) uses a 32px line height (1.52x) to ensure legibility in scientific descriptions.
3. **Color-Coded Links:** Interactive text within paragraphs is strictly `#3b6fb6`.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `space-xs` | 8px | 22 |
| `space-sm` | 16px | 77 |
| `space-md` | 24px | 4 |
| `space-lg` | 60px | 26 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-sharp` | 0px | Buttons, inputs, footer, nav | 510 occurrences |
| `radius-sm` | 4px | Search input focus, specific cards | 10 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `flat` | none | Default state for all surfaces | 0px border-width |
| `offset-brand` | `rgb(25, 63, 144) 8px 8px 0px 0px` | Primary CTA elevation | Button component |
| `subtle-glow` | `rgb(128, 128, 128) 0px 0px 5px 0px` | Hovered cards | Card component |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Search", "About")
**Pages observed:** Homepage, About
**Spec:** Background `#ffffff` / Text `#3b6fb6` / Border `3px solid #3b6fb6` / Radius `0px` / Shadow `#193f90 8px 8px 0px 0px`
**States observed:** Default captured.

#### Search Input
**Role:** Protein database query
**Pages observed:** Homepage, About
**Spec:** Background `#ffffff` / Text `#000000` / Border `2px solid #707372` / Radius `0px` / Padding `8px 8px`
**States observed:** Default captured.

### Tier 2: Patterns

#### Navigation Bar
**Role:** Global site navigation
**Pages observed:** All
**Spec:** Background `#54585a` / Text `#ffffff` / Border `none` / Radius `0px` / Typography `16px IBM Plex Sans`
**States observed:** Default captured.

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** Homepage, About
**Spec:** Background `transparent` / Text `#0a0a0a` / Border `1px solid #d0d0ce` (bottom) / Radius `0px`
**States observed:** Default captured.

### Tier 3: Surface-specific

#### Footer
**Role:** Global site footer
**Pages observed:** All
**Spec:** Background `#54585a` / Text `#0a0a0a` / Border-top `8px solid #18974c` / Radius `0px` / Padding `24px 0px 60px`
**States observed:** Default captured.

#### Data Card
**Role:** Feature highlights
**Pages observed:** Homepage, About
**Spec:** Background `#3b6fb6` / Text `#d1e3f6` / Radius `4px` / Padding `0px 10px`
**States observed:** Default captured.

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px (approx) |
| Section Padding | 64px (vertical) |
| Grid Gutter | 16px |

## Do's
- Use **IBM Plex Sans** for all technical and body copy.
- Apply the **8px offset shadow** (`#193f90`) only to primary white buttons.
- Maintain **0px border radius** on all major UI containers (Nav, Footer, Inputs).
- Use `#3b6fb6` for all primary interactive text links.
- Ensure a minimum **line-height of 1.5** for body paragraphs.

## Don'ts
- **No Rounded Buttons:** Do not use pill-shaped or rounded corners on primary CTAs; keep them 0px.
- **No Blurred Shadows:** Avoid `box-shadow` with blur radii for elevation; use the hard-offset brand shadow.
- **Wrong:** Using `#18974c` (Green) for primary buttons. **Right:** Use `#3b6fb6`. **Reason:** Green is reserved for the footer accent border and decorative signals.
- **No Centered Body Text:** Keep scientific descriptions left-aligned for readability.

## Quick start

```css
/* CSS Variables */
:root {
  --vf-theme--primary: #3b6fb6;
  --vf-theme--primary--dark: #193f90;
  --vf-color--neutral--700: #54585a;
  --vf-color--neutral--300: #d0d0ce;
  --font-main: 'IBM Plex Sans', sans-serif;
  --shadow-offset: 8px 8px 0px 0px #193f90;
}
```

## Agent prompt examples
- "Create a primary button using AlphaFold Blue `#3b6fb6` as a 3px border, white background, and a hard 8px offset shadow in `#193f90`."
- "Design a section header using IBM Plex Sans Bold (700) at 42px with a line height of 58.8px."
- "Build a search input field with a 2px border in `#707372` and a 0px border radius."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the token evidence.
- Mobile-specific spacing tokens (e.g., reduced margins) were not fully isolated from desktop values.
- Specific "Success" or "Error" semantic colors were not present in the analyzed pages.