What font does Hem use?

Hem’s website uses one typeface: Hem Sans (headings and body text), self-hosted.

What are Hem’s brand colours?

The main colours on hem.com are Blue (#2326DE), Crimson (#E83D3D), Light Sky Blue (#67C6F2), Deep Beige (#DCD8C2), Medium Sea Green (#25C071) and Orange (#FFA500).

What colour is Hem’s text and background?

Body text is #242427 on a #F1F1F1 background.

Is this Hem’s official style guide?

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

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

Unofficial style guide

Hemstyle guide

Hem’s website (hem.com) uses Hem Sans for its headings and body text. Its palette is led by Blue (#2326DE), Crimson (#E83D3D) and Light Sky Blue (#67C6F2), with #242427 text on #F1F1F1. Captured from the live site on 27 October 2026.

Website: hem.com
Typefaces: Hem Sans, Apple Color Emoji
Palette: 4 neutrals, 12 colours, 1 gradient
Captured: 27 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the hem.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: Imaginative designs of obsessive quality — Hem; ● 46 / 60 characters
Meta description: At Hem, we believe great design can enrich lives. We collaborate with vanguard designers and renowned manufacturers to deliver functional and contemporary furniture of contract grade quality.; ▲ 191 / 160 characters
Site name: Hem
og:title: Imaginative designs of obsessive quality — Hem
og:description: At Hem, we believe great design can enrich lives. We collaborate with vanguard designers and renowned manufacturers to deliver functional and contemporary furniture of contract grade quality.
Theme colour: #FFFFFF

In search results

Hemhttps://hem.com/

Imaginative designs of obsessive quality — Hem

At Hem, we believe great design can enrich lives. We collaborate with vanguard designers and renowned manufacturers to deliver functional and contemporary furnit…

When shared

No og:image, so no picture

hem.com

Imaginative designs of obsessive quality — Hem

At Hem, we believe great design can enrich lives. We collaborate with vanguard designers and renowned manufac…

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

8 found

384 px · PNG apple-touch-icon
256 px · PNG apple-touch-icon
192 px · PNG apple-touch-icon
144 px · PNG apple-touch-icon
96 px · PNG apple-touch-icon
72 px · PNG apple-touch-icon
48 px · PNG apple-touch-icon
32 px · PNG icon

Imaginative designs of obsessive quality — Hem

Light browser tab

Imaginative designs of obsessive quality — Hem

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

Colour

Balance

How much each colour is used

White 30.9%
Near Black 13%
Blue 12.3%
Cool Light Grey 8.2%
Cool Grey 6.2%
Crimson 6%
Light Sky Blue 4.1%
Deep Beige 3.2%
Medium Sea Green 2.9%
Orange 2.7%
Yellow 2.6%
Antique White 2.2%
Light Beige 1.9%
Tomato 1.5%
Tan 1.2%
Light Golden Rod Yellow 1%

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
15.48:1 AAA

On white
—

Background, text, border · body, .\[\&_\[cmdk-group-heading\]\]\:bg-white [cmdk-group-heading]
Near Black

HEX

RGB

HSL

OKLCH

CMYK
8 8 0 85

On text
—

On white
15.48:1 AAA

Text, background · html, .Dropdown-module--panel--d5039 li a
Cool Light Grey

HEX

RGB

HSL

OKLCH

CMYK
4 2 0 24

On text
8.19:1 AAA

On white
1.89:1 Fail

Background, border, text · .RegionSelectPage-module--is-disabled--765bb, .RegionOtherPage-module--is-disabled--d9541
Cool Grey

HEX

RGB

HSL

OKLCH

CMYK
6 6 0 38

On text
5.13:1 AA

On white
3.02:1 AA large

Text, background, graphic · .\[\&_\[cmdk-group-heading\]\]\:text-black-400 [cmdk-group-heading], .bg-black-400

Colours

Brand colours and accents, most used first

Blue

HEX

RGB

HSL

OKLCH

CMYK
84 83 0 13

On text
1.77:1 Fail

On white
8.74:1 AAA

Text, background, border · a, .PageTitle-module--css__subtitle--d43a4 h2 strong
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 74 74 9

On text
3.81:1 AA large

On white
4.07:1 AA large

Text, background, border · .bg-error, .bg-red-gloss
Light Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
57 18 0 5

On text
8.06:1 AAA

On white
1.92:1 Fail

Background, text, border · .\!bg-hem-x, .bg-hem-x
Deep Beige

HEX

RGB

HSL

OKLCH

CMYK
0 2 12 14

On text
10.79:1 AAA

On white
1.43:1 Fail

Background, text · .\!bg-green-matte, .bg-green-matte
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
81 0 41 25

On text
6.53:1 AA

On white
2.37:1 Fail

Text, background, border · .bg-success, .text-success
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 35 100 0

On text
7.84:1 AAA

On white
1.97:1 Fail

Background, border, text · .bg-warning, .text-warning
Yellow

HEX

RGB

HSL

OKLCH

CMYK
8 0 79 2

On text
13.24:1 AAA

On white
1.17:1 Fail

Text, background · .bg-yellow-gloss, .text-yellow-gloss
Antique White

HEX

RGB

HSL

OKLCH

CMYK
0 9 14 4

On text
12.18:1 AAA

On white
1.27:1 Fail

Background · .\!bg-red-matte, .bg-red-matte
Light Beige

HEX

RGB

HSL

OKLCH

CMYK
1 0 10 2

On text
14.67:1 AAA

On white
1.06:1 Fail

Background · .\!bg-yellow-matte, .bg-yellow-matte
Tomato

HEX

RGB

HSL

OKLCH

CMYK
0 61 69 5

On text
4.83:1 AA

On white
3.21:1 AA large

Border, text · .Text-module--red--34962, .Input-module--input--834ae.Input-module--error--62790
Tan

HEX

RGB

HSL

OKLCH

CMYK
0 5 27 27

On text
7.20:1 AAA

On white
2.15:1 Fail

Background, border · .\!bg-green-matte-300, .border-green-matte-300
Light Golden Rod Yellow

HEX

RGB

HSL

OKLCH

CMYK
2 0 16 3

On text
13.97:1 AAA

On white
1.11:1 Fail

Background · .\!bg-yellow-matte-100, .hover\:\!bg-yellow-matte-100:hover

Gradients

linear-gradient(to bottom,)

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.

Hem Sans

Aa 400 Aa 500

Hem Sans

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

Aa 400

Apple Color Emoji

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

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

Type scale

From the site’s CSS

Heading 2 1.25rem · 20 px / 1.4 weight 500

Imaginative designs of obsessive quality — Hem

Body .875rem · 14 px / 1.25rem

At Hem, we believe great design can enrich lives. We collaborate with vanguard designers and renowned manufacturers to deliver functional a…

Small 80%

At Hem, we believe great design can enrich lives. We collaborate with vanguard designers and renowned manufacturers to deliver functional a…

Button 100% none

Get started

Link .875rem · 14 px / 1.5714285714 weight 400

Sizes in use

Most common across the site

44pxline 3.25rem · 3 rules
36px1 rules
32pxline 1.25 · 1 rules
20pxline 1.4 · 3 rules
16pxline 1.5 · 12 rules
14pxline 1.5714285714 · 11 rules
12pxline 1.5 · 5 rules
10pxline .875rem · 4 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Link

Read our latest news today.

a · #2326DE

Corner radius

2px · 8×
.25rem · 3×
9999px · 2×
50em · 2×
4px · 1×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000
0 16px 24px rgba(0,0,0,.08)
0 0 0 3px #d2dfef
0 0 0 3px #fddfda

Layout

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

Grid

Breakpoints

425

768

1024

1400

1500

On a scale of 0 to 1500 px.

Content widths (max-width)

1920 px

1400 px

1024 px

768 px

672 px

425 px

Notes

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

Notes

● FineThe title is 46 characters, short enough to show in full in search results.
▲ CheckThe description is 191 characters. Search results usually show about 160.
▲ CheckThe page doesn’t declare its language (the lang attribute on <html>).
▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.

Questions

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

Questions

What font does Hem use?: Hem’s website uses one typeface: Hem Sans (headings and body text), self-hosted.
What are Hem’s brand colours?: The main colours on hem.com are Blue (#2326DE), Crimson (#E83D3D), Light Sky Blue (#67C6F2), Deep Beige (#DCD8C2), Medium Sea Green (#25C071) and Orange (#FFA500).
What colour is Hem’s text and background?: Body text is #242427 on a #F1F1F1 background.
Is this Hem’s official style guide?: No. SiteStyleGuide made it from hem.com’s public web pages on 27 October 2026, and isn’t affiliated with Hem. 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

hem-com-tokens.css

Download

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

/* hem.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/hem.com) */
:root {
  /* Colours */
  --text: #242427;
  --background: #F1F1F1;
  --colour-white: #FFFFFF;
  --colour-near-black: #242427;
  --colour-cool-light-grey: #B9BDC1;
  --colour-cool-grey: #93949D;
  --colour-blue: #2326DE;
  --colour-crimson: #E83D3D;
  --colour-light-sky-blue: #67C6F2;
  --colour-deep-beige: #DCD8C2;
  --colour-medium-sea-green: #25C071;
  --colour-orange: #FFA500;
  --colour-yellow: #E6F934;
  --colour-antique-white: #F6E0D3;
  --colour-light-beige: #F8FBE3;
  --colour-tomato: #F35F4B;
  --colour-tan: #BBB189;
  --colour-light-golden-rod-yellow: #F1F7D0;
  --gradient-1: linear-gradient(to bottom,);

  /* Typefaces */
  --font-body: 'Hem Sans', 'helvetica', 'arial';

  /* Type scale */
  --text-h2: 1.25rem;
  --leading-h2: 1.4;
  --text-body: .875rem;
  --leading-body: 1.25rem;
  --text-small: 80%;
  --text-button: 100%;
  --text-a: .875rem;
  --leading-a: 1.5714285714;

  /* Shape */
  --radius-1: 2px;
  --radius-2: .25rem;
  --radius-3: 9999px;
  --radius-4: 50em;
  --radius-5: 4px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 425px;
  --breakpoint-2: 768px;
  --breakpoint-3: 1024px;
  --breakpoint-4: 1400px;
  --breakpoint-5: 1500px;
  --max-width-1: 1920px;
  --max-width-2: 1400px;
  --max-width-3: 1024px;
  --max-width-4: 768px;
  --max-width-5: 672px;
  --max-width-6: 425px;
}

{
    "site": "hem.com",
    "source": "https://sitestyleguide.com/hem.com",
    "text": "#242427",
    "background": "#F1F1F1",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#242427",
            "rgb": [
                36,
                36,
                39
            ]
        },
        {
            "name": "Cool Light Grey",
            "hex": "#B9BDC1",
            "rgb": [
                185,
                189,
                193
            ]
        },
        {
            "name": "Cool Grey",
            "hex": "#93949D",
            "rgb": [
                147,
                148,
                157
            ]
        },
        {
            "name": "Blue",
            "hex": "#2326DE",
            "rgb": [
                35,
                38,
                222
            ]
        },
        {
            "name": "Crimson",
            "hex": "#E83D3D",
            "rgb": [
                232,
                61,
                61
            ]
        },
        {
            "name": "Light Sky Blue",
            "hex": "#67C6F2",
            "rgb": [
                103,
                198,
                242
            ]
        },
        {
            "name": "Deep Beige",
            "hex": "#DCD8C2",
            "rgb": [
                220,
                216,
                194
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#25C071",
            "rgb": [
                37,
                192,
                113
            ]
        },
        {
            "name": "Orange",
            "hex": "#FFA500",
            "rgb": [
                255,
                165,
                0
            ]
        },
        {
            "name": "Yellow",
            "hex": "#E6F934",
            "rgb": [
                230,
                249,
                52
            ]
        },
        {
            "name": "Antique White",
            "hex": "#F6E0D3",
            "rgb": [
                246,
                224,
                211
            ]
        },
        {
            "name": "Light Beige",
            "hex": "#F8FBE3",
            "rgb": [
                248,
                251,
                227
            ]
        },
        {
            "name": "Tomato",
            "hex": "#F35F4B",
            "rgb": [
                243,
                95,
                75
            ]
        },
        {
            "name": "Tan",
            "hex": "#BBB189",
            "rgb": [
                187,
                177,
                137
            ]
        },
        {
            "name": "Light Golden Rod Yellow",
            "hex": "#F1F7D0",
            "rgb": [
                241,
                247,
                208
            ]
        }
    ],
    "fonts": [
        {
            "name": "Hem Sans",
            "stack": "Hem Sans, helvetica, arial",
            "weights": [
                400,
                500
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Apple Color Emoji",
            "stack": "ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Websites whose lead colour is closest to Hem’s

Eclipse Foundation

eclipse.org · 5 days ago
Save
elegantthemes.com

elegantthemes.com · 4 days ago
Save
VectorStock

vectorstock.com · 3 days ago
Save
craigslist

craigslist.org · 4 days ago
Save

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

Hemstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Cool Light Grey

Cool Grey

Colours

Blue

Crimson

Light Sky Blue

Deep Beige

Medium Sea Green

Orange

Yellow

Antique White

Light Beige

Tomato

Tan

Light Golden Rod Yellow

Gradients

Hem Sans

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run hem.com?

Similar colours

Eclipse Foundation

elegantthemes.com

VectorStock

craigslist

Title &
description