These are the assets and rules for presenting Clinical Match Me in public. If you’re an affiliate, a partner, a journalist or a contractor building something for us, everything you need is on this page.
Use the files here rather than pulling a logo off a screenshot or a search result. If you need something that isn’t here, send us a message and we’ll get it to you.
Logos
Use the full logo, the one with our name in it, wherever you can. The puzzle mark on its own is for places where our name already appears nearby, or where the full logo would be too small to read.
Choose SVG wherever it’s supported. It stays sharp at any size and the files are smaller. The PNGs are there for Google Docs, PowerPoint, email signatures and anywhere else that won’t take a vector file.
Clear space
Keep a margin the height of the puzzle mark, shown here as x, on every side of the logo. Nothing else sits inside that margin.
Minimum size: 120px wide on screen, or 32mm in print. Below that the wordmark stops being legible, so use the logomark instead.
What not to do
The logo is supplied finished. Place it, scale it proportionally, and leave the rest alone.
Don’t rotate it
Don’t stretch or skew it
Don’t change the colors
Don’t add effects or shadows
Don’t place it on a color it can’t be read against
Clinical Match MeDon’t crowd it or build your own version from separate pieces
Colors
Red is the accent and belongs on calls to action. Navy carries headings and dark sections. Everything else supports those two. Click any swatch to copy its hex.
Brand Red
#E63946
Buttons, links and accents. Not for body text on white.
Dark Navy
#1D3557
Headings, dark sections, the site header and footer.
Steel Blue
#457B9D
The wordmark, secondary text and supporting interface detail.
Mint
#F1FAEE
Backgrounds only. It’s a surface, never a text color.
Light Teal
#A8DADC
The puzzle piece in the logo and accents inside dark email headers.
Surface
#EDF2F6
The tinted background that separates one section from the next.
Contrast figures are WCAG 2.1 ratios against white, or against Dark Navy for the pale colors. Anything below 4.5 is not safe for body text at normal size.
Typography
Two typefaces, both free from Google Fonts. Plus Jakarta Sans sets headings. Inter sets everything else.
Headings
Plus Jakarta Sans
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789
- 500 Medium, the default for headings
- 600 Semibold
- 700 Bold, used for most headings in page markup
- 800 Extrabold, reserved for display moments
Body
Inter
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789
- 400 Regular, body copy
- 500 Medium
- 600 Semibold, labels and small caps
- 700 Bold, emphasis
Loading both
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">Where neither font is available, fall back to the system UI stack. Don’t substitute a different display face.
Type scale
Headings scale with the viewport rather than sitting at fixed sizes, so the same page reads well on a phone and on a desktop. The figures below are the two ends of that range.
| Element | Mobile | Desktop | Weight | Typeface |
|---|---|---|---|---|
| Page title | 28px | 44px | 700 | Plus Jakarta Sans |
| Section heading, h2 | 27px | 36px | 700 | Plus Jakarta Sans |
| h1 in content | 30px | 40px | 500 | Plus Jakarta Sans |
| h3 | 24px | 28px | 500 | Plus Jakarta Sans |
| h4 | 22px | 24px | 500 | Plus Jakarta Sans |
| h5 | 20px | 20px | 500 | Plus Jakarta Sans |
| h6 | 16px | 16px | 500 | Plus Jakarta Sans |
| Body | 16px | 16px | 400 | Inter |
| Small print | 14px | 14px | 400 | Inter |
Mobile figures are measured at 375px wide and desktop at 1440px. Body copy runs at a line height of 1.5. Headings default to weight 500 and are set to 700 in most page markup.
