What font does HEDROOM™ use?

HEDROOM™’s website uses three typefaces: Apple Color Emoji (body text), a system font; Helvetica Now Text, self-hosted; Helvetica Now Display (headings), self-hosted.

What are HEDROOM™’s brand colours?

The main colours on hedroom.fm are Orange Red (#FF3C00), Dark Orange (#FF7A00), Blue (#0009FF), Lime Green (#38DD64), White (#FFFFFF) and Black (#000000).

What colour is HEDROOM™’s text and background?

Body text is #0F0F0F on a #FFFFFF background.

Is this HEDROOM™’s official style guide?

No. SiteStyleGuide made it from hedroom.fm’s public web pages on 5 November 2026, and isn’t affiliated with HEDROOM™. Members can refresh a guide after 90 days to pick up changes.

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

Unofficial style guide

HEDROOM™style guide

HEDROOM™’s website (hedroom.fm) sets its headings in Helvetica Now Display and its body text in Apple Color Emoji. Its palette is led by Orange Red (#FF3C00), Dark Orange (#FF7A00) and Blue (#0009FF), with #0F0F0F text on #FFFFFF. Captured from the live site on 5 November 2026.

Website: hedroom.fm
Typefaces: Apple Color Emoji, Helvetica Now Text, Helvetica Now Display
Palette: 4 neutrals, 4 colours, 3 gradients
Captured: 5 Nov 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the hedroom.fm homepage on a desktop screen — Screenshot of hedroom.fm on a 1440 px desktop screen, 5 Nov 2026.

Screenshot of the hedroom.fm 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: HEDROOM™; ● 8 / 60 characters
Meta description: HEDROOM™ is a space for music makers to share their sound.; ● 58 / 160 characters
Site name: HEDROOM™
og:title: HEDROOM™
og:description: HEDROOM™ is a space for music makers to share their sound.
Language: en

In search results

HEDROOM™https://hedroom.fm/

HEDROOM™

HEDROOM™ is a space for music makers to share their sound.

When shared

hedroom.fm

HEDROOM™

HEDROOM™ is a space for music makers to share their sound.

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

1 found

1024 px · PNG icon

HEDROOM™

Light browser tab

HEDROOM™

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

Colour

Balance

How much each colour is used

White 43.9%
Black 25.4%
Light Grey 11.3%
Off White 5.4%
Orange Red 5.1%
Dark Orange 3.6%
Blue 2.6%
Lime Green 2.6%

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

On white
—

Background, text, graphic · body, .bg-\[linear-gradient$180deg\,\#ffffff_0\%\,\#f3f3f3_100\%$\]
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.10:1 Fail

On white
21.00:1 AAA

Text, background, border · body, .room-title
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 23

On text
10.99:1 AAA

On white
1.74:1 Fail

Text, background, border · .bg-\[\#bdbdbd\], .bg-\[\#cbcbcb\]
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 15

On text
13.58:1 AAA

On white
1.41:1 Fail

Border, background · .bg-\[\#d9d9d9\], .border-\[\#d9d9d9\]

Colours

Brand colours and accents, most used first

Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 76 100 0

On text
5.38:1 AA

On white
3.56:1 AA large

Background, text, border · .bg-\[\#ff3c00\], .text-\[\#ff3c00\]
Dark Orange

HEX

RGB

HSL

OKLCH

CMYK
0 52 100 0

On text
7.34:1 AAA

On white
2.61:1 Fail

Background · .bg-\[\#ff7a00\], .data-\[state\=checked\]\:bg-\[\#ff7a00\][data-state=checked]
Blue

HEX

RGB

HSL

OKLCH

CMYK
100 96 0 0

On text
2.27:1 Fail

On white
8.46:1 AAA

Background, border · .bg-\[\#0009ff\], .border-\[\#0009ff\]
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
75 0 55 13

On text
10.67:1 AAA

On white
1.80:1 Fail

Background, border · .bg-\[\#38DD64\], .border-\[\#38dd64\]

Gradients

linear-gradient(#fafafa,#f1f1f1)
linear-gradient(#fff,#f3f3f3)
radial-gradient(circle,#0000002e,#00000014 48%,#0000 76%)

Dark mode

Switched on by the site

Aa Light · #0F0F0F on #FFFFFF

Aa Dark · #FAFAFA on #0F0F0F · 18.36:1 AAA

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.

Helvetica Now Display

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

Aa 400 Aa 500

Helvetica Now Text

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

Aa 300 Aa 700

Helvetica Now Display

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

Aa 400

SFMono-Regular

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

Body — Helvetica Now Text

HEDROOM™ is a space for music makers to share their sound.

Small 80%

HEDROOM™ is a space for music makers to share their sound.

Sizes in use

Most common across the site

30px4 rules
28px3 rules
24pxline initial · 2 rules
22px3 rules
18pxline initial · 2 rules
16pxline initial · 4 rules
14pxline initial · 3 rules
12pxline initial · 2 rules

Elements

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

Elements

Corner radius

.25rem · 2×
.5rem · 2×
999px · 2×
1rem · 1×
3px · 1×
4px · 1×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000

Layout

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

Grid

Breakpoints

640

768

960

1024

1280

1536

On a scale of 0 to 1536 px.

Content widths (max-width)

768 px

720 px

640 px

620 px

560 px

420 px

Notes

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

Notes

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

Questions

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

Questions

What font does HEDROOM™ use?: HEDROOM™’s website uses three typefaces: Apple Color Emoji (body text), a system font; Helvetica Now Text, self-hosted; Helvetica Now Display (headings), self-hosted.
What are HEDROOM™’s brand colours?: The main colours on hedroom.fm are Orange Red (#FF3C00), Dark Orange (#FF7A00), Blue (#0009FF), Lime Green (#38DD64), White (#FFFFFF) and Black (#000000).
What colour is HEDROOM™’s text and background?: Body text is #0F0F0F on a #FFFFFF background.
Is this HEDROOM™’s official style guide?: No. SiteStyleGuide made it from hedroom.fm’s public web pages on 5 November 2026, and isn’t affiliated with HEDROOM™. 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

hedroom-fm-tokens.css

Download

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

/* hedroom.fm design tokens, from SiteStyleGuide (https://sitestyleguide.com/hedroom.fm) */
:root {
  /* Colours */
  --text: #0F0F0F;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-light-grey: #C4C4C4;
  --colour-off-white: #D9D9D9;
  --colour-orange-red: #FF3C00;
  --colour-dark-orange: #FF7A00;
  --colour-blue: #0009FF;
  --colour-lime-green: #38DD64;
  --gradient-1: linear-gradient(#fafafa,#f1f1f1);
  --gradient-2: linear-gradient(#fff,#f3f3f3);
  --gradient-3: radial-gradient(circle,#0000002e,#00000014 48%,#0000 76%);

  /* Typefaces */
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-headings: 'Helvetica Now Display', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-other: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono';

  /* Type scale */
  --text-small: 80%;

  /* Shape */
  --radius-1: .25rem;
  --radius-2: .5rem;
  --radius-3: 999px;
  --radius-4: 1rem;
  --radius-5: 3px;
  --radius-6: 4px;

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

{
    "site": "hedroom.fm",
    "source": "https://sitestyleguide.com/hedroom.fm",
    "text": "#0F0F0F",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#C4C4C4",
            "rgb": [
                196,
                196,
                196
            ]
        },
        {
            "name": "Off White",
            "hex": "#D9D9D9",
            "rgb": [
                217,
                217,
                217
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF3C00",
            "rgb": [
                255,
                60,
                0
            ]
        },
        {
            "name": "Dark Orange",
            "hex": "#FF7A00",
            "rgb": [
                255,
                122,
                0
            ]
        },
        {
            "name": "Blue",
            "hex": "#0009FF",
            "rgb": [
                0,
                9,
                255
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#38DD64",
            "rgb": [
                56,
                221,
                100
            ]
        }
    ],
    "fonts": [
        {
            "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"
        },
        {
            "name": "Helvetica Now Text",
            "stack": "\"Helvetica Now Text\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
            "weights": [
                400,
                500
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Helvetica Now Display",
            "stack": "\"Helvetica Now Display\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
            "weights": [
                300,
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "SFMono-Regular",
            "stack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using Apple Color Emoji as their main typeface

SeatSheet

seatsheet.com · set in Apple Color Emoji
Save1
エキサイトブログ

exblog.jp · set in Apple Color Emoji
Save
Node.js

nodejs.org · set in Apple Color Emoji
Save
Ubie

ubiehealth.com · set in Apple Color Emoji
Save

Websites whose lead colour is closest to HEDROOM™’s

HubSpot

hubspot.com · 22 hours ago
Save
taobao.com

taobao.com · 44 minutes ago
Save
【58同城 58.com】北京分类信息

58.com · 6 days ago
Save
SoundCloud

soundcloud.com · 2 days ago
Save

Captured from hedroom.fm on 5 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by HEDROOM™; this guide describes the public website for reference.

HEDROOM™style guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Light Grey

Off White

Colours

Orange Red

Dark Orange

Blue

Lime Green

Gradients

Dark mode

Helvetica Now Display

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run hedroom.fm?

Also set in Apple Color Emoji

SeatSheet

エキサイトブログ

Node.js

Ubie

Similar colours

HubSpot

taobao.com

【58同城 58.com】北京分类信息

SoundCloud

Title &
description