Brand guidelines
Colour system
Updated: July 2026
Neutrals
Off-white
#F5F7FA
Default page & section backgrounds
Secondary body text · 12.6:1 on #003153 · AAA ✓
White
#FFFFFF
Cards, boxes, elevated elements on off-white
Border
#C9D3DC
Card borders, dividers, table lines
UI label
#486275
Section titles, captions, metadata, dates · 4.7:1 on #F5F7FA · AA ✓
Off-black
#323232
Primary body text · 11.2:1 on #F5F7FA · AAA ✓
Medimaps brand colours
Prussian Blue
#003153
Parent brand anchor. The dominant color of the Medimaps brand identity for company and products.
Carolina Blue
#6BB0D6
Primary or secondary accent for Medimaps brand, depending on the use case.
The Radiobotics green
#22C463
Primary accent for Medimaps brand. Occasionally, a darker version can be used (#2E9E5B) to improve accessibility.
Brand color pairings
Medimaps
Company gradient
gradient_mm
linear-gradient(135deg, #2E9E5B 0%, #003153 30%, #003153 70%, #6BB0D6 100%)
#22C463
RB Green
#003153
Prussian
#5454B2
Iris
Hero gradient
Used on Medimaps / company heroes
hero-gradient_mm
background-color: #F5F7FA; background-image: radial-gradient(ellipse at 6% 24%, rgba(0,49,83,0.14), transparent 44%), radial-gradient(ellipse at 4% 40%, rgba(107,176,214,0.16), transparent 32%), radial-gradient(ellipse at 96% 18%, rgba(0,49,83,0.10), transparent 36%), radial-gradient(ellipse at 94% 34%, rgba(107,176,214,0.14), transparent 32%);
image_mm
filter: drop-shadow(0 20px 40px rgba(0, 49, 82, 0.28));
TBS Osteo™
DXA · Bone microarchitecture · CE MDR · FDA cleared
gradient_osteo
linear-gradient(135deg, #003153, #5454B2)
#003153
Prussian Blue
#5454B2
Iris
Hero gradient
Used on TBS Osteo™ heroes
hero-gradient_osteo
background-color: #F5F7FA; background-image: radial-gradient(ellipse at 6% 24%, rgba(0,49,83,0.14), transparent 44%), radial-gradient(ellipse at 4% 40%, rgba(84,84,178,0.14), transparent 32%), radial-gradient(ellipse at 96% 18%, rgba(0,49,83,0.10), transparent 36%), radial-gradient(ellipse at 94% 34%, rgba(84,84,178,0.12), transparent 32%);
image_osteo
filter: drop-shadow(0 20px 40px rgba(84,84,178,0.28));
TBS Reveal™
X-ray · Bone fragility · CE MDR · FDA clearance pending
gradient_reveal
linear-gradient(135deg, #003153, #F78823)
#003153
Prussian Blue
#F78823
Orange
Hero gradient
Used on TBS Reveal™ heroes
hero-gradient_reveal
background-color: #F5F7FA; background-image: radial-gradient(ellipse at 6% 24%, rgba(0,49,83,0.14), transparent 44%), radial-gradient(ellipse at 4% 40%, rgba(247,136,35,0.14), transparent 32%), radial-gradient(ellipse at 96% 18%, rgba(0,49,83,0.10), transparent 36%), radial-gradient(ellipse at 94% 34%, rgba(247,136,35,0.12), transparent 32%);
image_reveal
filter: drop-shadow(0 20px 40px rgba(247,136,35,0.28));
RB Fracture™
X-ray · Fracture detection · CE MDR
gradient_rbfracture
linear-gradient(135deg, #003153, #73e373)
#003153
Prussian Blue
#22C463
RB Green
Hero gradient
Used on RB Fracture™ heroes
hero-gradient_rbfracture
background-color: #F5F7FA; background-image: radial-gradient(ellipse at 6% 24%, rgba(0,49,83,0.14), transparent 44%), radial-gradient(ellipse at 4% 40%, rgba(115,227,115,0.18), transparent 32%), radial-gradient(ellipse at 96% 18%, rgba(0,49,83,0.10), transparent 36%), radial-gradient(ellipse at 94% 34%, rgba(115,227,115,0.16), transparent 32%);
image_rbfracture
filter: drop-shadow(0 20px 40px rgba(115,227,115,0.35));
TBS Ortho™
DXA · Orthopaedic planning ·
In development
gradient_ortho
linear-gradient(135deg, #003153, #16BBA8)
#003153
Prussian Blue
#16BBA8
Keppel Green
Hero gradient
Used on TBS Osteo heroes
hero-gradient_ortho
background-color: #F5F7FA; background-image: radial-gradient(ellipse at 6% 24%, rgba(0,49,83,0.14), transparent 44%), radial-gradient(ellipse at 4% 40%, rgba(22,187,168,0.14), transparent 32%), radial-gradient(ellipse at 96% 18%, rgba(0,49,83,0.10), transparent 36%), radial-gradient(ellipse at 94% 34%, rgba(22,187,168,0.12), transparent 32%);
image_ortho
filter: drop-shadow(0 20px 40px rgba(22,187,168,0.28));
Corporate gradients — content
Dark section blush
gradient_blush-rbgreen-carolina
Dark section blush
gradient_blush-carolina
Dark section blush
gradient_blush-iris
Light section blush
gradient_mm-2
Light section blush
gradient_mm-3
Light section blush
gradient_osteo-2
Light section blush
gradient_osteo-3
Use for tall sections only
Light section blush
gradient_rbfracture-2
Use for tall sections only
Brand guidelines
Typography system
Updated: July 2026
Weights in use
Aa
Light
300
H1, H2 base · Heading non-emphasis
Aa
Normal
400
Body copy · Nav links · UI labels
Aa
Medium
500
Not in use
Aa
Semi-bold
600
H3 · H4 · Eyebrow labels · Card titles · Text links · Button labels · Body emphasis
Aa
Bold
700
H1 / H2 emphasis words · Gradient text highlights
Aa
Extra-bold
800
Not in use
Aa
Black
900
Not in use
Weights in-use are highlighted.
Emphasis in headings is created by the contrast between Light (300) base text and Bold (700) emphasis words, not by progressively heavier weights across heading levels.
Emphasis in text is created by the contrast between Normal (400) base text and Semi-bold (600) emphasis words. You can also try italicizing text in some instances.
(Medium (500), Extrabold (800), and Black (900) are available in Work Sans, but not in use.)
Type scale
Only apply emphasis weight and gradient to H1 and H2. Don't apply any emphasis to H3 and H4 headings, which should be short and sweet.
Headings should be in Prussian Blue on light backgrounds and Off-white on dark backgrounds.
Paragraph text should be in Off-black on light backgrounds and Off-white on dark backgrounds.
Eyebrow text should be in RB Green on dark backgrounds and Forest Kelly on light backgrounds when eyebrow text is in a heading. However, use your best judgement — design might require other color options. 🙂
Preview
Size
Weight
Line height
Letter spacing
H1: Bone density is not bone quality
39px
2.44rem
300 base
700 emphasis
1.15
~ 45px
-0.02em
~ -0.8px
H2: The global standard in bone microarchitecture assessment
31px
1.95rem
300 base
700 emphasis
1.20
~ 37px
-0.015em
~ -0.5px
H3: Clinician friendly
25px
1.56rem
600 base
1.25
~ 31px
-0.01em
~ -0.25p
H4: TBS Osteo™
20px
1.25rem
600 base
1.30
~ 26px
0em
Paragraph: TBS is a patented, validated analytical index derived from routine DXA scans. It reveals the internal structural quality of bone that BMD cannot measure.
16px
1.00rem
400 base
600 emphasis
1.575
~ 25px
0.01em
~ 0.16px
p_small: TBS is a patented, validated analytical index derived from routine DXA scans. It reveals the internal structural quality of bone that BMD cannot measure.
13px
400 base
600 emphasis
1.575
~ 25px
0.01em
~ 0.16px
Eyebrow subheading text
11px
0.69rem
600 base
1.0
2px
Heading emphasis — Light backgrounds
Within Elementor, add <strong> tags to H1 and H2 text to activate the gradient emphasis. Emphasis changes per product line, so make sure to apply the appropriate class to activate the appropriate emphasis.
Note: Use the OG heading element for this, as it's currently not possible with the atomic heading elements.
Medimaps: Heading text with some emphasis text in it
No class applied; default emphasis
Medimaps: Heading text with some emphasis text in it
Apply the class bg-dark
TBS Osteo: Heading text with some emphasis text in it
Apply the class product-osteo
TBS Osteo: Heading text with some emphasis text in it
Apply the classes product-osteo bg-dark
Note: Uses #7F77DD instead of Iris for legibility
TBS Reveal: Heading text with some emphasis text in it
Apply the class product-reveal
TBS Reveal: Heading text with some emphasis text in it
Apply the classes product-reveal bg-dark
RBfracture: Heading text with some emphasis text in it
Apply the class product-rbfracture
RBfracture: Heading text with some emphasis text in it
Apply the classes product-rbfracture bg-dark
Heading text with some emphasis text in it
Apply the class product-ortho
TBS Ortho: Heading text with some emphasis text in it
Apply the classes product-ortho bg-dark
Typography in context
The clinical need
Bone density is not bone quality
Up to 30% of patients at high fracture risk present with normal or osteopenic BMD — making them invisible to standard bone density assessment alone.
TBS · Trabecular Bone Score
The global standard in bone microarchitecture
TBS is a patented, validated analytical index derived from routine DXA scans. It reveals the internal structural quality of bone that BMD cannot measure.
TBS Osteo™ · TBS · DXA
The global standard for osteoporosis fracture-risk assessment
Up to 30% of patients at high fracture risk present with normal or osteopenic BMD — making them invisible to standard bone density assessment alone.
Clinically proven
Worldwide clinical evidence
TBS Osteo adds bone-microarchitecture analysis to your routine DXA scan — no extra radiation, no workflow disruption.
Links & buttons
White / light backgrounds, for all brands
Default
Check out all these cats
emphasis
This is body copy with Semi-bold emphasis words and a link to falling cats — both Semi-bold weight, but an underline and hover color change differentiates the link
CSS
This is the default — No additional CSS needed for in-line links
link-color: #003153; --link-hover-color: #337296;
Dark backgrounds, Medimaps brand
Default
Check out all these cats
emphasis
This is body copy with Semi-bold emphasis words and a link to falling cats — both Semi-bold weight, but an underline and hover color change differentiates the link
CSS
Apply the class bg-dark
link-color:#6BB0D6; --link-hover-color:#ffffff;
Buttons, Medimaps brand
Primary button
button_mm
Secondary button
button_mm-ghost-bg-light
Buttons, Medimaps brand
Primary button
button_mm-bg-dark
Secondary button
button_mm-ghost-bg-dark
Dark backgrounds, TBS Osteo
Default
Check out all these cats
emphasis
This is body copy with Semi-bold emphasis words and a link to falling cats — both Semi-bold weight, but an underline and hover color change differentiates the link
CSS
Apply the classes product-osteo bg-dark
link-color:#AFA9EC; --link-hover-color:#ffffff;
Buttons, TBS Osteo
Primary button
button_osteo
Secondary button
button_osteo-ghost-bg-light
Buttons, TBS Osteo
Primary button
button_osteo-bg-dark
Secondary button
button_osteo-ghost-bg-dark
Dark backgrounds, TBS Reveal
Default
Check out all these cats
emphasis
This is body copy with Semi-bold emphasis words and a link to falling cats — both Semi-bold weight, but an underline and hover color change differentiates the link
CSS
Apply the classes product-reveal bg-dark
link-color:#F78823; --link-hover-color:#ffffff;
Buttons, Reveal
Primary button
button_reveal
Secondary button
button_reveal-ghost-bg-light
Buttons, Reveal
Primary button
button_reveal-bg-dark
Secondary button
button_reveal-ghost-bg-dark
Dark backgrounds, RBfracture
Default
Check out all these cats
emphasis
This is body copy with Semi-bold emphasis words and a link to falling cats — both Semi-bold weight, but an underline and hover color change differentiates the link
CSS
Apply the classes product-rbfracture bg-dark
link-color:#73E373; --link-hover-color:#ffffff;
Buttons, RBfracture
Primary button
button_rbfracture
Secondary button
button_rbfracture-ghost-bg-light
Buttons, RBfracture
Primary button
button_rbfracture-bg-dark
Secondary button
button_rbfracture-ghost-bg-dark
Dark backgrounds, TBS Ortho
Default
Check out all these cats
emphasis
This is body copy with Semi-bold emphasis words and a link to falling cats — both Semi-bold weight, but an underline and hover color change differentiates the link
CSS
Apply the class product-ortho bg-dark
link-color:#16BBA8; --link-hover-color:#ffffff;
Buttons, Ortho
Primary button
button_ortho
Secondary button
button_ortho-ghost-bg-light
Buttons, Ortho
Primary button
button_ortho-bg-dark
Secondary button
button_ortho-ghost-bg-dark