SiteStyleGuide

Unofficial A style guide made by SiteStyleGuide from radiopaedia.org’s public web pages. Not affiliated with or endorsed by Radiopaedia. The real site is radiopaedia.org ↗

Radiopaedia logo

Unofficial style guide

Radiopaediastyle guide

Radiopaedia’s website (radiopaedia.org) sets its headings in Lucida Grande and its body text in Open Sans. Its palette is led by Rebecca Purple (#65419B), Light Royal Blue (#41699B) and Medium Purple (#A172F8), with #000000 text on #2A292A. Captured from the live site on 30 October 2026.

Website
radiopaedia.org
Typefaces
Open Sans, Lucida Grande, Lato
Palette
4 neutrals, 12 colours, 3 gradients
Captured
30 Oct 2026 · added by @sitestyleguide
Save Add to collection Share Report
https://radiopaedia.org/ Screenshot
Screenshot of the radiopaedia.org homepage on a desktop screen
Screenshot of radiopaedia.org on a 1440 px desktop screen, 30 Oct 2026.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title
Radiopaedia.org, the peer-reviewed collaborative radiology resource
▲ 67 / 60 characters
Meta description
Missing
▲ 0 / 160 characters
Site name
Radiopaedia
og:description
Radiopaedia.org, the peer-reviewed collaborative radiology resource.
Language
en-US

In search results

Radiopaediahttps://radiopaedia.org/

Radiopaedia.org, the peer-reviewed collaborative radiology re…

When shared

The image Radiopaedia shares with links

radiopaedia.org

Radiopaedia.org, the peer-reviewed collaborative radiology resource

Radiopaedia.org, the peer-reviewed collaborative radiology resource.

Back to top ↑

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used
  • White 34.1%
  • Charcoal 12.8%
  • Black 11.3%
  • Off White 8.2%
  • Rebecca Purple 5.1%
  • Light Royal Blue 4.7%
  • Medium Purple 3.5%
  • Fire Brick 3.1%
  • Light Sky Blue 2.7%
  • Forest Green 2.7%
  • Deep Royal Blue 2.6%
  • Dark Orange 2.2%
  • Light Coral 2%
  • Medium Blue 1.6%
  • Light Green 1.6%
  • Lavender 1.6%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

  • White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 0
    On text
    21.00:1 AAA
    On white
    —

    Background, text, border · .panel-default>.panel-heading, body

  • Charcoal

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 80
    On text
    1.66:1 Fail
    On white
    12.63:1 AAA

    Text, background, border · .panel-default>.panel-heading, .panel-primary>.panel-heading

  • Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 100
    On text
    —
    On white
    21.00:1 AAA

    Background, text, border · body, .site-footer-bottom

  • Off White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 7
    On text
    18.10:1 AAA
    On white
    1.16:1 Fail

    Background, border, text · .site-header-nav-secondary .search-input, .nav .nav-divider

Colours

Brand colours and accents, most used first

  • Rebecca Purple

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    35 58 0 39
    On text
    2.78:1 Fail
    On white
    7.55:1 AAA

    Text, background, border · .btn.btn-warning.btn-dark, ._RichTextEditor_ImageDialog_Tabs button._active

  • Light Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    58 32 0 39
    On text
    3.72:1 AA large
    On white
    5.65:1 AA

    Text, background, border · .btn.btn-default.btn-dark, .panel-info>.panel-heading

  • Medium Purple

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    35 54 0 3
    On text
    6.28:1 AA
    On white
    3.35:1 AA large

    Background, text, border · .panel.panel-brand-primary>.panel-heading, .btn.btn-inverted

  • Fire Brick

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 95 95 31
    On text
    2.87:1 Fail
    On white
    7.33:1 AAA

    Text, background, border · .panel-danger>.panel-heading .badge, .panel-danger>.panel-heading

  • Light Sky Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    53 24 0 3
    On text
    10.28:1 AAA
    On white
    2.04:1 Fail

    Background, text, border · .panel.panel-brand-secondary>.panel-heading, .btn-info

  • Forest Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    75 0 82 48
    On text
    4.43:1 AA large
    On white
    4.74:1 AA

    Text, border, background · .panel-success>.panel-heading, .panel-success>.panel-heading .badge

  • Deep Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    94 43 0 32
    On text
    3.45:1 AA large
    On white
    6.09:1 AA

    Text, background, graphic · .ui-tooltip-tipped .ui-tooltip-titlebar, .panel-info>.panel-heading .badge

  • Dark Orange

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 50 94 5
    On text
    7.60:1 AAA
    On white
    2.76:1 Fail

    Text, background, graphic · .btn.btn-primary.btn-dark, ._RichTextEditor_MenuBar ._RichTextEditor_Toolgroup ._RichTextEditor_Button._Ric

  • Light Coral

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 54 54 3
    On text
    7.64:1 AAA
    On white
    2.75:1 Fail

    Background, text, graphic · #errorExplanation h2, .btn-danger

  • Medium Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    62 95 0 31
    On text
    1.90:1 Fail
    On white
    11.07:1 AAA

    Text, background, border · .panel-warning>.panel-heading .badge, .panel-warning>.panel-heading

  • Light Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    48 0 53 11
    On text
    13.08:1 AAA
    On white
    1.60:1 Fail

    Background, text, graphic · .btn-success, .btn.btn-success

  • Lavender

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    5 7 0 0
    On text
    18.09:1 AAA
    On white
    1.16:1 Fail

    Background, text · .panel-warning>.panel-heading, .panel-warning>.panel-heading .badge

Gradients

  • linear-gradient(90deg,#ddd 25%,#ccc,#ddd 75%)

  • linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)

  • linear-gradient(to right, rgb(13.4396613191%, 8.6492869875%, 20.6252228164%) 0%, rgb(24.2853832442%, 28.0151515152%, 48.1024955437%) 75%, #41699b 100%)

Back to top ↑

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Lucida Grande

Aa 400 Aa 700

Open Sans

Self-hosted · weights 400, 600, 700 · body · shown in a stand-in if you don’t have it

Aa 700

Lucida Grande

System font, or not loaded on this page · weights 700 · headings · shown in a stand-in if you don’t have it

Aa 400

Lato

System font, or not loaded on this page · weights 400 · headings · shown in a stand-in if you don’t have it

Aa 400

Arial

System font, or not loaded on this page · buttons · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS · root 10 px
Heading 1 2.074em · 21 px / 1.25 weight 700

Radiopaedia

Heading 2 1.728em · 17 px / 1.25 weight 700

Radiopaedia.org, the peer-reviewed collaborativ…

Heading 3 1.44em · 14 px / 1.25 weight 700

Radiopaedia.org, the peer-reviewed collaborativ…

Heading 4 1.2em · 12 px / 1.25 weight 700

Radiopaedia.org, the peer-reviewed collaborativ…

Heading 5 1em · 10 px / 1.25 weight 700

Radiopaedia.org, the peer-reviewed collaborativ…

Heading 6 .833em · 8 px / 1.25 weight 700

Radiopaedia.org, the peer-reviewed collaborativ…

Body 12px / 1.5 Open Sans

The quick brown fox jumps over the lazy dog.

Paragraph 14px / 19px weight 700

The quick brown fox jumps over the lazy dog.

Small 91%

The quick brown fox jumps over the lazy dog.

Button 12px / 18px none · Arial

Get started

Link 1.16em · 12 px / 150% weight 700 · uppercase

Read more about Radiopaedia

Sizes in use

Most common across the site
  • 16pxline 1.5 · 13 rules
  • 15pxline 1.3333333 · 9 rules
  • 14pxline 1.4 · 33 rules
  • 13pxline 1.5 · 26 rules
  • 12pxline 1.5 · 67 rules
  • 11pxline 1.5 · 54 rules
  • 10pxline 12px · 31 rules
  • 9pxline 1.2em · 20 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.btn-brand-primary · #A172F8

Link

Read our latest news today.

a · #41699B

Corner radius

  • 2px · 42×
  • 4px · 37×
  • 1px · 14×
  • 3px · 12×
  • 50% · 11×
  • 8px · 9×

Shadows

  • 0 6px 12px rgba(0,0,0,.175)
  • 0 1px 1px rgba(0,0,0,.05)
  • 0 5px 10px rgba(0,0,0,.2)
  • 0 0 8px rgba(0,0,0,.6)

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

767
768
991
992
1160
1198
1199
1200

On a scale of 0 to 1440 px.

Content widths (max-width)

994 px
630 px
525 px
480 px
400 px
350 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

  • ▲ CheckThe title is 67 characters. Google usually cuts titles near 60, so the end may not show in results.
  • ▲ CheckThere is no meta description, so search engines will pick text from the page.
  • ▲ CheckBody text (#000000 on #2A292A) has a contrast of 1.45:1, under the 4.5:1 WCAG asks for.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Radiopaedia use?
Radiopaedia’s website uses two typefaces: Open Sans (body text), self-hosted; Lucida Grande (headings), a system font.
What are Radiopaedia’s brand colours?
The main colours on radiopaedia.org are Rebecca Purple (#65419B), Light Royal Blue (#41699B), Medium Purple (#A172F8), Fire Brick (#AF0909), Light Sky Blue (#74BCF7) and Forest Green (#218518).
What colour is Radiopaedia’s text and background?
Body text is #000000 on a #2A292A background.
Where is Radiopaedia’s logo from?
The logo shown in this guide was found on radiopaedia.org’s homepage. For official logo files and usage rules, check Radiopaedia’s own brand or press page.
Is this Radiopaedia’s official style guide?
No. SiteStyleGuide made it from radiopaedia.org’s public web pages on 30 October 2026, and isn’t affiliated with Radiopaedia. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

radiopaedia-org-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* radiopaedia.org design tokens, from SiteStyleGuide (https://sitestyleguide.com/radiopaedia.org) */
:root {
  /* Colours */
  --text: #000000;
  --background: #2A292A;
  --colour-white: #FFFFFF;
  --colour-charcoal: #333333;
  --colour-black: #000000;
  --colour-off-white: #EEEEEE;
  --colour-rebecca-purple: #65419B;
  --colour-light-royal-blue: #41699B;
  --colour-medium-purple: #A172F8;
  --colour-fire-brick: #AF0909;
  --colour-light-sky-blue: #74BCF7;
  --colour-forest-green: #218518;
  --colour-deep-royal-blue: #0A64AE;
  --colour-dark-orange: #F37A0E;
  --colour-light-coral: #F87272;
  --colour-medium-blue: #4309AF;
  --colour-light-green: #76E46C;
  --colour-lavender: #F2EBFE;
  --gradient-1: linear-gradient(90deg,#ddd 25%,#ccc,#ddd 75%);
  --gradient-2: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  --gradient-3: linear-gradient(to right, rgb(13.4396613191%, 8.6492869875%, 20.6252228164%) 0%, rgb(24.2853832442%, 28.0151515152%, 48.1024955437%) 75%, #41699b 100%);

  /* Typefaces */
  --font-body: 'Open Sans', sans-serif;
  --font-headings: 'Lucida Grande', sans-serif;
  --font-buttons: 'Arial', 'Helvetica', sans-serif;
  --font-other: 'Helvetica', 'Arial', sans-serif;

  /* Type scale */
  --text-h1: 2.074em;
  --leading-h1: 1.25;
  --text-h2: 1.728em;
  --leading-h2: 1.25;
  --text-h3: 1.44em;
  --leading-h3: 1.25;
  --text-h4: 1.2em;
  --leading-h4: 1.25;
  --text-h5: 1em;
  --leading-h5: 1.25;
  --text-h6: .833em;
  --leading-h6: 1.25;
  --text-body: 12px;
  --leading-body: 1.5;
  --text-p: 14px;
  --leading-p: 19px;
  --text-small: 91%;
  --text-button: 12px;
  --leading-button: 18px;
  --text-a: 1.16em;
  --leading-a: 150%;

  /* Shape */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 1px;
  --radius-4: 3px;
  --radius-5: 50%;
  --radius-6: 8px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 767px;
  --breakpoint-2: 768px;
  --breakpoint-3: 991px;
  --breakpoint-4: 992px;
  --breakpoint-5: 1160px;
  --breakpoint-6: 1198px;
  --breakpoint-7: 1199px;
  --breakpoint-8: 1200px;
  --max-width-1: 994px;
  --max-width-2: 630px;
  --max-width-3: 525px;
  --max-width-4: 480px;
  --max-width-5: 400px;
  --max-width-6: 350px;
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run radiopaedia.org?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

View our style guide on SiteStyleGuide 
<a href="https://sitestyleguide.com/radiopaedia.org" title="Radiopaedia style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Also set in Open Sans

Other websites using Open Sans as their main typeface

Similar colours

Websites whose lead colour is closest to Radiopaedia’s

Captured from radiopaedia.org on 30 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Radiopaedia; this guide describes the public website for reference.