What font does Raspberry Pi Foundation use?

Raspberry Pi Foundation’s website uses three typefaces: Roboto (headings and body text), google Fonts; Rubik, google Fonts; Roboto Slab, google Fonts.

What are Raspberry Pi Foundation’s brand colours?

The main colours on raspberrypi.org are Light Crimson (#CD2356), Deep Crimson (#C51D4A), Light Blue (#AFDBEB), Deep Slate Blue (#232E9B), Slate Blue (#004881) and Dark Salmon (#F69986).

What colour is Raspberry Pi Foundation’s text and background?

Body text is #222222 on a #FFFFFF background.

Where is Raspberry Pi Foundation’s logo from?

The logo shown in this guide was found on raspberrypi.org’s homepage. For official logo files and usage rules, check Raspberry Pi Foundation’s own brand or press page.

Is this Raspberry Pi Foundation’s official style guide?

No. SiteStyleGuide made it from raspberrypi.org’s public web pages on 25 October 2026, and isn’t affiliated with Raspberry Pi Foundation. Members can refresh a guide after 90 days to pick up changes.

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

Unofficial style guide

Raspberry Pi Foundationstyle guide

Raspberry Pi Foundation’s website (raspberrypi.org) uses Roboto for its headings and body text. Its palette is led by Light Crimson (#CD2356), Deep Crimson (#C51D4A) and Light Blue (#AFDBEB), with #222222 text on #FFFFFF. Captured from the live site on 25 October 2026.

Website: raspberrypi.org
Typefaces: Roboto, Rubik, Lucida Console
Palette: 4 neutrals, 12 colours, 1 gradient
Captured: 25 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the raspberrypi.org homepage on a desktop screen — Screenshot of raspberrypi.org on a 1440 px desktop screen, 25 Oct 2026.

Screenshot of the raspberrypi.org homepage on a phone — On a phone, 390 px.

Identity & metadata

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

Title &
description

Page title: Teach, learn, and make with the Raspberry Pi Foundation; ● 55 / 60 characters
Meta description: We are a charity with the mission to enable young people to realise their full potential through the power of computing and digital technologies.; ● 145 / 160 characters
Site name: Raspberry Pi Foundation
og:title: Teach, learn, and make with the Raspberry Pi Foundation
og:description: We are a charity with the mission to enable young people to realise their full potential through the power of computing and digital technologies.
Language: en

In search results

Raspberry Pi Foundationhttps://www.raspberrypi.org/

Teach, learn, and make with the Raspberry Pi Foundation

We are a charity with the mission to enable young people to realise their full potential through the power of computing and digital technologies.

When shared

The image Raspberry Pi Foundation shares with links

raspberrypi.org

Teach, learn, and make with the Raspberry Pi Foundation

We are a charity with the mission to enable young people to realise their full potential through the power of…

Logo & favicons

Found as: image in the header. SVG, 165 × 50.

Logo

On white

On black

On Light Crimson

Favicons

3 found

100 px · SVG icon
100 px · PNG favicon.ico
25 px · PNG icon

Teach, learn, and make with the Raspberry Pi Foundation

Light browser tab

Teach, learn, and make with the Raspberry Pi Foundation

Dark browser tab

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 (#222222) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 40.9%
Near Black 17.9%
Black 9.2%
Light Crimson 8.6%
Deep Crimson 5%
Cool Dark Grey 4.6%
Light Blue 2.4%
Deep Slate Blue 2%
Slate Blue 1.5%
Dark Salmon 1.3%
Khaki 1.3%
Light Green 1.3%
Medium Aqua Marine 1.3%
Light Slate Blue 1%
Dark Red 0.9%
Slate Blue 0.9%

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
15.91:1 AAA

On white
—

Background, text, border · html, body
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 87

On text
1.01:1 Fail

On white
16.10:1 AAA

Text, border · .c-definition-list__container .c-definition-list-item__container .c-definition-l, body
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.32:1 Fail

On white
21.00:1 AAA

Text, background, border · .site-header .sauce-button--logout, .site-header-toggle .site-header-toggle__line
Cool Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
16 5 0 64

On text
2.15:1 Fail

On white
7.41:1 AAA

Text · .pk-c-detailed-hero__heading-prefix, .pk-c-detailed-link-card__wrapper h3 span

Colours

Brand colours and accents, most used first

Light Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 83 58 20

On text
3.01:1 AA large

On white
5.29:1 AA

Background, text, border · .pk-c-timeline h3::before, .rpf-squiggle-heading::after
Deep Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 85 62 23

On text
2.76:1 Fail

On white
5.76:1 AA

Background, text, graphic · .c-video-split-block__text h2::after, .c-hero__container_full_bleed h1
Light Blue

HEX

RGB

HSL

OKLCH

CMYK
26 7 0 8

On text
10.72:1 AAA

On white
1.48:1 Fail

Background · .site-header-nav-link--donate::after, .site-header-nav-link--logout::after
Deep Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
77 70 0 39

On text
1.47:1 Fail

On white
10.85:1 AAA

Text, background, border · .c-hero__cta, .file-card-component__link>a
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
100 44 0 49

On text
1.70:1 Fail

On white
9.36:1 AAA

Text · .site-header-skipper__link, .site-header-nav-panel__link
Dark Salmon

HEX

RGB

HSL

OKLCH

CMYK
0 38 46 4

On text
7.44:1 AAA

On white
2.14:1 Fail

Background · .site-header-nav-link--teach::after
Khaki

HEX

RGB

HSL

OKLCH

CMYK
0 13 57 0

On text
12.15:1 AAA

On white
1.31:1 Fail

Background · .site-header-nav-link--research::after
Light Green

HEX

RGB

HSL

OKLCH

CMYK
34 0 27 7

On text
11.57:1 AAA

On white
1.38:1 Fail

Background · .site-header-nav-link--computers::after
Medium Aqua Marine

HEX

RGB

HSL

OKLCH

CMYK
38 0 14 15

On text
9.59:1 AAA

On white
1.66:1 Fail

Background · .site-header-nav-link--about::after
Light Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
100 60 0 33

On text
1.83:1 Fail

On white
8.70:1 AAA

Text · .c-link-card a, --color-text-link-primary-base
Dark Red

HEX

RGB

HSL

OKLCH

CMYK
0 94 94 38

On text
1.90:1 Fail

On white
8.39:1 AAA

Text, border · .rpf-error-message, --rpf-alert-error
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
78 59 0 46

On text
1.52:1 Fail

On white
10.46:1 AAA

Text, border · .rpf-alert__icon, --rpf-alert-information

Gradients

linear-gradient(-45deg, transparent, transparent 20px, 20px, 40px)

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.

Roboto

Aa 400 Aa 700

Roboto

Google Fonts · weights 400, 500, 700 · body

Aa 300 Aa 700

Rubik

Google Fonts · weights 300, 400, 500, 700 · body

Aa 400

Lucida Console

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

Aa 400 Aa 700

Roboto Slab

Google Fonts · weights 400, 700

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

Type scale

From the site’s CSS

Body clamp(1rem,2vw,1.25rem) · 20 px / 1.4 weight 400 · Roboto

We are a charity with the mission to enable young people to realise their full potential through the power of computing and digital technol…

Paragraph 1rem · 16 px

We are a charity with the mission to enable young people to realise their full potential through the power of computing and digital technol…

Link clamp(.8rem,1.6vw,1rem) · 16 px weight 500 · lowercase

Sizes in use

Most common across the site

50px2 rules
30pxline 1 · 9 rules
24pxline 1 · 3 rules
20pxline 1.4 · 14 rules
19px7 rules
18pxline 20px · 2 rules
16pxline 2 · 22 rules
14px4 rules

Elements

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

Elements

Corner radius

.3125rem · 4×
.5rem · 3×
8px · 3×
1em · 2×
1rem · 2×

Shadows

0 0 8px 0 rgba(0,0,0,.08)
0 0 30px 0 rgba(0,0,0,.15)
0 0 0 rgba(0,0,0,.0784313725)
0 0 1.25rem 0 rgba(0,72,129,.2)

Layout

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

Grid

Breakpoints

500

700

800

900

1000

1024

1200

1300

On a scale of 0 to 1440 px.

Content widths (max-width)

1600 px

1300 px

1296 px

1000 px

800 px

600 px

Notes

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

Notes

● FineThe title is 55 characters, short enough to show in full in search results.

Questions

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

Questions

What font does Raspberry Pi Foundation use?: Raspberry Pi Foundation’s website uses three typefaces: Roboto (headings and body text), google Fonts; Rubik, google Fonts; Roboto Slab, google Fonts.
What are Raspberry Pi Foundation’s brand colours?: The main colours on raspberrypi.org are Light Crimson (#CD2356), Deep Crimson (#C51D4A), Light Blue (#AFDBEB), Deep Slate Blue (#232E9B), Slate Blue (#004881) and Dark Salmon (#F69986).
What colour is Raspberry Pi Foundation’s text and background?: Body text is #222222 on a #FFFFFF background.
Where is Raspberry Pi Foundation’s logo from?: The logo shown in this guide was found on raspberrypi.org’s homepage. For official logo files and usage rules, check Raspberry Pi Foundation’s own brand or press page.
Is this Raspberry Pi Foundation’s official style guide?: No. SiteStyleGuide made it from raspberrypi.org’s public web pages on 25 October 2026, and isn’t affiliated with Raspberry Pi Foundation. Members can refresh a guide after 90 days to pick up changes.

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

raspberrypi-org-tokens.css

Download

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

/* raspberrypi.org design tokens, from SiteStyleGuide (https://sitestyleguide.com/raspberrypi.org) */
:root {
  /* Colours */
  --text: #222222;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #212121;
  --colour-black: #000000;
  --colour-cool-dark-grey: #4D575C;
  --colour-light-crimson: #CD2356;
  --colour-deep-crimson: #C51D4A;
  --colour-light-blue: #AFDBEB;
  --colour-deep-slate-blue: #232E9B;
  --colour-slate-blue: #004881;
  --colour-dark-salmon: #F69986;
  --colour-khaki: #FFDF6E;
  --colour-light-green: #9DEEAD;
  --colour-medium-aqua-marine: #87D9BA;
  --colour-light-slate-blue: #0044AB;
  --colour-dark-red: #9E0A0A;
  --colour-slate-blue-2: #1E398A;
  --gradient-1: linear-gradient(-45deg, transparent, transparent 20px, 20px, 40px);

  /* Typefaces */
  --font-body: 'Roboto', sans-serif;
  --font-other: 'Lucida Console', 'Monaco', monospace;

  /* Type scale */
  --text-body: clamp(1rem,2vw,1.25rem);
  --leading-body: 1.4;
  --text-p: 1rem;
  --text-a: clamp(.8rem,1.6vw,1rem);

  /* Shape */
  --radius-1: .3125rem;
  --radius-2: .5rem;
  --radius-3: 8px;
  --radius-4: 1em;
  --radius-5: 1rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 500px;
  --breakpoint-2: 700px;
  --breakpoint-3: 800px;
  --breakpoint-4: 900px;
  --breakpoint-5: 1000px;
  --breakpoint-6: 1024px;
  --breakpoint-7: 1200px;
  --breakpoint-8: 1300px;
  --max-width-1: 1600px;
  --max-width-2: 1300px;
  --max-width-3: 1296px;
  --max-width-4: 1000px;
  --max-width-5: 800px;
  --max-width-6: 600px;
}

{
    "site": "raspberrypi.org",
    "source": "https://sitestyleguide.com/raspberrypi.org",
    "text": "#222222",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#212121",
            "rgb": [
                33,
                33,
                33
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Cool Dark Grey",
            "hex": "#4D575C",
            "rgb": [
                77,
                87,
                92
            ]
        },
        {
            "name": "Light Crimson",
            "hex": "#CD2356",
            "rgb": [
                205,
                35,
                86
            ]
        },
        {
            "name": "Deep Crimson",
            "hex": "#C51D4A",
            "rgb": [
                197,
                29,
                74
            ]
        },
        {
            "name": "Light Blue",
            "hex": "#AFDBEB",
            "rgb": [
                175,
                219,
                235
            ]
        },
        {
            "name": "Deep Slate Blue",
            "hex": "#232E9B",
            "rgb": [
                35,
                46,
                155
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#004881",
            "rgb": [
                0,
                72,
                129
            ]
        },
        {
            "name": "Dark Salmon",
            "hex": "#F69986",
            "rgb": [
                246,
                153,
                134
            ]
        },
        {
            "name": "Khaki",
            "hex": "#FFDF6E",
            "rgb": [
                255,
                223,
                110
            ]
        },
        {
            "name": "Light Green",
            "hex": "#9DEEAD",
            "rgb": [
                157,
                238,
                173
            ]
        },
        {
            "name": "Medium Aqua Marine",
            "hex": "#87D9BA",
            "rgb": [
                135,
                217,
                186
            ]
        },
        {
            "name": "Light Slate Blue",
            "hex": "#0044AB",
            "rgb": [
                0,
                68,
                171
            ]
        },
        {
            "name": "Dark Red",
            "hex": "#9E0A0A",
            "rgb": [
                158,
                10,
                10
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#1E398A",
            "rgb": [
                30,
                57,
                138
            ]
        }
    ],
    "fonts": [
        {
            "name": "Roboto",
            "stack": "Roboto, sans-serif",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Google Fonts"
        },
        {
            "name": "Rubik",
            "stack": "\"Rubik\", sans-serif",
            "weights": [
                300,
                400,
                500,
                700
            ],
            "source": "Google Fonts"
        },
        {
            "name": "Lucida Console",
            "stack": "\"Lucida Console\", \"Monaco\", monospace",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Roboto Slab",
            "stack": "\"Roboto Slab\", sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Google Fonts"
        },
        {
            "name": "Space Mono",
            "stack": "'Space Mono'",
            "weights": [
                400
            ],
            "source": "Google Fonts"
        }
    ]
}

Other websites using Roboto as their main typeface

goo.gle

goo.gle · set in Roboto
Save1
google.rs

google.rs · set in Roboto
Save
google.com.my

google.com.my · set in Roboto
Save
google.se

google.se · set in Roboto
Save

Websites whose lead colour is closest to Raspberry Pi Foundation’s

Check Point Software

checkpoint.com · 3 days ago
Save
note（ノート）

note.mu · 6 days ago
Save
Allure

allure.com · 3 days ago
Save
Polygon.com

polygon.com · 5 days ago
Save

Captured from raspberrypi.org on 25 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Raspberry Pi Foundation; this guide describes the public website for reference.

Raspberry Pi Foundationstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Black

Cool Dark Grey

Colours

Light Crimson

Deep Crimson

Light Blue

Deep Slate Blue

Slate Blue

Dark Salmon

Khaki

Light Green

Medium Aqua Marine

Light Slate Blue

Dark Red

Slate Blue

Gradients

Roboto

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run raspberrypi.org?

Also set in Roboto

goo.gle

google.rs

google.com.my

google.se

Similar colours

Check Point Software

note（ノート）

Allure

Polygon.com

Title &
description