# Biotic — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://biotic.org/
Captured: 2026-10-08
CSS measured: 2026-10-08T03:41:09.736Z at 1440×1000 — https://biotic.org/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

The website presents a striking, modern design combining elements of editorial and geometric styles, strongly characterized by dynamic, generative visual patterns. The layout relies on stark contrast between solid white (color-3) and black (color-1) sections, punctuated by vibrant lime green accents (color-4). Typography is consistently set in 'Roobert Medium' across all scales, delivering a clean, corporate yet futuristic feel. Key components include large typographic headings interwoven with biological-themed animations, a distinctive countdown timer, tabular feature layouts, and minimalist form fields in the footer. The overall aesthetic is sophisticated, leveraging ample whitespace and s

## Classification

- Industry: technology
- Site type: Blog
- Business model: Software
- Styles: minimal, typographic, corporate, generative, high-contrast
- Platform: WordPress
- Technology: Not identified

## Typography

- Display: Roobert Medium — weight 500; size 156.4px; line-height 156.4px; tracking -6.3px; Regular (95% role confidence, computed values)
- Heading: Roobert Medium — weight 500; size 51.2px; line-height 56.3px; tracking -2px; Regular (90% role confidence, computed values)
- Body: Roobert Medium — weight 500; size 14px; line-height normal; tracking -0.1px; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFFFFF: color-3: computed rgb(255, 255, 255); AI role: White background used extensively in the upper and middle sections of the page. (95% role confidence, computed values)
- Text — text #000000: color-1: computed rgb(0, 0, 0); AI role: Black text used for primary content on white canvas backgrounds. (95% role confidence, computed values)
- Accent — accent #B6E400: color-4: computed rgb(182, 228, 0); AI role: Lime green (#B6E400) used for icons, graphic circles, and primary buttons. (90% role confidence, computed values)
- Muted Text — muted text #808080: color-6: computed rgb(128, 128, 128); AI role: Grey text (#808080) used for secondary information like dates and specific descriptions. (85% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "51.2px",
    "lineHeight": "56.3px",
    "letterSpacing": "-2px",
    "traits": "Regular",
    "count": 82,
    "contexts": [
      {
        "tag": "span",
        "text": "We",
        "top": 1027,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "have",
        "top": 1027,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "limited",
        "top": 1027,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "17px",
    "lineHeight": "normal",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 27,
    "contexts": [
      {
        "tag": "span",
        "text": "Read mission statement",
        "top": 2510,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Read mission statement",
        "top": 2530,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Learn about SpudCell",
        "top": 4388,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "normal",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 27,
    "contexts": [
      {
        "tag": "a",
        "text": "About",
        "top": 5,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Research",
        "top": 5,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Community",
        "top": 5,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "23.4px",
    "lineHeight": "25.7px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 18,
    "contexts": [
      {
        "tag": "span",
        "text": "(Ex uno plures)",
        "top": 944,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Days left to 2050",
        "top": 1543,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Unlocking transformative possibilities through foundational scientific discovery.",
        "top": 2710,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "39.2px",
    "lineHeight": "normal",
    "letterSpacing": "-1.6px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h2",
        "text": "About us",
        "top": 2182,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Biotic is a nonprofit research organization dedicated to the safe, responsible advancement of synthe",
        "top": 2182,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Approach",
        "top": 2710,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "156.4px",
    "lineHeight": "156.4px",
    "letterSpacing": "-6.3px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Out",
        "top": 410,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "of",
        "top": 410,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "one,",
        "top": 410,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "69.6px",
    "lineHeight": "69.6px",
    "letterSpacing": "-3.5px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "8486",
        "top": 1714,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "01",
        "top": 1714,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "18",
        "top": 1714,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "17px",
    "lineHeight": "17px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Days",
        "top": 1794,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Hours",
        "top": 1794,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Minutes",
        "top": 1794,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "17px",
    "lineHeight": "17.9px",
    "letterSpacing": "-0.5px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Find out more",
        "top": 7117,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Find out more",
        "top": 7135,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Contact",
        "top": 21,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Contact",
        "top": 35,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "30.4px",
    "lineHeight": "30.4px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "8486:01:18:51",
        "top": 8164,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "30.4px",
    "lineHeight": "normal",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "hello@biotic.org",
        "top": 7529,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Roobert Medium",
    "fontStack": "\"Roobert Medium\", sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "normal",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Cookie Preferences",
        "top": 7951,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 83,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 6,
        "property": "svg-fill"
      },
      {
        "tag": "a",
        "text": "About",
        "top": 5,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Contact",
        "top": 21,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F4F5F7",
    "alpha": 1,
    "cssValue": "rgb(244, 245, 247)",
    "count": 5,
    "contexts": [
      {
        "tag": "button",
        "text": "ContactContact",
        "top": 11,
        "property": "control-background"
      },
      {
        "tag": "section",
        "text": "The evolution of biology Biotic builds and stewards the open, standardized foundations of biological",
        "top": 3311,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "July 2, 2026 Out of one, many. Learn moreLearn more",
        "top": 6365,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 118,
    "contexts": [
      {
        "tag": "span",
        "text": "Out",
        "top": 410,
        "property": "text"
      },
      {
        "tag": "h2",
        "text": "About us",
        "top": 2182,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Biotic is a nonprofit research organization dedicated to the safe, responsible advancement of synthe",
        "top": 2182,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#B6E400",
    "alpha": 1,
    "cssValue": "rgb(182, 228, 0)",
    "count": 14,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 1538,
        "property": "svg-fill"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 1620,
        "property": "svg-stroke"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 2504,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#4A4A4A",
    "alpha": 1,
    "cssValue": "rgb(74, 74, 74)",
    "count": 4,
    "contexts": [
      {
        "tag": "circle",
        "text": "",
        "top": 1620,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#808080",
    "alpha": 1,
    "cssValue": "rgb(128, 128, 128)",
    "count": 22,
    "contexts": [
      {
        "tag": "div",
        "text": "A robust synthetic cell that can be programmed to make a protein where it is needed, and a protein-s",
        "top": 5040,
        "property": "text"
      },
      {
        "tag": "time",
        "text": "July 2, 2026",
        "top": 6656,
        "property": "text"
      },
      {
        "tag": "h5",
        "text": "General inquiries",
        "top": 7537,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#B2B2B2",
    "alpha": 1,
    "cssValue": "rgb(178, 178, 178)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Unlocking transformative possibilities through foundational scientific discovery.",
        "top": 2710,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "",
        "top": 6380,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FFFFFF",
    "alpha": 0.0392156862745098,
    "cssValue": "rgba(255, 255, 255, 0.04)",
    "count": 1,
    "contexts": [
      {
        "tag": "header",
        "text": "About Mission Team Research SpudCell Papers Protocols Community Overview Events Mailing list News Bl",
        "top": -21,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#1F1F1F",
    "alpha": 1,
    "cssValue": "rgb(31, 31, 31)",
    "count": 4,
    "contexts": [
      {
        "tag": "input",
        "text": "",
        "top": 7725,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "Sign upSign up",
        "top": 7645,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#FFFFFF",
    "alpha": 0.011764705882352941,
    "cssValue": "rgba(255, 255, 255, 0.01)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": -9,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between distinct sections, with tighter, uniform padding inside tabular lists.
- Corner style: Combination of fully rounded pill shapes for buttons and inputs, alongside sharp rectangular boundaries for large layout sections.
- Radius: Pill-shaped radii for form fields and primary action buttons.
- Borders: Distinctive use of fine dotted horizontal lines (1px) as dividers between content rows.
- Buttons: Solid fill pill buttons, often utilizing the bright accent color for high visibility.
- Content width: Centered content with wide max-width, allowing generous margins on standard desktop displays.
- Density: Low density; the design leverages substantial whitespace to emphasize typography and large generative graphics.
- Evidence: Visible in component layout, button shapes, and the strict adherence to dotted line separators across distinct background colors.

## Sections

Gallery section count: 5. Each entry corresponds to one gallery capture.

1. **Features — Biotic Features** (Home)
   Reusable feature composition from Home, organized around “Biotic Features”.
   Capture: 1440×518px; page bounds 1000–1518px of 8222px; source section ID: `36a2bbf6-b0e9-4678-a783-2f3cb873e60c`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/a89b07bb21321e742f17b4b1578a7f8cab101246021eff91a49ea950e2c16630/section_crop-36a2bbf6-2026-10-08T03-41-18-584Z.webp
   SECTION.md v3.2: `36a2bbf6-b0e9-4678-a783-2f3cb873e60c` (deterministic evidence; editorial review pending)
2. **Features — Days left to 2050** (Home)
   Reusable feature composition from Home, organized around “Days left to 2050”.
   Capture: 1440×644px; page bounds 1518–2162px of 8222px; source section ID: `31d29620-cc09-4f0f-8eb4-e1e2e99eed2b`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/fcf98f5dcadf2219c425c2829562d5abd62a3907112497bcdc8737c4f920a88e/section_crop-31d29620-2026-10-08T03-41-19-433Z.webp
   SECTION.md v3.2: `31d29620-cc09-4f0f-8eb4-e1e2e99eed2b` (deterministic evidence; editorial review pending)
3. **Features — About us** (Home)
   Reusable feature composition from Home, organized around “About us”.
   Capture: 1440×1149px; page bounds 2162–3311px of 8222px; source section ID: `ee672620-014f-4cd5-abe4-109605566860`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/9e52f0f6991e05408ce7e72d4202cfef44337a000e88b066e4a6ca1c04481444/section_crop-ee672620-2026-10-08T03-41-20-288Z.webp
   SECTION.md v3.2: `ee672620-014f-4cd5-abe4-109605566860` (deterministic evidence; editorial review pending)
4. **Features — Imagine:** (Home)
   Reusable feature composition from Home, organized around “Imagine:”.
   Capture: 1440×1118px; page bounds 5020–6138px of 8222px; source section ID: `448dae51-0e9a-40ab-974a-09b5b49cebf5`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/8c1fd680a65e204245a50a70b682d91e0e17e6783cb45da1446baae291121d2d/section_crop-448dae51-2026-10-08T03-41-23-116Z.webp
   SECTION.md v3.2: `448dae51-0e9a-40ab-974a-09b5b49cebf5` (deterministic evidence; editorial review pending)
5. **Features — Blog posts** (Home)
   Reusable feature composition from Home, organized around “Blog posts”.
   Capture: 1440×838px; page bounds 6138–6976px of 8222px; source section ID: `012cdb93-01e9-43d1-986b-0f2e04dabea2`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/4a0dc77a3422e504de916e1241bd78756d6ab7f472c7b2036a6a4b275c9a6556/section_crop-012cdb93-2026-10-08T03-41-24-038Z.webp
   SECTION.md v3.2: `012cdb93-01e9-43d1-986b-0f2e04dabea2` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/95133d616e25068118b5543a5cbd6fb1361bc17e31655cb643cd8c44900d5464/desktop_full-6c4874aa-2026-10-08T03-41-09-745Z.webp
- Mobile screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/1bdf141d5f16d643e0f0fa4f3ad919578a41c96df28909c700418af75bceaa89/mobile_full-6c4874aa-2026-10-08T03-41-49-464Z.webp
- Open Graph image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/2e8ede413944a76fd4ba9c5d3551c8d7a22ba4189c5aa51846c87ed91bb0bec5/og_image-6c4874aa-2026-10-08T03-41-16-670Z.webp
- Full-page video: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/7ffb25049b8af14125c0977fd0e9c624bcb3f3f4450dc233df87c24c50ea7bb9/motion-1791432151790.mp4
- Video poster: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/de806f45fb38872a8a48fb645c9a2b90746af3778f872a97d8bc467d14979e0a/motion-poster-1791432151790.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Feature Collection
- Newsletter Form
- Primary Button
- Footer
- Generative Background
- Countdown Tracker
- Dotted Dividers

## Quality rubric

Overall: 63/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Biotic pairs a genuinely original, theme-appropriate generative-pattern motif with a disciplined black/white/lime editorial system, producing a cohesive page that reads as more than a template — but the originality is carried by essentially one recurring device, the palette and components otherwise follow common nonprofit/tech conventions, and motion/typography lack verified depth beyond scroll reveals and size scaling, keeping it solidly in the 'good' tier rather than 'strong.'

- Typography (15%): 62 — A single typeface (Roobert Medium, weight 500) is deployed across an extreme size range (14px to 156.4px) with deliberate optical tightening of letter-spacing as size increases (-0.1px at 14px scaling to -6.3px at 156px), showing genuine craft in scaling rather than naive resizing. However, the complete absence of weight variation across display, heading, body, and UI text flattens hierarchy to size alone, and the typeface itself is a generic corporate sans with no distinctive personality beyond scale contrast.
- Color (10%): 58 — The palette is a tightly restrained black/white/lime-green system with grey for secondary text, executed consistently (alternating black and white full-bleed sections, lime used only for CTAs and accent graphics). This restraint is appropriate for the clinical/scientific positioning, but the specific combination (black, white, acid-lime accent) is a very common contemporary tech/nonprofit palette, and the near-absence of a tertiary color beyond grey and one off-white (#F4F5F7) limits expressive range.
- Layout (20%): 65 — The page sustains a consistent structural language across sections: centered wide-max-width content, dotted horizontal dividers separating rows, alternating black/white section bands, and a tabular two/three-column pattern (label, heading, description) repeated in the 'Imagine:' list and footer columns. This is a coherent, legible editorial system carried through hero, about, feature list, blog, and footer rather than a one-off hero layout.
- Motion (20%): 62 — Motion centers on a genuine generative/algorithmic visual (reaction-diffusion pattern credited to Karl Sims' RD tool) that recurs as both a static graphic and an animating backdrop in the hero, mid-page 'evolution of biology' section, and footer, tying motion directly to the biological theme. Scroll-triggered reveals (dark section sliding up, staggered Approach/Obligation/Purpose items) are observed and reversible on scroll-up, suggesting a built system rather than a single disconnected effect. However, the observed motion is limited to scroll-linked reveals and a continuously running background pattern; no evidence of refined interaction micro-motion (hover states, button transitions) or verified easing quality is available.
- Originality (25%): 64 — The central idea — using reaction-diffusion/Turing-pattern generative art (explicitly credited to an external RD tool) as the visual metaphor for synthetic cell biology — is a genuinely hard-to-substitute, content-connected concept, directly linking form to the organization's subject matter rather than using decorative stock imagery. This is reused meaningfully across hero, mid-page, and footer. However, apart from this one strong idea, the surrounding system (nav, pill buttons, countdown timer, dotted dividers, tabular feature list, newsletter footer) is a fairly conventional nonprofit/tech template assembly, so the site rests on a single standout device rather than several compounding original moves.
- Content (10%): 65 — Visual and copy content are well matched to the organization's mission: the generative biological patterns visually echo the 'synthetic cell' subject matter, the countdown timer literalizes the '2050 resource crisis' narrative, and the 'Imagine:' feature list pairs plain-language outcomes with technical descriptions in a structured two-tier format. The blog preview thumbnails (microscopy-style cell imagery) also reinforce the scientific theme. Integration is intentional rather than decorative.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A dense cellular dot pattern sits behind the giant headline, echoing the biology theme without a single photo, while a black band with circular countdown rings gives the abstract mission a ticking deadline. Lime green accents and generous white space keep the dense scientific text easy to scan and lend the nonprofit a credible, lab-like mood.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.