PREDICT helps people understand their biology. We turn biomarker science into results people can read, trust, and act on. The brand should feel the same: clear, precise, and calm.

Principles

  • Clear — Say one thing at a time. Plenty of white space, few colours, plain words.
  • Precise — Health data is exact, so the brand is too. Align things, use real units, and never round away meaning.
  • Calm — Results can be worrying. Inform without alarming, and save strong colour for what needs attention.
  • Human — Science, explained by people. The mascot and the voice keep it warm.

Logo assets

Download the logo for light or dark backgrounds, as SVG for screens and print or as PNG (2048 px) for documents and slides. Use these files instead of recreating the logo.

Logo
Wordmark with the mark. The default for headers, documents, and partners.
Icon
The mark on its own. For app icons, favicons, and avatars.
Wordmark
The detailed wordmark for covers, signage, and hero sections.
Mascot
The still mascot. For print, email, and anywhere motion isn't possible.

Anatomy

The logo has two parts: the wordmark, PREDICT in custom letterforms, and the mark, two strokes above the T. The mark also works alone as the icon. Never separate the wordmark from the mark, or change their size or position relative to each other.

Mark
Wordmark

Clear space

Keep space around the logo free of text, images, and edges. The minimum clear space is x, the height of the P, on every side. More space is always better.

xxxx
x is the height of the P. Keep at least x of empty space on every side.

Minimum size

Below these sizes the mark becomes hard to see. Use the icon instead of the full logo when space is tight.

80 px · 20 mm
Logo: at least 80 px wide on screen, 20 mm in print.
16 px · 5 mm
Icon: at least 16 px on screen, 5 mm in print.

Colour versions

The logo comes in one colour at a time. Use black on light backgrounds and white on dark ones. White on Predict Purple and purple on white are for brand moments, such as campaigns and covers.

BlackThe default, on white and light photos.
WhiteOn black and dark photos.
White on purpleOn Predict Purple only.
PurpleOn white, for brand moments.

The standalone icon is always Predict Purple. On a purple background, use the white logo instead.

Don'ts

Keep the logo as it is supplied.

Don't stretch or squash it.
Don't rotate it.
Don't use colours outside the brand palette.
Don't add shadows, glows, or outlines.
Don't place it on low-contrast or busy backgrounds.
PREDICT
Don't retype it in another font.

Colours

The palette is mostly black and white, with Predict Purple as the one brand colour. Click a swatch to copy its hex value.

Purple scale

Proportions

Purple works because it is rare. Use it for the main action and brand moments, not for large areas or body text.

60%
25%
10%
5%
Mostly white and black, a little lilac, and purple only where it matters.

Status colours

Green, yellow, blue, orange, and red are kept for biomarker status, from normal to extreme. Don't use them for decoration or for the brand. See Colors for the full list.

Typography

Neue Montreal is the brand typeface, for everything from headlines to buttons. Geist Mono is for codes, IDs, and numbers that need to line up.

Neue Montreal
Headings, body text, and the interface. `font-sans`

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

  • Understand your biologyLight 300
  • Understand your biologyRegular 400
  • Understand your biologyMedium 500
  • Understand your biologyBold 700
Geist Mono
Codes, IDs, and numbers that need to line up. `font-mono`

Aa

0123456789 +−×÷ = % ·

LDL-C
185.5 mg·dL⁻¹
hs-CRP
3.5 mg·L⁻¹
Z-score
+2.71
Sample
PRD-20481
  • Use Medium (500) for headings and Regular (400) for body text. Keep Light and Bold for rare emphasis.
  • Use sentence case for headings and buttons: "Book a test", not "Book A Test".
  • Use tabular numbers (tabular-nums) for results, so columns line up.
  • See Typography for the type scale.

Mascot

The mascot is the friendly face of PREDICT. It comes animated for the web and still for everything else.

Animated, for the web. Its eyes follow the cursor.
Still, for print, email, and social posts.

No results yet

Book your first test to see them here.

Use it in empty states, onboarding, and celebrations.
LDL-C is far above
the healthy range.
Don't put it next to out-of-range results or warnings.
  • Show one mascot per screen.
  • Keep its shape, colour, and proportions as supplied.
  • Don't give it speech bubbles that give health advice.
  • See Mascot for the component.

Voice and tone

Write the way a good clinician talks: plainly, kindly, and exactly.

DoDon't
Your LDL-C is above the healthy range.DANGER! Your cholesterol is critical!
Fast for 10 to 12 hours before your test.Please ensure adequate fasting prior to phlebotomy.
3 results need attention.You failed 3 tests.
Discuss these results with your clinician.You have heart disease.
Book a testClick here to book now!!!
  • Use plain words. Explain a term the first time, such as "hs-CRP, a marker of inflammation".
  • Lead with what the result means, then the number.
  • Never diagnose. Results are information, not medical advice.
  • Use "you" and "your". Avoid jargon, exclamation marks, and all caps.

In code

The logo, icon, and mascot are React components in @workspace/ui. Use them instead of image files so they follow the theme.



The brand colours are theme tokens: bg-primary for Predict Purple, bg-secondary for lilac, and bg-chart-1 to bg-chart-5 for the purple scale. See Logo for the full component reference.