What font does Play For Good! use?

Play For Good!’s website uses one typeface: Angus (headings and body text), served from storage.googleapis.com.

What are Play For Good!’s brand colours?

The main colours on play.gl are Steel Blue (#1E95CC), Medium Aqua Marine (#1ECC95), Orange (#FFAE45), Tomato (#FF6C45), Deep Pink (#FF458B) and Yellow (#FFF445).

What colour is Play For Good!’s text and background?

Body text is #000000 on a #FFFFFF background.

Is this Play For Good!’s official style guide?

No. SiteStyleGuide made it from play.gl’s public web pages on 27 October 2026, and isn’t affiliated with Play For Good!. Members can refresh a guide after 90 days to pick up changes.

Play For Good! 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: Galeries Lafayette - Play for Good!; ● 35 / 60 characters
Meta description: Découvrez le nouveau jeu fun Go for Good des Galeries Lafayette !; ● 65 / 160 characters
Site name: Galeries Lafayette - Play For Good!
og:title: Galeries Lafayette - Play For Good!
og:description: Découvrez le nouveau jeu fun Go for Good des Galeries Lafayette !
Language: fr
Theme colour: #FFFFFF

In search results

Galeries Lafayette - Play For Good!https://play.gl/

Galeries Lafayette - Play for Good!

Découvrez le nouveau jeu fun Go for Good des Galeries Lafayette !

When shared

The image Play For Good! shares with links

play.gl

Galeries Lafayette - Play For Good!

Découvrez le nouveau jeu fun Go for Good des Galeries Lafayette !

Back to top ↑

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

8 found

180 px · PNG apple-touch-icon-precomposed
167 px · PNG apple-touch-icon-precomposed
152 px · PNG apple-touch-icon-precomposed
144 px · PNG apple-touch-icon-precomposed
120 px · PNG apple-touch-icon-precomposed
114 px · PNG apple-touch-icon-precomposed
60 px · PNG apple-touch-icon-precomposed
57 px · PNG apple-touch-icon-precomposed

Galeries Lafayette - Play for Good!

Light browser tab

Galeries Lafayette - Play for Good!

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 (#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.2%
Black 17.1%
Steel Blue 8.6%
Medium Aqua Marine 5.1%
Orange 5.1%
Tomato 5.1%
Deep Pink 5.1%
Yellow 4.1%
Dodger Blue 4%
Charcoal 3.7%
Royal Blue 3.4%
Light Coral 2.7%
Off White 1.8%

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, graphic · .button::after, .button>:first-child
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, border, graphic · html, .button__icon svg
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
1.66:1 Fail

On white
12.63:1 AAA

Text, background · .stats-bar, .stats-text
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 7

On text
18.10:1 AAA

On white
1.16:1 Fail

Background · .stats-container, .rotate-device

Colours

Brand colours and accents, most used first

Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
85 27 0 20

On text
6.23:1 AA

On white
3.37:1 AA large

Background, graphic · .button--twitter>:first-child, .extra-jump .bubble-wrapper
Medium Aqua Marine

HEX

RGB

HSL

OKLCH

CMYK
85 0 27 20

On text
10.13:1 AAA

On white
2.07:1 Fail

Background · .extra-jump .bubble-wrapper, .extra-jump .bubble-wrapper.wrapper--gl:nth-of-type(3n+2)
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 32 73 0

On text
11.39:1 AAA

On white
1.84:1 Fail

Background · .extra-jump .bubble-wrapper, .extra-jump .bubble-wrapper.wrapper--gl:nth-of-type(3n+0)
Tomato

HEX

RGB

HSL

OKLCH

CMYK
0 58 73 0

On text
7.48:1 AAA

On white
2.81:1 Fail

Background · .extra-jump .bubble-wrapper, .extra-jump .bubble-wrapper.wrapper--gl:nth-of-type(3n+1)
Deep Pink

HEX

RGB

HSL

OKLCH

CMYK
0 73 45 0

On text
6.48:1 AA

On white
3.24:1 AA large

Background · .extra-jump .bubble-wrapper, .extra-jump .bubble-wrapper.wrapper--gl:nth-of-type(3n+0)
Yellow

HEX

RGB

HSL

OKLCH

CMYK
0 4 73 0

On text
18.28:1 AAA

On white
1.15:1 Fail

Background · .extra-jump .bubble-wrapper, .frame__border--top::after
Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
100 38 0 0

On text
7.27:1 AAA

On white
2.89:1 Fail

Background · .button--opt-in>:first-child, .button:hover>:first-child
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
61 41 0 40

On text
3.07:1 AA large

On white
6.84:1 AA

Background, graphic · .button--facebook>:first-child, .button--facebook:hover svg
Light Coral

HEX

RGB

HSL

OKLCH

CMYK
0 65 58 0

On text
6.86:1 AA

On white
3.06:1 AA large

Background · .button--cookies::after

Gradients

linear-gradient(-65deg,#1e95cc 4%,#1ecc95 13%,#fff445 28%,#ffae45 50%,#ff6c45 74%,#ff458b 100%)
linear-gradient(0deg,#1e95cc 4%,#1ecc95 13%,#fff445 28%,#ffae45 50%,#ff6c45 74%,#ff458b 100%)
linear-gradient(-65deg,#1e95cc 0%,#1ecc95 22%,#fff445 46%,#ffae45 69%,#ff6c45 85%,#ff458b 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.

Angus

Aa 400 Aa 900

Angus

Served from storage.googleapis.com · weights 400, 700, 900 · body · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS · root 10 px

Body 25px

Découvrez le nouveau jeu fun Go for Good des Galeries Lafayette !

Sizes in use

Most common across the site

50px1 rules
35px1 rules
30px1 rules
18pxline 3.6em · 1 rules
16px1 rules
12pxline 1.5 · 2 rules
11px1 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--opt-in>:first-child · #009DFF

Corner radius

2em · 3×
1em · 2×
40px · 1×
100px · 1×
100% · 1×

Shadows

0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)

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

320

517

767

768

991

992

1199

1200

On a scale of 0 to 1440 px.

Content widths (max-width)

720 px

300 px

Back to top ↑

Notes

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

Notes

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

Back to top ↑

Questions

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

Questions

What font does Play For Good! use?: Play For Good!’s website uses one typeface: Angus (headings and body text), served from storage.googleapis.com.
What are Play For Good!’s brand colours?: The main colours on play.gl are Steel Blue (#1E95CC), Medium Aqua Marine (#1ECC95), Orange (#FFAE45), Tomato (#FF6C45), Deep Pink (#FF458B) and Yellow (#FFF445).
What colour is Play For Good!’s text and background?: Body text is #000000 on a #FFFFFF background.
Is this Play For Good!’s official style guide?: No. SiteStyleGuide made it from play.gl’s public web pages on 27 October 2026, and isn’t affiliated with Play For Good!. 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

play-gl-tokens.css

Download

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

/* play.gl design tokens, from SiteStyleGuide (https://sitestyleguide.com/play.gl) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-charcoal: #333333;
  --colour-off-white: #EEEEEE;
  --colour-steel-blue: #1E95CC;
  --colour-medium-aqua-marine: #1ECC95;
  --colour-orange: #FFAE45;
  --colour-tomato: #FF6C45;
  --colour-deep-pink: #FF458B;
  --colour-yellow: #FFF445;
  --colour-dodger-blue: #009DFF;
  --colour-royal-blue: #3B5998;
  --colour-light-coral: #FF586A;
  --gradient-1: linear-gradient(-65deg,#1e95cc 4%,#1ecc95 13%,#fff445 28%,#ffae45 50%,#ff6c45 74%,#ff458b 100%);
  --gradient-2: linear-gradient(0deg,#1e95cc 4%,#1ecc95 13%,#fff445 28%,#ffae45 50%,#ff6c45 74%,#ff458b 100%);
  --gradient-3: linear-gradient(-65deg,#1e95cc 0%,#1ecc95 22%,#fff445 46%,#ffae45 69%,#ff6c45 85%,#ff458b 100%);

  /* Typefaces */
  --font-body: 'Angus', 'Arial', 'Helvetica', sans-serif;

  /* Type scale */
  --text-body: 25px;

  /* Shape */
  --radius-1: 2em;
  --radius-2: 1em;
  --radius-3: 40px;
  --radius-4: 100px;
  --radius-5: 100%;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 320px;
  --breakpoint-2: 517px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 991px;
  --breakpoint-6: 992px;
  --breakpoint-7: 1199px;
  --breakpoint-8: 1200px;
  --max-width-1: 720px;
  --max-width-2: 300px;
}

{
    "site": "play.gl",
    "source": "https://sitestyleguide.com/play.gl",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Off White",
            "hex": "#EEEEEE",
            "rgb": [
                238,
                238,
                238
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#1E95CC",
            "rgb": [
                30,
                149,
                204
            ]
        },
        {
            "name": "Medium Aqua Marine",
            "hex": "#1ECC95",
            "rgb": [
                30,
                204,
                149
            ]
        },
        {
            "name": "Orange",
            "hex": "#FFAE45",
            "rgb": [
                255,
                174,
                69
            ]
        },
        {
            "name": "Tomato",
            "hex": "#FF6C45",
            "rgb": [
                255,
                108,
                69
            ]
        },
        {
            "name": "Deep Pink",
            "hex": "#FF458B",
            "rgb": [
                255,
                69,
                139
            ]
        },
        {
            "name": "Yellow",
            "hex": "#FFF445",
            "rgb": [
                255,
                244,
                69
            ]
        },
        {
            "name": "Dodger Blue",
            "hex": "#009DFF",
            "rgb": [
                0,
                157,
                255
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#3B5998",
            "rgb": [
                59,
                89,
                152
            ]
        },
        {
            "name": "Light Coral",
            "hex": "#FF586A",
            "rgb": [
                255,
                88,
                106
            ]
        }
    ],
    "fonts": [
        {
            "name": "Angus",
            "stack": "\"Angus\", Arial, Helvetica, sans-serif",
            "weights": [
                400,
                700,
                900
            ],
            "source": "Served from storage.googleapis.com"
        }
    ]
}

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 play.gl?

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/play.gl" title="Play For Good! 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 ↑

Play For Good!style guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Charcoal

Off White

Colours

Steel Blue

Medium Aqua Marine

Orange

Tomato

Deep Pink

Yellow

Dodger Blue

Royal Blue

Light Coral

Gradients

Angus

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Instructure

Automattic

آپارات

Calculatio

Play For Good!style guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Charcoal

Off White

Colours

Steel Blue

Medium Aqua Marine

Orange

Tomato

Deep Pink

Yellow

Dodger Blue

Royal Blue

Light Coral

Gradients

Angus

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run play.gl?

Similar colours

Instructure

Automattic

آپارات

Calculatio

Title &
description