What font does LittleThings.com use?

LittleThings.com’s website uses three typefaces: Poppins (headings), self-hosted; Asap, self-hosted; Inter (body text), self-hosted.

What are LittleThings.com’s brand colours?

The main colours on littlethings.com are Deep Slate Blue (#323D5C), Gold (#F2D056), Light Slate Blue (#45537A), Salmon (#D67B68), Fire Brick (#C02B0A) and Khaki (#F9DE7E).

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

Body text is #19191E on a #FFFFFF background.

Where is LittleThings.com’s logo from?

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

Is this LittleThings.com’s official style guide?

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

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

Unofficial style guide

LittleThings.comstyle guide

LittleThings.com’s website (littlethings.com) sets its headings in Poppins and its body text in Inter. Its palette is led by Deep Slate Blue (#323D5C), Gold (#F2D056) and Light Slate Blue (#45537A), with #19191E text on #FFFFFF. Captured from the live site on 25 October 2026.

Website: littlethings.com
Typefaces: Poppins, Asap, Inter
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 25 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the littlethings.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: LittleThings.com - Family, Parenting, Pet and Lifestyle Tips That Bring Us Closer Together; ▲ 90 / 60 characters
Meta description: Family, Parenting, Pet and Lifestyle Tips That Bring Us Closer Together; ● 71 / 160 characters
Site name: LittleThings.com
og:title: LittleThings.com
og:description: Family, Parenting, Pet and Lifestyle Tips That Bring Us Closer Together
Language: en-US

In search results

LittleThings.comhttps://littlethings.com/

LittleThings.com - Family, Parenting, Pet and Lifestyle Tips …

Family, Parenting, Pet and Lifestyle Tips That Bring Us Closer Together

When shared

No og:image, so no picture

littlethings.com

LittleThings.com

Family, Parenting, Pet and Lifestyle Tips That Bring Us Closer Together

Logo & favicons

Found as: image in the header. SVG, 100 × 48.

Logo

On white

On black

On Deep Slate Blue

Favicons

4 found

192 px · PNG icon
180 px · PNG apple-touch-icon
32 px · PNG icon
16 px · ICO favicon.ico

LittleThings.com - Family, Parenting, Pet and Lifestyle Tips That Bring Us Closer Together

Light browser tab

LittleThings.com - Family, Parenting, Pet and Lifestyle Tips That Bring Us Closer Together

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

Colour

Balance

How much each colour is used

White 24.1%
Cool Near Black 16.5%
Deep Slate Blue 13.9%
Gold 13.8%
Light Slate Blue 6.1%
Salmon 4.2%
Charcoal 4.1%
Off White 3.2%
Fire Brick 2.8%
Khaki 2.7%
Deep Olive 2.3%
Slate Grey 1.6%
Light Olive 1.5%
Teal 1.3%
Sienna 1.1%
Lemon Chiffon 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
17.51:1 AAA

On white
—

Background, text, border · .block-email-subscribe .gform_wrapper.gravity-theme .gform_body .gform_fields .g, body
Cool Near Black

HEX

RGB

HSL

OKLCH

CMYK
17 17 0 88

On text
—

On white
17.51:1 AAA

Text, background, border · body, .loop-item__title a
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 74

On text
1.74:1 Fail

On white
10.05:1 AAA

Text, background, border · code, .block-slideshow ol.flickity-page-dots li
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 7

On text
15.09:1 AAA

On white
1.16:1 Fail

Background, border, text · body .gform_wrapper.gravity-theme .ginput_container .gfield_checkbox .gchoice > , .gform_wrapper.gravity-theme .chosen-container-multi .chosen-choices li.search-c

Colours

Brand colours and accents, most used first

Deep Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
46 34 0 64

On text
1.63:1 Fail

On white
10.73:1 AAA

Text, background, graphic · h1, body .gform_wrapper.gravity-theme .ginput_container .gfield_checkbox .gchoice >
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 14 64 5

On text
11.62:1 AAA

On white
1.51:1 Fail

Background, text, graphic · .archive-pager .facetwp-facet button::before, .sidebar-authors__author-title
Light Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
43 32 0 52

On text
2.31:1 Fail

On white
7.58:1 AAA

Text, background, graphic · .site-footer .social-media__links .social-media__link, .site-footer__highlight
Salmon

HEX

RGB

HSL

OKLCH

CMYK
0 43 51 16

On text
5.75:1 AA

On white
3.05:1 AA large

Text, background, border · .block-email-subscribe .gform_wrapper.gravity-theme .gform_body .gform_fields .g, .block-contributors__author-title
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 78 95 25

On text
2.99:1 Fail

On white
5.85:1 AA

Text, border · .gform_wrapper.gravity-theme .gform_validation_errors>h2, .gform_wrapper.gravity-theme .gfield_creditcard_warning .gfield_creditcard_warni
Khaki

HEX

RGB

HSL

OKLCH

CMYK
0 11 49 2

On text
13.16:1 AAA

On white
1.33:1 Fail

Background, text · .menu--footer li a:hover > span, .site-footer__header span
Deep Olive

HEX

RGB

HSL

OKLCH

CMYK
0 18 87 44

On text
3.88:1 AA large

On white
4.51:1 AA

Text · .loop-item__title a:hover, .loop-item-thumbnail__title a:hover
Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
26 12 0 49

On text
3.56:1 AA large

On white
4.92:1 AA

Background, text, border · .gform_wrapper.gravity-theme .ginput_container_image_choice .gchoice:where([\:ha, .gravity-theme.ui-datepicker .ui-datepicker-calendar .ui-datepicker-current-day
Light Olive

HEX

RGB

HSL

OKLCH

CMYK
0 8 39 43

On text
4.82:1 AA

On white
3.64:1 AA large

Background, border · .menu--footer li:not(:last-child)::after, .menu--footer li:not(:last-child)
Teal

HEX

RGB

HSL

OKLCH

CMYK
100 4 0 51

On text
3.37:1 AA large

On white
5.20:1 AA

Text · .series-related-posts .loop-wrapper .loop-item__title a:hover, .series-related-posts .loop-wrapper .loop-item__categories a
Sienna

HEX

RGB

HSL

OKLCH

CMYK
0 43 51 35

On text
3.65:1 AA large

On white
4.80:1 AA

Background, border · .block-email-subscribe .gform_wrapper.gravity-theme .gform_body .gform_fields .g
Lemon Chiffon

HEX

RGB

HSL

OKLCH

CMYK
0 2 20 0

On text
16.61:1 AAA

On white
1.05:1 Fail

Background · .gform_confirmation_wrapper.gf_confirmation_yellow_gradient .gform_confirmation_, .gform_wrapper.gravity-theme .gfield.gfield_html.gf_alert_yellow

Gradients

linear-gradient(to right, currentColor, currentColor 2px, transparent 2px, transparent 6px)
linear-gradient(180deg, #fffae4 0%, #f4e5ce 100%)
linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%)

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.

Poppins

Aa 600 Aa 700

Poppins

Self-hosted · weights 600, 700 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 700

Asap

Self-hosted · weights 400, 600, 700 · headings · shown in a stand-in if you don’t have it

Aa 400 Aa 700

Inter

Self-hosted · weights 400, 700 · body · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Body / weight 400 · Inter

Family, Parenting, Pet and Lifestyle Tips That Bring Us Closer Together

Paragraph / 1.5 weight 400

Family, Parenting, Pet and Lifestyle Tips That Bring Us Closer Together

Small 80%

Family, Parenting, Pet and Lifestyle Tips That Bring Us Closer Together

Button 100% / 1.15 weight 400 · none

Get started

Link 12px / 1.25 weight · Poppins

Sizes in use

Most common across the site

24pxline 28px · 4 rules
20pxline 1 · 12 rules
18pxline 1.5 · 5 rules
16pxline 1.25 · 33 rules
15pxline inherit · 7 rules
14pxline 1.5 · 15 rules
13pxline 17.6px · 15 rules
12pxline 1 · 6 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

.block-email-subscribe .gform_wrapper.gravity-theme .gform_body .gform_fields .g · #D67B68

Corner radius

4px · 22×
2px · 8×
50% · 8×
48px · 5×
3px · 5×
8px · 4×

Shadows

0px 4px 20px 0px rgba(0, 0, 0, 0.15)
6px 6px 0px 0px #a65f51
6px 6px 0px 0px #954e30
6px 6px 0px 0px #00797e

Layout

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

Grid

Breakpoints

600

601

640

768

769

900

901

1000

On a scale of 0 to 1440 px.

Content widths (max-width)

1120 px

750 px

600 px

400 px

Notes

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

Notes

▲ CheckThe title is 90 characters. Google usually cuts titles near 60, so the end may not show in results.
▲ CheckThere is no og:image, so links shared on social media show no picture.

Questions

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

Questions

What font does LittleThings.com use?: LittleThings.com’s website uses three typefaces: Poppins (headings), self-hosted; Asap, self-hosted; Inter (body text), self-hosted.
What are LittleThings.com’s brand colours?: The main colours on littlethings.com are Deep Slate Blue (#323D5C), Gold (#F2D056), Light Slate Blue (#45537A), Salmon (#D67B68), Fire Brick (#C02B0A) and Khaki (#F9DE7E).
What colour is LittleThings.com’s text and background?: Body text is #19191E on a #FFFFFF background.
Where is LittleThings.com’s logo from?: The logo shown in this guide was found on littlethings.com’s homepage. For official logo files and usage rules, check LittleThings.com’s own brand or press page.
Is this LittleThings.com’s official style guide?: No. SiteStyleGuide made it from littlethings.com’s public web pages on 25 October 2026, and isn’t affiliated with LittleThings.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

littlethings-com-tokens.css

Download

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

/* littlethings.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/littlethings.com) */
:root {
  /* Colours */
  --text: #19191E;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-cool-near-black: #19191E;
  --colour-charcoal: #424242;
  --colour-off-white: #EEEEEE;
  --colour-deep-slate-blue: #323D5C;
  --colour-gold: #F2D056;
  --colour-light-slate-blue: #45537A;
  --colour-salmon: #D67B68;
  --colour-fire-brick: #C02B0A;
  --colour-khaki: #F9DE7E;
  --colour-deep-olive: #8E7413;
  --colour-slate-grey: #607382;
  --colour-light-olive: #928659;
  --colour-teal: #00797E;
  --colour-sienna: #A65F51;
  --colour-lemon-chiffon: #FFFBCC;
  --gradient-1: linear-gradient(to right, currentColor, currentColor 2px, transparent 2px, transparent 6px);
  --gradient-2: linear-gradient(180deg, #fffae4 0%, #f4e5ce 100%);
  --gradient-3: linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);

  /* Typefaces */
  --font-headings: 'Poppins';
  --font-buttons: 'Poppins';
  --font-body: 'Inter';

  /* Type scale */
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;
  --text-a: 12px;
  --leading-a: 1.25;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 600px;
  --breakpoint-2: 601px;
  --breakpoint-3: 640px;
  --breakpoint-4: 768px;
  --breakpoint-5: 769px;
  --breakpoint-6: 900px;
  --breakpoint-7: 901px;
  --breakpoint-8: 1000px;
  --max-width-1: 1120px;
  --max-width-2: 750px;
  --max-width-3: 600px;
  --max-width-4: 400px;
}

{
    "site": "littlethings.com",
    "source": "https://sitestyleguide.com/littlethings.com",
    "text": "#19191E",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Cool Near Black",
            "hex": "#19191E",
            "rgb": [
                25,
                25,
                30
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#424242",
            "rgb": [
                66,
                66,
                66
            ]
        },
        {
            "name": "Off White",
            "hex": "#EEEEEE",
            "rgb": [
                238,
                238,
                238
            ]
        },
        {
            "name": "Deep Slate Blue",
            "hex": "#323D5C",
            "rgb": [
                50,
                61,
                92
            ]
        },
        {
            "name": "Gold",
            "hex": "#F2D056",
            "rgb": [
                242,
                208,
                86
            ]
        },
        {
            "name": "Light Slate Blue",
            "hex": "#45537A",
            "rgb": [
                69,
                83,
                122
            ]
        },
        {
            "name": "Salmon",
            "hex": "#D67B68",
            "rgb": [
                214,
                123,
                104
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#C02B0A",
            "rgb": [
                192,
                43,
                10
            ]
        },
        {
            "name": "Khaki",
            "hex": "#F9DE7E",
            "rgb": [
                249,
                222,
                126
            ]
        },
        {
            "name": "Deep Olive",
            "hex": "#8E7413",
            "rgb": [
                142,
                116,
                19
            ]
        },
        {
            "name": "Slate Grey",
            "hex": "#607382",
            "rgb": [
                96,
                115,
                130
            ]
        },
        {
            "name": "Light Olive",
            "hex": "#928659",
            "rgb": [
                146,
                134,
                89
            ]
        },
        {
            "name": "Teal",
            "hex": "#00797E",
            "rgb": [
                0,
                121,
                126
            ]
        },
        {
            "name": "Sienna",
            "hex": "#A65F51",
            "rgb": [
                166,
                95,
                81
            ]
        },
        {
            "name": "Lemon Chiffon",
            "hex": "#FFFBCC",
            "rgb": [
                255,
                251,
                204
            ]
        }
    ],
    "fonts": [
        {
            "name": "Poppins",
            "stack": "Poppins",
            "weights": [
                600,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Asap",
            "stack": "Asap",
            "weights": [
                400,
                600,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Inter",
            "stack": "Inter",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Poppins as their main typeface

SiteGround

siteground.com · set in Poppins
Save
NCI

cancer.gov · set in Poppins
Save
BuildYourBzns

buildyourbzns.com · set in Poppins
Save
CDC

cdc.gov · set in Poppins
Save

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

Lightshot

prnt.sc · 5 days ago
Save
trello.com

trello.com · 1 day ago
Save
Pantip

pantip.com · 5 days ago
Save
IGN

ign.com · 1 day ago
Save

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

LittleThings.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Cool Near Black

Charcoal

Off White

Colours

Deep Slate Blue

Gold

Light Slate Blue

Salmon

Fire Brick

Khaki

Deep Olive

Slate Grey

Light Olive

Teal

Sienna

Lemon Chiffon

Gradients

Poppins

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run littlethings.com?

Also set in Poppins

SiteGround

NCI

BuildYourBzns

CDC

Similar colours

Lightshot

trello.com

Pantip

IGN

Title &
description