Beebom
beebom.com · set in Work Sans
SaveUnofficial A style guide made by SiteStyleGuide from legacysupportedliving.co.uk’s public web pages. Not affiliated with or endorsed by Legacy Supported Living. The real site is legacysupportedliving.co.uk ↗
Unofficial style guide
Legacy Supported Livingstyle guide
Legacy Supported Living’s website (legacysupportedliving.co.uk) sets its headings in Work Sans and its body text in Open Sans. Its palette is led by Slate Blue (#0048FE), Deep Slate Blue (#334155) and Dodger Blue (#2EA3F2), with #666666 text on #FFFFFF. Captured from the live site on 24 October 2026.
- Website
- legacysupportedliving.co.uk
- Typefaces
- Work Sans, Merriweather, Segoe UI
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 24 Oct 2026 · added by @nikosng
https://legacysupportedliving.co.uk/
Screenshot
legacysupportedliving.co.uk
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Supported Living Services | Legacy Supported Living
- ● 51 / 60 characters
- Meta description
- Legacy Supported Living provides quality supported living, care and accommodation to help people live independently with choice and dignity.
- ● 140 / 160 characters
- Site name
- Legacy Supported Living
- og:title
- Supported Living Services | Legacy Supported Living
- og:description
- Legacy Supported Living provides quality supported living, care and accommodation to help people live independently with choice and dignity.
- Language
- en-GB
In search results
Legacy Supported Livinghttps://legacysupportedliving.co.uk/
Supported Living Services | Legacy Supported Living
Legacy Supported Living provides quality supported living, care and accommodation to help people live independently with choice and dignity.
When shared
No og:image, so no picture
legacysupportedliving.co.uk
Supported Living Services | Legacy Supported Living
Legacy Supported Living provides quality supported living, care and accommodation to help people live indepen…
Logo & favicons
Found as: image in the header. PNG, 980 × 266.
Logo
On white
On black
On Slate Blue
Favicons
3 found-
192 px · PNG
icon
-
180 px · PNG
apple-touch-icon
-
32 px · PNG
icon
Supported Living Services | Legacy Supported Living
Light browser tab
Supported Living Services | Legacy Supported Living
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 (#666666) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 47.1%
- Near Black 11.4%
- Slate Blue 9.3%
- Cool Near Black 8.3%
- Off White 6.2%
- Deep Slate Blue 4.9%
- Dodger Blue 3.4%
- Midnight Blue 1.8%
- Dark Sea Green 1.3%
- Royal Blue 1.3%
- Light Slate Blue 1.2%
- Deep Blue 1.1%
- Gold 0.7%
- Light Blue 0.6%
- Aqua Marine 0.6%
- Peach Puff 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
- 5.74:1 AA
- On white
- —
Background, text, graphic · nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .onetap-accessib, nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .toolbar-hide-du
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 93
- On text
- 3.29:1 AA large
- On white
- 18.88:1 AAA
Text, background, graphic · nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .accessibility-s, nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .toolbar-hide-du
-
Cool Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 44 52 0 90
- On text
- 3.37:1 AA large
- On white
- 19.35:1 AAA
Text · .et_pb_heading_2 .et_pb_heading_container h1, .et_pb_text_1 h1
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 3 2 0 4
- On text
- 5.07:1 AA
- On white
- 1.13:1 Fail
Background, border · nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .onetap-accessib, nav.active-statement .accessibility-status-wrapper
Colours
Brand colours and accents, most used first-
Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 72 0 0
- On text
- 1.09:1 Fail
- On white
- 6.25:1 AA
Background, border, graphic · nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .onetap-accessib, nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .toolbar-hide-du
-
Deep Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 40 24 0 67
- On text
- 1.80:1 Fail
- On white
- 10.35:1 AAA
Text, graphic · nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .toolbar-hide-du, nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .accessibility-s
-
Dodger Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 81 33 0 5
- On text
- 2.09:1 Fail
- On white
- 2.75:1 Fail
Text, border · .nav-single a, a
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 70 43 0 67
- On text
- 2.33:1 Fail
- On white
- 13.35:1 AAA
Text, background · .et_pb_heading_10 .et_pb_heading_container h1, .et_pb_section_1_tb_footer.et_pb_section
-
Dark Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 22 0 16 19
- On text
- 3.27:1 AA large
- On white
- 1.76:1 Fail
Text, background · a, body #page-container .et_pb_section .et_pb_button_1
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 72 29 0 52
- On text
- 1.35:1 Fail
- On white
- 7.74:1 AAA
Text, background · body #page-container .et_pb_section .et_pb_cta_0.et_pb_promo .et_pb_promo_button, .et_pb_column_2
-
Light Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 59 39 0 56
- On text
- 1.66:1 Fail
- On white
- 9.52:1 AAA
Text, background · .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a, .et_pb_section_8.et_pb_section
-
Deep Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 100 0 0
- On text
- 1.50:1 Fail
- On white
- 8.59:1 AAA
Background · .nfd-bg-accent:not(.has-background), .nfd-bg-secondary:not(.has-background)
-
Gold
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 7 78 9
- On text
- 3.91:1 AA large
- On white
- 1.47:1 Fail
Graphic, border · .is-style-nfd-heading-underline.wp-block-heading, .wp-block-heading.is-style-nfd-heading-boxed:after
-
Light Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 99 71 0 14
- On text
- 1.33:1 Fail
- On white
- 7.64:1 AAA
Background · nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .onetap-accessib
-
Aqua Marine
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 30 0 11 10
- On text
- 4.03:1 AA large
- On white
- 1.43:1 Fail
Text · body.onetap-dark-contrast h1
-
Peach Puff
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 19 37 3
- On text
- 3.72:1 AA large
- On white
- 1.54:1 Fail
Text · body.onetap-dark-contrast a
Gradients
-
linear-gradient(to right,rgba(0,0,0,.15) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.15) 1px,transparent 1px)
-
linear-gradient(,)
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
Google Fonts · weights 100, 200, 300, 400, 500, 600, 700, 800, 900 · headings
Aa
300
Aa
900
Merriweather
Google Fonts · weights 300, 400, 700, 900 · buttons, headings
Aa
400
Aa
500
Segoe UI
System font, or not loaded on this page · weights 400, 500 · headings, buttons · shown in a stand-in if you don’t have it
Aa
400
Aa
800
ETmodules
Self-hosted · weights 400, 800 · buttons, headings · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
30px / 1em
weight 500
Legacy Supported Living
Heading 2
26px / 1em
weight 500
Supported Living Services | Legacy Supported Li…
Heading 3
22px / 1em
weight 500
Supported Living Services | Legacy Supported Li…
Heading 4
18px / 1em
weight 500
Supported Living Services | Legacy Supported Li…
Heading 5
16px / 1em
weight 500
Supported Living Services | Legacy Supported Li…
Heading 6
14px / 1em
weight 500
Supported Living Services | Legacy Supported Li…
Body
14px / 1.7em
weight 500 · Open Sans
Legacy Supported Living provides quality supported living, care and accommodation to help people live independently with choice and dignity.
Paragraph
100% / 1.7
Legacy Supported Living provides quality supported living, care and accommodation to help people live independently with choice and dignity.
Small
100%
Legacy Supported Living provides quality supported living, care and accommodation to help people live independently with choice and dignity.
Button
14px / 24px
weight 600 · none · Segoe UI
Get started
Link
100%
Read more about Legacy Supported Living
Sizes in use
Most common across the site- 50pxline 1.2em · 7 rules
- 32pxline 1.3em · 11 rules
- 22pxline 30px · 6 rules
- 20pxline 28px · 8 rules
- 18pxline 1.4em · 21 rules
- 16pxline 1.75em · 23 rules
- 15pxline 1.6 · 5 rules
- 14pxline 22px · 35 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
nav.onetap-accessibility.onetap-plugin-onetap .onetap-container .onetap-accessib · #0048FE · radius 10px
Link
Read our latest news today.
a · #2EA3F2
Corner radius
- 8px · 9×
- 6px 6px 6px 6px · 8×
- 100% · 7×
- 50px · 6×
- 100px · 6×
- 3px · 5×
Shadows
- 0 0 0 1px #0048fe
- 0px 24px 72px -12px rgba(0,0,0,0.12)
- 0 0 0 1px #0048FE
- 0 4px 4px 0 rgba(0,0,0,.02)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
479
576
767
768
782
980
981
992
On a scale of 0 to 1440 px.
Content widths (max-width)
1080 px
580 px
550 px
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.
- ▲ CheckThere is no og:image, so links shared on social media show no picture.
- ▲ 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 Legacy Supported Living use?
- Legacy Supported Living’s website uses three typefaces: Work Sans (headings), google Fonts; Merriweather, google Fonts; ETmodules, self-hosted.
- What are Legacy Supported Living’s brand colours?
- The main colours on legacysupportedliving.co.uk are Slate Blue (#0048FE), Deep Slate Blue (#334155), Dodger Blue (#2EA3F2), Midnight Blue (#192F53), Dark Sea Green (#A1CEAD) and Royal Blue (#22577A).
- What colour is Legacy Supported Living’s text and background?
- Body text is #666666 on a #FFFFFF background.
- Where is Legacy Supported Living’s logo from?
- The logo shown in this guide was found on legacysupportedliving.co.uk’s homepage. For official logo files and usage rules, check Legacy Supported Living’s own brand or press page.
- Is this Legacy Supported Living’s official style guide?
- No. SiteStyleGuide made it from legacysupportedliving.co.uk’s public web pages on 24 October 2026, and isn’t affiliated with Legacy Supported Living. 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
legacysupportedliving-co-uk-tokens.css
/* legacysupportedliving.co.uk design tokens, from SiteStyleGuide (https://sitestyleguide.com/legacysupportedliving.co.uk) */
:root {
/* Colours */
--text: #666666;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-near-black: #111111;
--colour-cool-near-black: #0E0C19;
--colour-off-white: #EEF1F5;
--colour-slate-blue: #0048FE;
--colour-deep-slate-blue: #334155;
--colour-dodger-blue: #2EA3F2;
--colour-midnight-blue: #192F53;
--colour-dark-sea-green: #A1CEAD;
--colour-royal-blue: #22577A;
--colour-light-slate-blue: #2E4571;
--colour-deep-blue: #0000FF;
--colour-gold: #E8D833;
--colour-light-blue: #023FDC;
--colour-aqua-marine: #A2E6CC;
--colour-peach-puff: #F7C79B;
--gradient-1: linear-gradient(to right,rgba(0,0,0,.15) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.15) 1px,transparent 1px);
--gradient-2: linear-gradient(,);
/* Typefaces */
--font-headings: 'Work Sans', 'Helvetica', 'Arial', 'Lucida', sans-serif;
--font-buttons: 'Merriweather', 'Georgia', 'Times New Roman', serif;
--font-body: 'Open Sans', 'Arial', sans-serif;
--font-other: 'IBM Plex Sans Condensed', 'Helvetica', 'Arial', 'Lucida', sans-serif;
/* Type scale */
--text-h1: 30px;
--leading-h1: 1em;
--text-h2: 26px;
--leading-h2: 1em;
--text-h3: 22px;
--leading-h3: 1em;
--text-h4: 18px;
--leading-h4: 1em;
--text-h5: 16px;
--leading-h5: 1em;
--text-h6: 14px;
--leading-h6: 1em;
--text-body: 14px;
--leading-body: 1.7em;
--text-p: 100%;
--leading-p: 1.7;
--text-small: 100%;
--text-button: 14px;
--leading-button: 24px;
--text-a: 100%;
/* Shape */
--radius-1: 8px;
--radius-2: 6px 6px 6px 6px;
--radius-3: 100%;
--radius-4: 50px;
--radius-5: 100px;
--radius-6: 3px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 479px;
--breakpoint-2: 576px;
--breakpoint-3: 767px;
--breakpoint-4: 768px;
--breakpoint-5: 782px;
--breakpoint-6: 980px;
--breakpoint-7: 981px;
--breakpoint-8: 992px;
--max-width-1: 1080px;
--max-width-2: 580px;
--max-width-3: 550px;
}
{
"site": "legacysupportedliving.co.uk",
"source": "https://sitestyleguide.com/legacysupportedliving.co.uk",
"text": "#666666",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Near Black",
"hex": "#111111",
"rgb": [
17,
17,
17
]
},
{
"name": "Cool Near Black",
"hex": "#0E0C19",
"rgb": [
14,
12,
25
]
},
{
"name": "Off White",
"hex": "#EEF1F5",
"rgb": [
238,
241,
245
]
},
{
"name": "Slate Blue",
"hex": "#0048FE",
"rgb": [
0,
72,
254
]
},
{
"name": "Deep Slate Blue",
"hex": "#334155",
"rgb": [
51,
65,
85
]
},
{
"name": "Dodger Blue",
"hex": "#2EA3F2",
"rgb": [
46,
163,
242
]
},
{
"name": "Midnight Blue",
"hex": "#192F53",
"rgb": [
25,
47,
83
]
},
{
"name": "Dark Sea Green",
"hex": "#A1CEAD",
"rgb": [
161,
206,
173
]
},
{
"name": "Royal Blue",
"hex": "#22577A",
"rgb": [
34,
87,
122
]
},
{
"name": "Light Slate Blue",
"hex": "#2E4571",
"rgb": [
46,
69,
113
]
},
{
"name": "Deep Blue",
"hex": "#0000FF",
"rgb": [
0,
0,
255
]
},
{
"name": "Gold",
"hex": "#E8D833",
"rgb": [
232,
216,
51
]
},
{
"name": "Light Blue",
"hex": "#023FDC",
"rgb": [
2,
63,
220
]
},
{
"name": "Aqua Marine",
"hex": "#A2E6CC",
"rgb": [
162,
230,
204
]
},
{
"name": "Peach Puff",
"hex": "#F7C79B",
"rgb": [
247,
199,
155
]
}
],
"fonts": [
{
"name": "Work Sans",
"stack": "'Work Sans', Helvetica, Arial, Lucida, sans-serif",
"weights": [
100,
200,
300,
400,
500,
600,
700,
800,
900
],
"source": "Google Fonts"
},
{
"name": "Merriweather",
"stack": "'Merriweather', Georgia, \"Times New Roman\", serif",
"weights": [
300,
400,
700,
900
],
"source": "Google Fonts"
},
{
"name": "Segoe UI",
"stack": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Noto Sans\", Ubuntu, Cantarell, \"Helvetica Neue\", Oxygen, \"Fira Sans\", \"Droid Sans\", sans-serif",
"weights": [
400,
500
],
"source": "System font, or not loaded on this page"
},
{
"name": "ETmodules",
"stack": "ETmodules",
"weights": [
400,
800
],
"source": "Self-hosted"
},
{
"name": "Open Sans",
"stack": "Open Sans, Arial, sans-serif",
"weights": [
300,
400,
500,
600,
700,
800
],
"source": "Google Fonts"
},
{
"name": "IBM Plex Sans Condensed",
"stack": "'IBM Plex Sans Condensed', Helvetica, Arial, Lucida, sans-serif",
"weights": [
100,
200,
300,
400,
500,
600,
700
],
"source": "Google Fonts"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run legacysupportedliving.co.uk?
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/legacysupportedliving.co.uk" title="Legacy Supported Living 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 Legacy Supported Living’s
Oxford University Press
oup.com · 4 days ago
Save
WordPress.com
wp.me · 18 hours ago
Save
WordPress.org
wordpress.org · 1 day ago
Save
Foursquare
foursquare.com · 1 day ago
Save
Captured from legacysupportedliving.co.uk on 24 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Legacy Supported Living; this guide describes the public website for reference.