What font does steampowered.com use?

steampowered.com’s website uses one typeface: Motiva Sans (headings and body text), served from store.akamai.steamstatic.com.

What are steampowered.com’s brand colours?

The main colours on steampowered.com are Light Sky Blue (#67C1F5), Deep Steel Blue (#21658A), Dark Slate Grey (#17435C), Steel Blue (#417A9B), Dodger Blue (#1A9FFF) and Deep Yellow Green (#75B022).

What colour is steampowered.com’s text and background?

Body text is #969696 on a #FFFFFF background.

Where is steampowered.com’s logo from?

The logo shown in this guide was found on steampowered.com’s homepage. For official logo files and usage rules, check steampowered.com’s own brand or press page.

Is this steampowered.com’s official style guide?

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

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

Unofficial style guide

steampowered.comstyle guide

steampowered.com’s website (steampowered.com) uses Motiva Sans for its headings and body text. Its palette is led by Light Sky Blue (#67C1F5), Deep Steel Blue (#21658A) and Dark Slate Grey (#17435C), with #969696 text on #FFFFFF. Captured from the live site on 31 October 2026.

Website: steampowered.com
Typefaces: Motiva Sans
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 31 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the steampowered.com homepage on a desktop screen — Screenshot of steampowered.com on a 1440 px desktop screen, 31 Oct 2026.

Screenshot of the steampowered.com 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: Welcome to Steam; ● 16 / 60 characters
Meta description: Steam is the ultimate destination for playing, discussing, and creating games.; ● 78 / 160 characters
og:title: Steam Store
og:description: Steam is the ultimate destination for playing, discussing, and creating games.
Language: en
Theme colour: #171a21

In search results

steampowered.comhttps://store.steampowered.com/

Welcome to Steam

Steam is the ultimate destination for playing, discussing, and creating games.

When shared

steampowered.com

Steam Store

Steam is the ultimate destination for playing, discussing, and creating games.

Logo & favicons

Found as: image in the header. PNG, 184 × 52.

Logo

On white

On black

On Light Sky Blue

Favicons

1 found

256 px · ICO shortcut icon

Welcome to Steam

Light browser tab

Welcome to Steam

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

Colour

Balance

How much each colour is used

White 36.5%
Black 11.5%
Light Sky Blue 8.9%
Off White 7.1%
Cool Charcoal 5.1%
Deep Steel Blue 4.1%
Dark Slate Grey 3.3%
Steel Blue 3.1%
Dodger Blue 3.1%
Deep Yellow Green 2.8%
Light Steel Blue 2.6%
Cadet Blue 2.6%
Light Yellow Green 2.6%
Deep Olive Drab 2.6%
Midnight Blue 2.3%
Light Olive Drab 2%

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
2.96:1 Fail

On white
—

Text, background, border · .store_header_btn_gray a:hover, .winterSale2019_snow
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
7.10:1 AAA

On white
21.00:1 AAA

Background, text, border · inline style on <div>, .btn_grey_grey_outer_bevel
Off White

HEX

RGB

HSL

OKLCH

CMYK
1 0 0 13

On text
2.19:1 Fail

On white
1.35:1 Fail

Text, background · --text-color, .lunar_sale_supersavings_label .subtitle
Cool Charcoal

HEX

RGB

HSL

OKLCH

CMYK
24 15 0 69

On text
3.32:1 AA large

On white
9.81:1 AAA

Background, text, border · .DialogHBar, button.DialogButton

Colours

Brand colours and accents, most used first

Light Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
58 21 0 4

On text
1.48:1 Fail

On white
2.00:1 Fail

Background, text, border · .dselect_container button.trigger:hover, .btn_darkblue_white_innerfade:not(.btn_disabled):not(:disabled):not(.btn_active)
Deep Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
76 27 0 46

On text
2.16:1 Fail

On white
6.38:1 AA

Background · .btn_darkblue_white_innerfade > span, .btn_teal > span
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
75 27 0 64

On text
3.56:1 AA large

On white
10.53:1 AAA

Background · .btn_darkblue_white_innerfade, .btn_darkblue_white_innerfade > span
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
58 21 0 39

On text
1.58:1 Fail

On white
4.69:1 AA

Background, text, border · .btnv6_blue_hoverfade:not(.btn_disabled):not(:disabled):not(.btn_active):not(.ac, .tab_page_link_prev a:hover
Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
90 38 0 0

On text
1.05:1 Fail

On white
2.82:1 Fail

Background, text, graphic · a._2U8ldyeSqVI-.uS6XjTP-SEk-, a._2U8ldyeSqVI-.NEUWLuwsNfc-
Deep Yellow Green

HEX

RGB

HSL

OKLCH

CMYK
34 0 81 31

On text
1.13:1 Fail

On white
2.63:1 Fail

Background · .btn_green_steamui > span, .btn_grey_steamui > span
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
75 27 0 26

On text
1.31:1 Fail

On white
3.87:1 AA large

Background · .btn_darkblue_white_innerfade, .btnv6_blue_blue_innerfade
Cadet Blue

HEX

RGB

HSL

OKLCH

CMYK
56 13 0 36

On text
1.24:1 Fail

On white
3.66:1 AA large

Background · .btn_teal.btn_active > span, .btn_royal_blue.btn_active > span
Light Yellow Green

HEX

RGB

HSL

OKLCH

CMYK
34 0 81 16

On text
1.66:1 Fail

On white
1.78:1 Fail

Background · .btn_green_steamui.btn_active > span, .btn_green_steamui:not(.btn_disabled):not(:disabled):not(.btn_active):not(.activ
Deep Olive Drab

HEX

RGB

HSL

OKLCH

CMYK
21 0 97 40

On text
1.11:1 Fail

On white
3.30:1 AA large

Background · .btn_green_white_innerfade > span, .btnv6_green_white_innerfade
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
52 29 0 78

On text
5.05:1 AA

On white
14.92:1 AAA

Background, text, border · .btnv6_grey_black, .game_hover_box h4.hover_title
Light Olive Drab

HEX

RGB

HSL

OKLCH

CMYK
36 0 80 35

On text
1.00:1 Fail

On white
2.96:1 Fail

Background · .btn_green_steamui.btn_active > span, .btn_green_steamui:not(.btn_disabled):not(:disabled):not(.btn_active):not(.activ

Gradients

linear-gradient( top, rgba(33,101,138,1) 5%, rgba(23,67,92,1) 95%)
linear-gradient( to bottom, rgba(33,101,138,1) 5%, rgba(23,67,92,1) 95%)
linear-gradient( top, rgba(72,143,164,1) 5%, rgba(40,83,95,1) 95%)

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.

Motiva Sans

Aa 100 Aa 900

Motiva Sans

Served from store.akamai.steamstatic.com · weights 100, 200, 300, 400, 500, 600, 700, 900 · headings, buttons, body · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 1 26px / normal weight 400 · Motiva Sans

steampowered.com

Heading 2 26px / 20px weight 200 · none · Motiva Sans

Welcome to Steam

Heading 3 14px / 19px weight 300 · Motiva Sans

Welcome to Steam

Body — Motiva Sans

Steam is the ultimate destination for playing, discussing, and creating games.

Paragraph 13px / 19px

Steam is the ultimate destination for playing, discussing, and creating games.

Button — Motiva Sans

Get started

Link 13px / 19px weight 700 · Motiva Sans

Sizes in use

Most common across the site

18pxline 22px · 14 rules
16pxline 20px · 35 rules
15pxline 30px · 17 rules
14pxline 18px · 77 rules
13pxline normal · 48 rules
12pxline 16px · 65 rules
11pxline 13px · 46 rules
10pxline normal · 30 rules

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_green_white_innerfade · #A4D007 · radius 2px

Corner radius

2px · 102×
3px · 48×
4px · 17×
1px · 10×
50% · 8×
6px · 5×

Shadows

0 0 3px #000
0 0 12px #000000
0 0 0 #000000, 0 0 0 #0d0d0d
0 10px 32px #000000ab

Layout

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

Grid

Breakpoints

420

500

600

910

1200

1245

1280

1325

On a scale of 0 to 1440 px.

Content widths (max-width)

1600 px

1200 px

940 px

900 px

374 px

300 px

Notes

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

Notes

● FineThe title is 16 characters, short enough to show in full in search results.
▲ CheckBody text (#969696 on #FFFFFF) has a contrast of 2.96:1, under the 4.5:1 WCAG asks for.

Questions

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

Questions

What font does steampowered.com use?: steampowered.com’s website uses one typeface: Motiva Sans (headings and body text), served from store.akamai.steamstatic.com.
What are steampowered.com’s brand colours?: The main colours on steampowered.com are Light Sky Blue (#67C1F5), Deep Steel Blue (#21658A), Dark Slate Grey (#17435C), Steel Blue (#417A9B), Dodger Blue (#1A9FFF) and Deep Yellow Green (#75B022).
What colour is steampowered.com’s text and background?: Body text is #969696 on a #FFFFFF background.
Where is steampowered.com’s logo from?: The logo shown in this guide was found on steampowered.com’s homepage. For official logo files and usage rules, check steampowered.com’s own brand or press page.
Is this steampowered.com’s official style guide?: No. SiteStyleGuide made it from steampowered.com’s public web pages on 31 October 2026, and isn’t affiliated with steampowered.com. 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

steampowered-com-tokens.css

Download

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

/* steampowered.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/steampowered.com) */
:root {
  /* Colours */
  --text: #969696;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-off-white: #DCDEDF;
  --colour-cool-charcoal: #3D4450;
  --colour-light-sky-blue: #67C1F5;
  --colour-deep-steel-blue: #21658A;
  --colour-dark-slate-grey: #17435C;
  --colour-steel-blue: #417A9B;
  --colour-dodger-blue: #1A9FFF;
  --colour-deep-yellow-green: #75B022;
  --colour-light-steel-blue: #2F89BC;
  --colour-cadet-blue: #488FA4;
  --colour-light-yellow-green: #8ED629;
  --colour-deep-olive-drab: #799905;
  --colour-midnight-blue: #1B2838;
  --colour-light-olive-drab: #6AA621;
  --gradient-1: linear-gradient( top, rgba(33,101,138,1) 5%, rgba(23,67,92,1) 95%);
  --gradient-2: linear-gradient( to bottom, rgba(33,101,138,1) 5%, rgba(23,67,92,1) 95%);
  --gradient-3: linear-gradient( top, rgba(72,143,164,1) 5%, rgba(40,83,95,1) 95%);

  /* Typefaces */
  --font-headings: 'Motiva Sans', sans-serif;
  --font-buttons: 'Motiva Sans', sans-serif;
  --font-body: 'Motiva Sans', sans-serif;

  /* Type scale */
  --text-h1: 26px;
  --leading-h1: normal;
  --text-h2: 26px;
  --leading-h2: 20px;
  --text-h3: 14px;
  --leading-h3: 19px;
  --text-p: 13px;
  --leading-p: 19px;
  --text-a: 13px;
  --leading-a: 19px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 420px;
  --breakpoint-2: 500px;
  --breakpoint-3: 600px;
  --breakpoint-4: 910px;
  --breakpoint-5: 1200px;
  --breakpoint-6: 1245px;
  --breakpoint-7: 1280px;
  --breakpoint-8: 1325px;
  --max-width-1: 1600px;
  --max-width-2: 1200px;
  --max-width-3: 940px;
  --max-width-4: 900px;
  --max-width-5: 374px;
  --max-width-6: 300px;
}

{
    "site": "steampowered.com",
    "source": "https://sitestyleguide.com/steampowered.com",
    "text": "#969696",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Off White",
            "hex": "#DCDEDF",
            "rgb": [
                220,
                222,
                223
            ]
        },
        {
            "name": "Cool Charcoal",
            "hex": "#3D4450",
            "rgb": [
                61,
                68,
                80
            ]
        },
        {
            "name": "Light Sky Blue",
            "hex": "#67C1F5",
            "rgb": [
                103,
                193,
                245
            ]
        },
        {
            "name": "Deep Steel Blue",
            "hex": "#21658A",
            "rgb": [
                33,
                101,
                138
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#17435C",
            "rgb": [
                23,
                67,
                92
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#417A9B",
            "rgb": [
                65,
                122,
                155
            ]
        },
        {
            "name": "Dodger Blue",
            "hex": "#1A9FFF",
            "rgb": [
                26,
                159,
                255
            ]
        },
        {
            "name": "Deep Yellow Green",
            "hex": "#75B022",
            "rgb": [
                117,
                176,
                34
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#2F89BC",
            "rgb": [
                47,
                137,
                188
            ]
        },
        {
            "name": "Cadet Blue",
            "hex": "#488FA4",
            "rgb": [
                72,
                143,
                164
            ]
        },
        {
            "name": "Light Yellow Green",
            "hex": "#8ED629",
            "rgb": [
                142,
                214,
                41
            ]
        },
        {
            "name": "Deep Olive Drab",
            "hex": "#799905",
            "rgb": [
                121,
                153,
                5
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#1B2838",
            "rgb": [
                27,
                40,
                56
            ]
        },
        {
            "name": "Light Olive Drab",
            "hex": "#6AA621",
            "rgb": [
                106,
                166,
                33
            ]
        }
    ],
    "fonts": [
        {
            "name": "Motiva Sans",
            "stack": "\"Motiva Sans\", Sans-serif",
            "weights": [
                100,
                200,
                300,
                400,
                500,
                600,
                700,
                900
            ],
            "source": "Served from store.akamai.steamstatic.com"
        }
    ]
}

Websites whose lead colour is closest to steampowered.com’s

reacts.ru

reacts.ru · 6 days ago
Save
qunar.com

qunar.com · 15 hours ago
Save
Movies Anywhere

moviesanywhere.com · 3 days ago
Save
Snapchat

snapchat.com · 3 days ago
Save

Captured from steampowered.com on 31 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by steampowered.com; this guide describes the public website for reference.

steampowered.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Off White

Cool Charcoal

Colours

Light Sky Blue

Deep Steel Blue

Dark Slate Grey

Steel Blue

Dodger Blue

Deep Yellow Green

Light Steel Blue

Cadet Blue

Light Yellow Green

Deep Olive Drab

Midnight Blue

Light Olive Drab

Gradients

Motiva Sans

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run steampowered.com?

Similar colours

reacts.ru

qunar.com

Movies Anywhere

Snapchat

Title &
description