What font does Scoop.it use?

Scoop.it’s website uses two typefaces: Open Sans (headings and body text), self-hosted; Geist Mono, self-hosted.

What are Scoop.it’s brand colours?

The main colours on scoop.it are Light Sea Green (#28BBBB), Medium Violet Red (#B627A1), Orange Red (#FF6221), Pale Turquoise (#C4F4F4), Gold (#FFCC01) and Deep Sea Green (#15A4A4).

What colour is Scoop.it’s text and background?

Body text is #171717 on a #FFFFFF background.

Is this Scoop.it’s official style guide?

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

Scoop.it 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: Scoop.it - Select, organize, share the best content; ● 51 / 60 characters
Meta description: Scoop.it is a simple and flexible content curation platform that allows you to engage your external or internal audiences with relevant information organized by themes.; ▲ 168 / 160 characters

In search results

Scoop.ithttps://www.scoop.it/en/

Scoop.it - Select, organize, share the best content

Scoop.it is a simple and flexible content curation platform that allows you to engage your external or internal audiences with relevant information organized by …

When shared

No og:image, so no picture

scoop.it

Scoop.it - Select, organize, share the best content

Scoop.it is a simple and flexible content curation platform that allows you to engage your external or intern…

Back to top ↑

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

3 found

369 px · SVG icon
96 px · PNG icon
96 px · ICO favicon.ico

Scoop.it - Select, organize, share the best content

Light browser tab

Scoop.it - Select, organize, share the best content

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

Colour

Balance

How much each colour is used

White 28.8%
Off White 15.8%
Light Grey 10%
Dark Grey 9.7%
Light Sea Green 9.2%
Medium Violet Red 7.5%
Orange Red 5.8%
Pale Turquoise 3.2%
Gold 3.2%
Deep Sea Green 1.6%
Dark Magenta 1.5%
Thistle 1.2%
Peach Puff 1.2%
Lemon Chiffon 1.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
17.93:1 AAA

On white
—

Background, text · .AnimatedLaptop-module-scss-module__OK9k8W__laptop .AnimatedLaptop-module-scss-m, body
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 10

On text
14.23:1 AAA

On white
1.26:1 Fail

Background, border · .AnimatedLaptop-module-scss-module__OK9k8W__laptop .AnimatedLaptop-module-scss-m, .bg-gray-200
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 19

On text
11.51:1 AAA

On white
1.56:1 Fail

Border, background · .AnimatedLaptop-module-scss-module__OK9k8W__laptop .AnimatedLaptop-module-scss-m
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
4 3 0 69

On text
2.12:1 Fail

On white
8.46:1 AAA

Text, background, border · .sf-heading, .header-menu a

Colours

Brand colours and accents, most used first

Light Sea Green

HEX

RGB

HSL

OKLCH

CMYK
79 0 0 27

On text
7.61:1 AAA

On white
2.36:1 Fail

Background, text · inline style on <div>, a
Medium Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 79 12 29

On text
3.24:1 AA large

On white
5.54:1 AA

Background, text · .button.button-lp-purple, inline style on <div>
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 62 87 0

On text
5.99:1 AA

On white
2.99:1 Fail

Background, text · inline style on <div>, --color-mw-orange
Pale Turquoise

HEX

RGB

HSL

OKLCH

CMYK
20 0 0 4

On text
15.02:1 AAA

On white
1.19:1 Fail

Background · .bg-mw-teal-light, --color-mw-teal-light
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 20 100 0

On text
11.86:1 AAA

On white
1.51:1 Fail

Background · .bg-mw-yellow, .AnimatedLaptop-module-scss-module__OK9k8W__shape_2
Deep Sea Green

HEX

RGB

HSL

OKLCH

CMYK
87 0 0 36

On text
5.87:1 AA

On white
3.05:1 AA large

Text, background · --color-mw-teal-dark, .sf-footer a:hover
Dark Magenta

HEX

RGB

HSL

OKLCH

CMYK
0 78 9 44

On text
2.27:1 Fail

On white
7.89:1 AAA

Background · .button.button-lp-purple:hover, --color-mw-purple-dark
Thistle

HEX

RGB

HSL

OKLCH

CMYK
0 12 2 6

On text
13.09:1 AAA

On white
1.37:1 Fail

Background · --color-mw-purple-light, inline style on <div>
Peach Puff

HEX

RGB

HSL

OKLCH

CMYK
0 13 20 0

On text
14.06:1 AAA

On white
1.28:1 Fail

Background · --color-mw-orange-light, inline style on <div>
Lemon Chiffon

HEX

RGB

HSL

OKLCH

CMYK
0 0 19 1

On text
17.02:1 AAA

On white
1.05:1 Fail

Background · --color-mw-yellow-light, inline style on <div>

Gradients

linear-gradient(135deg,#fff 0%,#f3f3f3 50%,#ededed 51%,#fff 100%)
linear-gradient(initial)
radial-gradient(#cfcfcf 35%,#0000 36%)

Dark mode

When the device is set to dark

Aa Light · #171717 on #FFFFFF

Aa Dark · #EDEDED on #0A0A0A · 16.91:1 AAA

Black

#0A0A0A · --background
Off White

#EDEDED · --foreground
Cool Grey

#9F9FA9

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.

Open Sans

Aa 300 Aa 800

Open Sans

Self-hosted · weights 300, 800 · shown in a stand-in if you don’t have it

Aa 100 Aa 900

Geist Mono

Self-hosted · weights 100, 900 · shown in a stand-in if you don’t have it

Aa 400

Segoe UI

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

Aa 400

Helvetica

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

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

Type scale

From the site’s CSS · root 14 px

Body 1rem · 14 px / initial

Scoop.it is a simple and flexible content curation platform that allows you to engage your external or internal audiences with relevant inf…

Small 80%

Scoop.it is a simple and flexible content curation platform that allows you to engage your external or internal audiences with relevant inf…

Sizes in use

Most common across the site

42pxline initial · 1 rules
26pxline initial · 1 rules
21pxline initial · 2 rules
18pxline initial · 1 rules
16pxline initial · 2 rules
14pxline initial · 5 rules
12pxline initial · 3 rules
10px1 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-lp-purple · #B627A1 · radius 1.5rem

Link

Read our latest news today.

a · #28BBBB

Corner radius

50% · 6×
1000px · 4×
1.5rem · 2×
1rem · 1×
2rem · 1×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000
0 3px 15px #0003
0 4px 6px -1px #0000001a
0 0 40px #0000001a

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

620

640

768

960

1024

1200

1280

1536

On a scale of 0 to 1536 px.

Content widths (max-width)

1536 px

1500 px

1280 px

1024 px

768 px

640 px

Back to top ↑

Notes

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

Notes

● FineThe title is 51 characters, short enough to show in full in search results.
▲ CheckThe description is 168 characters. Search results usually show about 160.
▲ CheckThere is no og:image, so links shared on social media show no picture.
▲ CheckThe page doesn’t declare its language (the lang attribute on <html>).

Back to top ↑

Questions

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

Questions

What font does Scoop.it use?: Scoop.it’s website uses two typefaces: Open Sans (headings and body text), self-hosted; Geist Mono, self-hosted.
What are Scoop.it’s brand colours?: The main colours on scoop.it are Light Sea Green (#28BBBB), Medium Violet Red (#B627A1), Orange Red (#FF6221), Pale Turquoise (#C4F4F4), Gold (#FFCC01) and Deep Sea Green (#15A4A4).
What colour is Scoop.it’s text and background?: Body text is #171717 on a #FFFFFF background.
Is this Scoop.it’s official style guide?: No. SiteStyleGuide made it from scoop.it’s public web pages on 29 October 2026, and isn’t affiliated with Scoop.it. 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

scoop-it-tokens.css

Download

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

/* scoop.it design tokens, from SiteStyleGuide (https://sitestyleguide.com/scoop.it) */
:root {
  /* Colours */
  --text: #171717;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-off-white: #E5E5E5;
  --colour-light-grey: #CFCFCF;
  --colour-dark-grey: #4C4D4F;
  --colour-light-sea-green: #28BBBB;
  --colour-medium-violet-red: #B627A1;
  --colour-orange-red: #FF6221;
  --colour-pale-turquoise: #C4F4F4;
  --colour-gold: #FFCC01;
  --colour-deep-sea-green: #15A4A4;
  --colour-dark-magenta: #8E1F81;
  --colour-thistle: #F0D4EC;
  --colour-peach-puff: #FFDDCC;
  --colour-lemon-chiffon: #FCFCCC;
  --gradient-1: linear-gradient(135deg,#fff 0%,#f3f3f3 50%,#ededed 51%,#fff 100%);
  --gradient-2: linear-gradient(initial);
  --gradient-3: radial-gradient(#cfcfcf 35%,#0000 36%);

  /* Typefaces */
  --font-other: 'Open Sans', 'Arial', sans-serif;

  /* Type scale */
  --text-body: 1rem;
  --leading-body: initial;
  --text-small: 80%;

  /* Shape */
  --radius-1: 50%;
  --radius-2: 1000px;
  --radius-3: 1.5rem;
  --radius-4: 1rem;
  --radius-5: 2rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 620px;
  --breakpoint-2: 640px;
  --breakpoint-3: 768px;
  --breakpoint-4: 960px;
  --breakpoint-5: 1024px;
  --breakpoint-6: 1200px;
  --breakpoint-7: 1280px;
  --breakpoint-8: 1536px;
  --max-width-1: 1536px;
  --max-width-2: 1500px;
  --max-width-3: 1280px;
  --max-width-4: 1024px;
  --max-width-5: 768px;
  --max-width-6: 640px;
}

{
    "site": "scoop.it",
    "source": "https://sitestyleguide.com/scoop.it",
    "text": "#171717",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Off White",
            "hex": "#E5E5E5",
            "rgb": [
                229,
                229,
                229
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#CFCFCF",
            "rgb": [
                207,
                207,
                207
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#4C4D4F",
            "rgb": [
                76,
                77,
                79
            ]
        },
        {
            "name": "Light Sea Green",
            "hex": "#28BBBB",
            "rgb": [
                40,
                187,
                187
            ]
        },
        {
            "name": "Medium Violet Red",
            "hex": "#B627A1",
            "rgb": [
                182,
                39,
                161
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF6221",
            "rgb": [
                255,
                98,
                33
            ]
        },
        {
            "name": "Pale Turquoise",
            "hex": "#C4F4F4",
            "rgb": [
                196,
                244,
                244
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFCC01",
            "rgb": [
                255,
                204,
                1
            ]
        },
        {
            "name": "Deep Sea Green",
            "hex": "#15A4A4",
            "rgb": [
                21,
                164,
                164
            ]
        },
        {
            "name": "Dark Magenta",
            "hex": "#8E1F81",
            "rgb": [
                142,
                31,
                129
            ]
        },
        {
            "name": "Thistle",
            "hex": "#F0D4EC",
            "rgb": [
                240,
                212,
                236
            ]
        },
        {
            "name": "Peach Puff",
            "hex": "#FFDDCC",
            "rgb": [
                255,
                221,
                204
            ]
        },
        {
            "name": "Lemon Chiffon",
            "hex": "#FCFCCC",
            "rgb": [
                252,
                252,
                204
            ]
        }
    ],
    "fonts": [
        {
            "name": "Open Sans",
            "stack": "Open Sans, Arial, sans-serif",
            "weights": [
                300,
                800
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Geist Mono",
            "stack": "Geist Mono, monospace",
            "weights": [
                100,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Segoe UI",
            "stack": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Helvetica",
            "stack": "Helvetica, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

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 scoop.it?

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/scoop.it" title="Scoop.it 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 ↑

Scoop.itstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Off White

Light Grey

Dark Grey

Colours

Light Sea Green

Medium Violet Red

Orange Red

Pale Turquoise

Gold

Deep Sea Green

Dark Magenta

Thistle

Peach Puff

Lemon Chiffon

Gradients

Dark mode

Open Sans

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Savvy Savers

Canva

Chase.com

Interia

Chris Pirillo

BlogVitals

shopclues.com

Digital Spy UK

Scoop.itstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Off White

Light Grey

Dark Grey

Colours

Light Sea Green

Medium Violet Red

Orange Red

Pale Turquoise

Gold

Deep Sea Green

Dark Magenta

Thistle

Peach Puff

Lemon Chiffon

Gradients

Dark mode

Open Sans

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run scoop.it?

Also set in Open Sans

Savvy Savers

Canva

Chase.com

Interia

Similar colours

Chris Pirillo

BlogVitals

shopclues.com

Digital Spy UK

Title &
description