What font does Metalab use?

Metalab’s website uses three typefaces: Basis Grotesque Pro (headings and body text), self-hosted; PP Eiko, self-hosted; ABC Diatype Mono, self-hosted.

What are Metalab’s brand colours?

The main colours on metalab.com are Slate Blue (#584DFF), Salmon (#FF6060), Fire Brick (#B60000), Orange Red (#FF3C00), Red (#FF0000) and Green (#008000).

What colour is Metalab’s text and background?

Body text is #FFFFFF on a #000000 background.

Is this Metalab’s official style guide?

No. SiteStyleGuide made it from metalab.com’s public web pages on 26 October 2026, and isn’t affiliated with Metalab. Members can refresh a guide after 90 days to pick up changes.

Metalab Style Guide: Colours, Fonts & Logo

Identity & metadata

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

Title &
description

Page title: Metalab | We make interfaces; ● 28 / 60 characters
Meta description: Metalab helps some of the world's top companies — like Slack and Google — design, build, and ship amazing products and services.; ● 128 / 160 characters
Site name: Metalab | We make interfaces
og:title: Metalab | We make interfaces
og:description: Metalab helps some of the world's top companies — like Slack and Google — design, build, and ship amazing products and services.
Language: en

In search results

Metalab | We make interfaceshttps://www.metalab.com/

Metalab | We make interfaces

Metalab helps some of the world's top companies — like Slack and Google — design, build, and ship amazing products and services.

When shared

metalab.com

Metalab | We make interfaces

Metalab helps some of the world's top companies — like Slack and Google — design, build, and ship amazing pro…

Back to top ↑

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

8 found

512 px · PNG icon
180 px · WEBP icon
96 px · WEBP icon
72 px · WEBP apple-touch-icon
60 px · WEBP apple-touch-icon
57 px · WEBP apple-touch-icon
32 px · WEBP icon
16 px · WEBP icon

Metalab | We make interfaces

Light browser tab

Metalab | We make interfaces

Dark browser tab

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

Colour

Balance

How much each colour is used

White 33.2%
Black 20.4%
Slate Blue 15.9%
Cool Grey 8.1%
Charcoal 8%
Salmon 6.6%
Fire Brick 6.5%
Orange Red 0.8%
Red 0.3%
Green 0.3%

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
—

On white
—

Text, background, border · --fg, --text-bold
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
21.00:1 AAA

On white
21.00:1 AAA

Background, text, border · --fg-invert, --text-bold-invert
Cool Grey

HEX

RGB

HSL

OKLCH

CMYK
1 3 0 52

On text
4.48:1 AA large

On white
4.48:1 AA large

Text · --text-subtle, .BlogArticle_subheading__CZHmt
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
4 6 0 80

On text
13.12:1 AAA

On white
13.12:1 AAA

Background, border, text · --text-regular-invert, --border-subtle

Colours

Brand colours and accents, most used first

Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
65 70 0 0

On text
5.36:1 AA

On white
5.36:1 AA

Background, border, text · --border-highlight, --border-highlight-invert
Salmon

HEX

RGB

HSL

OKLCH

CMYK
0 62 62 0

On text
2.96:1 Fail

On white
2.96:1 Fail

Text, border · --text-error, --border-error
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 29

On text
7.03:1 AAA

On white
7.03:1 AAA

Used · --text-error-invert, --border-error-invert
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 76 100 0

On text
3.56:1 AA large

On white
3.56:1 AA large

Background, text, border · .InteractiveTypekit_shadowToggleKnob__89h3t, .InteractiveTypekit_readoutOptionSelected__0E_tC
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 0

On text
4.00:1 AA large

On white
4.00:1 AA large

Background, text · .PreviewButton_dot__acrvz, .EmailSignup_EmailSignup__XcQ4Q .EmailSignup_error__HZB9C
Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 100 50

On text
5.14:1 AA

On white
5.14:1 AA

Background, text · .PreviewButton_isPreview__OpIA5 .PreviewButton_dot__acrvz, .ContactForm_success__RpoyB

Gradients

linear-gradient(to right,transparent,transparent),linear-gradient(to right,#000,#000)
linear-gradient(270deg,rgba(0,0,0,.5),transparent)
linear-gradient(90deg,rgba(0,0,0,.5),transparent)

Dark mode

Switched on by the site

White

#FFFFFF · --fg
Black

#000000 · --fg-invert
Slate Blue

#584DFF · --border-highlight
Charcoal

#313033 · --text-regular-invert
Salmon

#FF6060 · --text-error
Fire Brick

#B60000 · --text-error-invert
Cool Light Grey

#CAC5CA · --text-regular
Cool Grey

#79767A · --text-subtle
Cool Dark Grey

#605D62 · --text-subtle-invert
Light Grey

#C7C7C7 · --border-subtle-invert
Near Black

#171717 · --bg-subtle
Off White

#EDF1F5 · --bg-subtle-invert

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.

Basis Grotesque Pro

Aa 300 Aa 500

Basis Grotesque Pro

Self-hosted · weights 300, 350, 400, 500 · headings, buttons, body · shown in a stand-in if you don’t have it

Aa 240 Aa 400

PP Eiko

Self-hosted · weights 240, 300, 400 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400

ABC Diatype Mono

Self-hosted · weights 400 · 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.8rem · 28 px / 116% weight 400 · Basis Grotesque Pro

Metalab

Heading 2 2.4rem · 24 px / 118% weight 400 · Basis Grotesque Pro

Metalab | We make interfaces

Heading 3 2rem · 20 px / 120% weight 400 · Basis Grotesque Pro

Metalab | We make interfaces

Heading 4 1.6rem · 16 px / 122% weight 500 · Basis Grotesque Pro

Metalab | We make interfaces

Body 1.6rem · 16 px Basis Grotesque Pro

Metalab helps some of the world's top companies — like Slack and Google — design, build, and ship amazing products and services.

Paragraph 1.4rem · 14 px / 140% weight 400 · Basis Grotesque Pro

Metalab helps some of the world's top companies — like Slack and Google — design, build, and ship amazing products and services.

Sizes in use

Most common across the site

44pxline 118.2% · 15 rules
36pxline 120% · 11 rules
24pxline 120% · 13 rules
22pxline 120% · 7 rules
20pxline 120% · 6 rules
18pxline 130% · 14 rules
16pxline 2 · 9 rules
14pxline 140% · 70 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

.Button_Button__qQTgU.Button_isFilled__lDrdi.Button_isHighlightedColor__bTvn7 · #584DFF

Corner radius

50% · 5×
.8rem · 3×
5rem · 2×
100rem · 1×
.2rem · 1×
3rem · 1×

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

768

967

1200

1512

1800

On a scale of 0 to 1800 px.

Content widths (max-width)

928 px

800 px

720 px

640 px

400 px

366 px

Back to top ↑

Notes

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

Notes

● FineThe title is 28 characters, short enough to show in full in search results.
▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.

Back to top ↑

Questions

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

Questions

What font does Metalab use?: Metalab’s website uses three typefaces: Basis Grotesque Pro (headings and body text), self-hosted; PP Eiko, self-hosted; ABC Diatype Mono, self-hosted.
What are Metalab’s brand colours?: The main colours on metalab.com are Slate Blue (#584DFF), Salmon (#FF6060), Fire Brick (#B60000), Orange Red (#FF3C00), Red (#FF0000) and Green (#008000).
What colour is Metalab’s text and background?: Body text is #FFFFFF on a #000000 background.
Is this Metalab’s official style guide?: No. SiteStyleGuide made it from metalab.com’s public web pages on 26 October 2026, and isn’t affiliated with Metalab. 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

metalab-com-tokens.css

Download

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

/* metalab.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/metalab.com) */
:root {
  /* Colours */
  --text: #FFFFFF;
  --background: #000000;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-cool-grey: #79767A;
  --colour-charcoal: #313033;
  --colour-slate-blue: #584DFF;
  --colour-salmon: #FF6060;
  --colour-fire-brick: #B60000;
  --colour-orange-red: #FF3C00;
  --colour-red: #FF0000;
  --colour-green: #008000;
  --gradient-1: linear-gradient(to right,transparent,transparent),linear-gradient(to right,#000,#000);
  --gradient-2: linear-gradient(270deg,rgba(0,0,0,.5),transparent);
  --gradient-3: linear-gradient(90deg,rgba(0,0,0,.5),transparent);

  /* Typefaces */
  --font-headings: 'Basis Grotesque Pro', sans-serif;
  --font-buttons: 'Basis Grotesque Pro', sans-serif;
  --font-body: 'Basis Grotesque Pro', sans-serif;
  --font-other: 'ABC Diatype Mono', monospace;

  /* Type scale */
  --text-h1: 2.8rem;
  --leading-h1: 116%;
  --text-h2: 2.4rem;
  --leading-h2: 118%;
  --text-h3: 2rem;
  --leading-h3: 120%;
  --text-h4: 1.6rem;
  --leading-h4: 122%;
  --text-body: 1.6rem;
  --text-p: 1.4rem;
  --leading-p: 140%;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 768px;
  --breakpoint-2: 967px;
  --breakpoint-3: 1200px;
  --breakpoint-4: 1512px;
  --breakpoint-5: 1800px;
  --max-width-1: 928px;
  --max-width-2: 800px;
  --max-width-3: 720px;
  --max-width-4: 640px;
  --max-width-5: 400px;
  --max-width-6: 366px;
}

{
    "site": "metalab.com",
    "source": "https://sitestyleguide.com/metalab.com",
    "text": "#FFFFFF",
    "background": "#000000",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Cool Grey",
            "hex": "#79767A",
            "rgb": [
                121,
                118,
                122
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#313033",
            "rgb": [
                49,
                48,
                51
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#584DFF",
            "rgb": [
                88,
                77,
                255
            ]
        },
        {
            "name": "Salmon",
            "hex": "#FF6060",
            "rgb": [
                255,
                96,
                96
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#B60000",
            "rgb": [
                182,
                0,
                0
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF3C00",
            "rgb": [
                255,
                60,
                0
            ]
        },
        {
            "name": "Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        },
        {
            "name": "Green",
            "hex": "#008000",
            "rgb": [
                0,
                128,
                0
            ]
        }
    ],
    "fonts": [
        {
            "name": "Basis Grotesque Pro",
            "stack": "Basis Grotesque Pro, sans-serif",
            "weights": [
                300,
                350,
                400,
                500
            ],
            "source": "Self-hosted"
        },
        {
            "name": "PP Eiko",
            "stack": "PP Eiko, sans-serif",
            "weights": [
                240,
                300,
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "ABC Diatype Mono",
            "stack": "ABC Diatype Mono, monospace",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

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 metalab.com?

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.

<a href="https://sitestyleguide.com/metalab.com" title="Metalab 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 ↑

Metalabstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Cool Grey

Charcoal

Colours

Slate Blue

Salmon

Fire Brick

Orange Red

Red

Green

Gradients

Dark mode

Basis Grotesque Pro

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

NCERT Solutions

WordPress.com

WordPress.org

SiteGround

Metalabstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Cool Grey

Charcoal

Colours

Slate Blue

Salmon

Fire Brick

Orange Red

Red

Green

Gradients

Dark mode

Basis Grotesque Pro

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run metalab.com?

Similar colours

NCERT Solutions

WordPress.com

WordPress.org

SiteGround

Title &
description