Legacy Supported Living
legacysupportedliving.co.uk · set in Work Sans
Save1Unofficial A style guide made by SiteStyleGuide from beebom.com’s public web pages. Not affiliated with or endorsed by Beebom. The real site is beebom.com ↗
Unofficial style guide
Beebomstyle guide
Beebom’s website (beebom.com) uses Work Sans for its headings and body text. Its palette is led by Orange Red (#FF3200), Midnight Blue (#07184F) and Light Royal Blue (#006FD9), with #46474A text on #FFFFFF. Captured from the live site on 27 October 2026.
- Website
- beebom.com
- Typefaces
- Work Sans, Figtree, Syne
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 27 Oct 2026 · added by @sitestyleguide
https://beebom.com/
Screenshot
beebom.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Beebom - Video Game News, Codes, Guides, and Reviews
- ● 52 / 60 characters
- Meta description
- Beebom is a new-age media company that covers video game news, guides, Roblox codes, reviews, and walkthroughs.
- ● 111 / 160 characters
- Site name
- Beebom
- og:title
- Beebom - Video Game News, Codes, Guides, and Reviews
- og:description
- Beebom is a new-age media company that covers video game news, guides, Roblox codes, reviews, and walkthroughs.
- Language
- en-US
In search results
Beebomhttps://beebom.com/
Beebom - Video Game News, Codes, Guides, and Reviews
Beebom is a new-age media company that covers video game news, guides, Roblox codes, reviews, and walkthroughs.
When shared
beebom.com
Beebom - Video Game News, Codes, Guides, and Reviews
Beebom is a new-age media company that covers video game news, guides, Roblox codes, reviews, and walkthrough…
Logo & favicons
Found as: schema.org logo. PNG, 2134 × 2134.
Logo
On white
On black
On Orange Red
Favicons
4 found-
192 px · PNG
icon
-
180 px · PNG
apple-touch-icon
-
32 px · PNG
icon
-
16 px · ICO favicon.ico
Beebom - Video Game News, Codes, Guides, and Reviews
Light browser tab
Beebom - Video Game News, Codes, Guides, and Reviews
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 (#46474A) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 29.4%
- Orange Red 11.8%
- Midnight Blue 11.4%
- Light Royal Blue 9.6%
- Black 8.3%
- Medium Orchid 7.3%
- Orange 5.4%
- Near Black 4.9%
- Off White 3.9%
- Deep Royal Blue 2.7%
- Spring Green 1.2%
- Violet 1%
- Golden Rod 0.9%
- Medium Sea Green 0.9%
- Light Sky Blue 0.9%
- Plum 0.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
- 9.29:1 AAA
- On white
- —
Background, text, border · .menu-container .menu .sub-menu, body
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 2.26:1 Fail
- On white
- 21.00:1 AAA
Text, border, background · .site-header.normal-head .site-header-container .beebom-search-form .search-fiel, .site-header .desk-search-results .desk-search-results-container .view-card .vie
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 13 10 0 88
- On text
- 1.85:1 Fail
- On white
- 17.22:1 AAA
Text, border · h1, .is-style-step-heading
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 1 2 0 10
- On text
- 7.20:1 AAA
- On white
- 1.29:1 Fail
Border, background, text · .item--placeholder span, .menu-container .menu .menu-item:not(:last-child)
Colours
Brand colours and accents, most used first-
Orange Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 80 100 0
- On text
- 2.53:1 Fail
- On white
- 3.68:1 AA large
Background, text · .trending-tags .desk-tagline h2, .latest-discoveries-container .view-card:hover .view-card__top .view-card__title
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 91 70 0 69
- On text
- 1.80:1 Fail
- On white
- 16.77:1 AAA
Text, background, border · .site-header .desk-search-results .desk-search-results-container .load-more-cont, .latest-discoveries-title
-
Light Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 49 0 15
- On text
- 1.89:1 Fail
- On white
- 4.91:1 AA
Background, text, graphic · .trending-tags .desk-tagline h2, .is-style-step-heading::before
-
Medium Orchid
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 77 5 15
- On text
- 2.37:1 Fail
- On white
- 3.91:1 AA large
Background, text · .is-style-step-heading::before, .meet-our-partners-full .meet-our-partners h2 .highlight
-
Orange
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 29 100 0
- On text
- 5.21:1 AA
- On white
- 1.78:1 Fail
Background, text · .trending-tags .desk-tagline h2, .latest-discoveries-container .view-card:hover .view-card__top .view-card__title
-
Deep Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 49 0 23
- On text
- 1.62:1 Fail
- On white
- 5.73:1 AA
Background, text, border · .is-style-method-heading:not(.is-style-method-heading-plain), button:hover
-
Spring Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 63 9
- On text
- 5.61:1 AA
- On white
- 1.66:1 Fail
Background · .trending-tags .trending-tags-container .trending-tags-title
-
Violet
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 46 3 9
- On text
- 3.72:1 AA large
- On white
- 2.49:1 Fail
Background · .beebom-pagination .page-numbers-container .page-numbers.current, .dt-container .dt-paging .dt-paging-button.current
-
Golden Rod
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 32 94 15
- On text
- 3.62:1 AA large
- On white
- 2.56:1 Fail
Background, border · .trending-component.yellow .component-heading:hover, .trending-component.yellow .post-title:hover
-
Medium Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 54 0 51 30
- On text
- 3.48:1 AA large
- On white
- 2.67:1 Fail
Background, border · .trending-component.green .component-heading:hover, .trending-component.green .post-title:hover
-
Light Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 42 21 0 7
- On text
- 4.69:1 AA
- On white
- 1.98:1 Fail
Background · .trending-component.blue .component-heading:hover, .trending-component.blue .post-title:hover
-
Plum
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 36 19 0
- On text
- 5.02:1 AA
- On white
- 1.85:1 Fail
Background · .meet-our-partners-full .meet-our-partners h2 .highlight
Gradients
-
linear-gradient(270deg, #ff3200 4.18%, #ff3200 5.3%, #ffb400 46.79%, #da33d0 81.55%, #006fd9 116.31%)
-
linear-gradient(270deg, #FF3200 0%, #FF3200 1%, #FFB400 38%, #DA33D0 69%, #006FD9 100%)
-
linear-gradient(270deg, #016fd9 0%, #da33d0 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.
Work Sans
Aa
100
Aa
900
Work Sans
Self-hosted · weights 100, 300, 400, 500, 600, 700, 900 · headings, body, buttons · shown in a stand-in if you don’t have it
Aa
100
Aa
900
Figtree
Self-hosted · weights 100, 500, 600, 700, 900 · headings · shown in a stand-in if you don’t have it
Aa
100
Aa
900
Syne
Self-hosted · weights 100, 900 · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
2rem · 32 px / 2.25rem
weight 600 · Figtree
Beebom
Heading 2
1.5rem · 24 px / 1.5rem
weight 600 · Figtree
Beebom - Video Game News, Codes, Guides, and Re…
Heading 3
1.25rem · 20 px / 2rem
weight 600 · Figtree
Beebom - Video Game News, Codes, Guides, and Re…
Heading 4
.875rem · 14 px / 1.25rem
weight 600 · Figtree
Beebom - Video Game News, Codes, Guides, and Re…
Heading 5
1.125rem · 18 px / 1.5rem
weight 600 · Figtree
Beebom - Video Game News, Codes, Guides, and Re…
Heading 6
1.125rem · 18 px / 1.5rem
weight 600 · Figtree
Beebom - Video Game News, Codes, Guides, and Re…
Body
14px / 1.5
Work Sans
Beebom is a new-age media company that covers video game news, guides, Roblox codes, reviews, and walkthroughs.
Paragraph
1.125rem · 18 px / 1.5rem
Beebom is a new-age media company that covers video game news, guides, Roblox codes, reviews, and walkthroughs.
Button
18px / 26px
weight 500 · Work Sans
Get started
Link
18px / 26px
weight 400 · uppercase · Work Sans
Read more about Beebom
Sizes in use
Most common across the site- 32pxline 2.25rem · 9 rules
- 28pxline 36px · 10 rules
- 24pxline 1.875rem · 13 rules
- 20pxline 24px · 11 rules
- 18pxline 26px · 15 rules
- 16pxline 22px · 24 rules
- 14pxline 1.5 · 17 rules
- 12pxline 21px · 18 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
button · #FFFFFF · radius 32px
Link
Read our latest news today.
a · #006FDA
Corner radius
- 32px · 11×
- 5px · 11×
- 10px · 10×
- 50% · 9×
- 20px · 9×
- 8px · 8×
Shadows
- 0 0 3px #444
- 0 0 2px 2px rgba(0,0,0,.6)
- 0 4px 15px #0000001a
- 3px 4px 10px 1px #000c
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
599
600
699
767
768
800
1024
1200
On a scale of 0 to 1440 px.
Content widths (max-width)
1440 px
1368 px
1338 px
970 px
728 px
350 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 52 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 Beebom use?
- Beebom’s website uses three typefaces: Work Sans (headings and body text), self-hosted; Figtree, self-hosted; Syne, self-hosted.
- What are Beebom’s brand colours?
- The main colours on beebom.com are Orange Red (#FF3200), Midnight Blue (#07184F), Light Royal Blue (#006FD9), Medium Orchid (#DA33D0), Orange (#FFB400) and Deep Royal Blue (#0065C5).
- What colour is Beebom’s text and background?
- Body text is #46474A on a #FFFFFF background.
- Where is Beebom’s logo from?
- The logo shown in this guide was found on beebom.com’s homepage. For official logo files and usage rules, check Beebom’s own brand or press page.
- Is this Beebom’s official style guide?
- No. SiteStyleGuide made it from beebom.com’s public web pages on 27 October 2026, and isn’t affiliated with Beebom. 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
beebom-com-tokens.css
/* beebom.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/beebom.com) */
:root {
/* Colours */
--text: #46474A;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-black: #000000;
--colour-near-black: #1A1B1E;
--colour-off-white: #E3E2E6;
--colour-orange-red: #FF3200;
--colour-midnight-blue: #07184F;
--colour-light-royal-blue: #006FD9;
--colour-medium-orchid: #DA33D0;
--colour-orange: #FFB400;
--colour-deep-royal-blue: #0065C5;
--colour-spring-green: #00E856;
--colour-violet: #E77DE1;
--colour-golden-rod: #D9940C;
--colour-medium-sea-green: #52B257;
--colour-light-sky-blue: #8ABDEE;
--colour-plum: #FEA3CE;
--gradient-1: linear-gradient(270deg, #ff3200 4.18%, #ff3200 5.3%, #ffb400 46.79%, #da33d0 81.55%, #006fd9 116.31%);
--gradient-2: linear-gradient(270deg, #FF3200 0%, #FF3200 1%, #FFB400 38%, #DA33D0 69%, #006FD9 100%);
--gradient-3: linear-gradient(270deg, #016fd9 0%, #da33d0 100%);
/* Typefaces */
--font-headings: 'Work Sans', sans-serif;
--font-body: 'Work Sans', sans-serif;
--font-buttons: 'Work Sans', sans-serif;
--font-other: 'Syne';
/* Type scale */
--text-h1: 2rem;
--leading-h1: 2.25rem;
--text-h2: 1.5rem;
--leading-h2: 1.5rem;
--text-h3: 1.25rem;
--leading-h3: 2rem;
--text-h4: .875rem;
--leading-h4: 1.25rem;
--text-h5: 1.125rem;
--leading-h5: 1.5rem;
--text-h6: 1.125rem;
--leading-h6: 1.5rem;
--text-body: 14px;
--leading-body: 1.5;
--text-p: 1.125rem;
--leading-p: 1.5rem;
--text-button: 18px;
--leading-button: 26px;
--text-a: 18px;
--leading-a: 26px;
/* Shape */
--radius-1: 32px;
--radius-2: 5px;
--radius-3: 10px;
--radius-4: 50%;
--radius-5: 20px;
--radius-6: 8px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 599px;
--breakpoint-2: 600px;
--breakpoint-3: 699px;
--breakpoint-4: 767px;
--breakpoint-5: 768px;
--breakpoint-6: 800px;
--breakpoint-7: 1024px;
--breakpoint-8: 1200px;
--max-width-1: 1440px;
--max-width-2: 1368px;
--max-width-3: 1338px;
--max-width-4: 970px;
--max-width-5: 728px;
--max-width-6: 350px;
}
{
"site": "beebom.com",
"source": "https://sitestyleguide.com/beebom.com",
"text": "#46474A",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Near Black",
"hex": "#1A1B1E",
"rgb": [
26,
27,
30
]
},
{
"name": "Off White",
"hex": "#E3E2E6",
"rgb": [
227,
226,
230
]
},
{
"name": "Orange Red",
"hex": "#FF3200",
"rgb": [
255,
50,
0
]
},
{
"name": "Midnight Blue",
"hex": "#07184F",
"rgb": [
7,
24,
79
]
},
{
"name": "Light Royal Blue",
"hex": "#006FD9",
"rgb": [
0,
111,
217
]
},
{
"name": "Medium Orchid",
"hex": "#DA33D0",
"rgb": [
218,
51,
208
]
},
{
"name": "Orange",
"hex": "#FFB400",
"rgb": [
255,
180,
0
]
},
{
"name": "Deep Royal Blue",
"hex": "#0065C5",
"rgb": [
0,
101,
197
]
},
{
"name": "Spring Green",
"hex": "#00E856",
"rgb": [
0,
232,
86
]
},
{
"name": "Violet",
"hex": "#E77DE1",
"rgb": [
231,
125,
225
]
},
{
"name": "Golden Rod",
"hex": "#D9940C",
"rgb": [
217,
148,
12
]
},
{
"name": "Medium Sea Green",
"hex": "#52B257",
"rgb": [
82,
178,
87
]
},
{
"name": "Light Sky Blue",
"hex": "#8ABDEE",
"rgb": [
138,
189,
238
]
},
{
"name": "Plum",
"hex": "#FEA3CE",
"rgb": [
254,
163,
206
]
}
],
"fonts": [
{
"name": "Work Sans",
"stack": "\"Work Sans\", sans-serif",
"weights": [
100,
300,
400,
500,
600,
700,
900
],
"source": "Self-hosted"
},
{
"name": "Figtree",
"stack": "\"Figtree\", sans-serif",
"weights": [
100,
500,
600,
700,
900
],
"source": "Self-hosted"
},
{
"name": "Syne",
"stack": "\"Syne\"",
"weights": [
100,
900
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run beebom.com?
Add the badge to your siteLink 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/beebom.com" title="Beebom style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Also set in Work Sans
Other websites using Work Sans as their main typeface
Similar colours
Websites whose lead colour is closest to Beebom’s
YouGlish
youglish.com · 4 days ago
Save
博客园
cnblogs.com · 5 days ago
Save
microdot.vision
microdot.vision · 5 days ago
Save
thetimes.com
thetimes.com · 5 days ago
Save
Captured from beebom.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Beebom; this guide describes the public website for reference.