Lulu
lulu.com · set in museo-sans
SaveUnofficial A style guide made by SiteStyleGuide from copyblogger.com’s public web pages. Not affiliated with or endorsed by Copyblogger. The real site is copyblogger.com ↗
Unofficial style guide
Copybloggerstyle guide
Copyblogger’s website (copyblogger.com) sets its headings in museo-sans and its body text in pt-serif. Its palette is led by Royal Blue (#0066CC), Slate Grey (#546E7A) and Blue (#0015FF), with #263238 text on #FFFFFF. Captured from the live site on 27 October 2026.
- Website
- copyblogger.com
- Typefaces
- museo-sans, pt-serif
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 27 Oct 2026 · added by @sitestyleguide
https://copyblogger.com/
Screenshot
copyblogger.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
- Copyblogger - Content marketing tools and training.
- ● 51 / 60 characters
- Meta description
- Content marketing tools and training.
- ▲ 37 / 160 characters
- Site name
- Copyblogger
- og:title
- Copyblogger
- og:description
- Content marketing tools and training.
- Language
- en-US
In search results
Copybloggerhttps://copyblogger.com/
Copyblogger - Content marketing tools and training.
Content marketing tools and training.
When shared
No og:image, so no picture
copyblogger.com
Copyblogger
Content marketing tools and training.
Logo & favicons
No logo could be found on the homepage.
Logo
Favicons
1 found-
Copyblogger - Content marketing tools and training.
Light browser tab
Copyblogger - Content marketing tools and training.
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 (#263238) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 37.6%
- Royal Blue 13.3%
- Cool Charcoal 9.7%
- Black 6.6%
- Slate Grey 5.3%
- Blue 4.9%
- Blue Violet 4.7%
- Dodger Blue 4.3%
- Cool Light Grey 3.6%
- Dark Turquoise 3.6%
- Medium Slate Blue 2.5%
- Indian Red 0.9%
- Red 0.8%
- Fire Brick 0.8%
- Aqua 0.7%
- Crimson 0.7%
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
- 13.16:1 AAA
- On white
- —
Text, background, border · body, a.button.white
-
Cool Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 32 11 0 78
- On text
- —
- On white
- 13.16:1 AAA
Text, background, border · button, body
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.60:1 Fail
- On white
- 21.00:1 AAA
Text, background, border · .formkit-header h2, .sidebar #nf-form-45-cont .nTitle
-
Cool Light Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 6 2 0 14
- On text
- 9.09:1 AAA
- On white
- 1.45:1 Fail
Border, background · .site-container button:disabled, blockquote::after
Colours
Brand colours and accents, most used first-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 50 0 20
- On text
- 2.36:1 Fail
- On white
- 5.57:1 AA
Background, text, border · a.button.primary:before, input[type="button"].primary
-
Slate Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 31 10 0 52
- On text
- 2.44:1 Fail
- On white
- 5.40:1 AA
Text, border · h6, .nav-search
-
Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 92 0 0
- On text
- 1.60:1 Fail
- On white
- 8.23:1 AAA
Background, graphic · .custom-substack-widget.csw-layout-column .csw-container > :last-child button, .buttonWithArrow a
-
Blue Violet
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 58 74 0 5
- On text
- 2.20:1 Fail
- On white
- 5.98:1 AA
Background · a.button.primary:before, input[type="button"].primary
-
Dodger Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 48 0 0
- On text
- 3.60:1 AA large
- On white
- 3.66:1 AA large
Background · .custom-substack-widget.csw-layout-column .csw-container > :last-child button, .buttonWithArrow a
-
Dark Turquoise
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 0 22
- On text
- 6.20:1 AA
- On white
- 2.12:1 Fail
Background · .custom-substack-widget.csw-layout-column .csw-container > :last-child button, .courseContainerCard button
-
Medium Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 60 56 0 7
- On text
- 2.91:1 Fail
- On white
- 4.53:1 AA
Background, text, border · .roadmap-block:hover h2, .linkbtn
-
Indian Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 71 67 7
- On text
- 3.52:1 AA large
- On white
- 3.73:1 AA large
Background, text, border · .click-to-tweet-block-wrap .block-characters-remaining.over-limit, .swp-more
-
Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 92 92 11
- On text
- 2.76:1 Fail
- On white
- 4.77:1 AA
Background, border, text · .join-section .price-slash::before, .join-section .price-slash::after
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 80 80 25
- On text
- 2.21:1 Fail
- On white
- 5.97:1 AA
Background, text, border · .swp-flipboard, div.swp-flipboard
-
Aqua
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 72 0 0 0
- On text
- 10.66:1 AAA
- On white
- 1.23:1 Fail
Background · .buttonWithArrow a
-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 88 71 15
- On text
- 2.62:1 Fail
- On white
- 5.03:1 AA
Border · --ctlb-line-color, --ctlb-icon-bg
Gradients
-
linear-gradient(to top right, #0066CC, #653EF1)
-
linear-gradient(135deg, #0015FF 0%, #0084FF 50%, #00C6C6 100%)
-
linear-gradient( 135deg, #0015FF 0%, #0084FF 50%, #00C6C6 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.
museo-sans
Aa
400
Aa
900
museo-sans
Adobe Fonts · weights 400, 500, 600, 700, 900 · headings, buttons · shown in a stand-in if you don’t have it
Aa
400
Aa
700
pt-serif
Adobe Fonts · weights 400, 500, 700 · body · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS · root 10 px
Heading 1
6.4rem · 64 px / 1.12
weight 900 · museo-sans
Copyblogger
Heading 2
3.6rem · 36 px / 1.12
weight 700 · museo-sans
Copyblogger - Content marketing tools and train…
Heading 3
2.8rem · 28 px / 1.2
weight 700 · museo-sans
Copyblogger - Content marketing tools and train…
Heading 4
2rem · 20 px / 1.2
weight 700 · museo-sans
Copyblogger - Content marketing tools and train…
Heading 5
1.4rem · 14 px / 1.5
weight 700 · uppercase · museo-sans
Copyblogger - Content marketing tools and train…
Heading 6
1.4rem · 14 px / 1.5
weight 700 · uppercase · museo-sans
Copyblogger - Content marketing tools and train…
Body
2.0rem · 20 px / 1.7
weight 400 · pt-serif
Content marketing tools and training.
Paragraph
22px / 1.7
weight 400 · uppercase
Content marketing tools and training.
Small
80%
Content marketing tools and training.
Button
1.6rem · 16 px / 1.15
weight 600 · none
Get started
Link
16px / 0
weight 500 · uppercase · Source Sans Pro
Read more about Copyblogger
Sizes in use
Most common across the site- 24pxline 1.5 · 11 rules
- 20pxline 1 · 20 rules
- 18pxline 22px · 12 rules
- 16pxline 1.5 · 17 rules
- 14pxline 1.5 · 20 rules
- 13pxline 1.5em · 14 rules
- 12pxline 1.6 · 10 rules
- 10pxline 1.8 · 13 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
.courseContainerCard button · #0015FF · radius 10rem
Link
Read our latest news today.
a · #0066CC
Corner radius
- 5px · 25×
- 4px · 13×
- 3px · 12×
- 100px · 8×
- 10px · 7×
- 50px · 6×
Shadows
- 0 4px 12px 0 rgba(38,50,56,0.30)
- 0px 0px 11px 0px rgb(50 50 50 / 47%)
- 0 10px 60px rgb(0 0 0 / 14%)
- 0 2px 15px 0 rgba(0,102,204,0.25)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
478
480
482
600
767
768
782
960
On a scale of 0 to 1440 px.
Content widths (max-width)
1200 px
1000 px
960 px
800 px
700 px
420 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.
- ▲ CheckThe description is only 37 characters. There is room to say more.
- ▲ 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 Copyblogger use?
- Copyblogger’s website uses two typefaces: museo-sans (headings), adobe Fonts; pt-serif (body text), adobe Fonts.
- What are Copyblogger’s brand colours?
- The main colours on copyblogger.com are Royal Blue (#0066CC), Slate Grey (#546E7A), Blue (#0015FF), Blue Violet (#653EF1), Dodger Blue (#0084FF) and Dark Turquoise (#00C6C6).
- What colour is Copyblogger’s text and background?
- Body text is #263238 on a #FFFFFF background.
- Is this Copyblogger’s official style guide?
- No. SiteStyleGuide made it from copyblogger.com’s public web pages on 27 October 2026, and isn’t affiliated with Copyblogger. 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
copyblogger-com-tokens.css
/* copyblogger.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/copyblogger.com) */
:root {
/* Colours */
--text: #263238;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-cool-charcoal: #263238;
--colour-black: #000000;
--colour-cool-light-grey: #CFD8DC;
--colour-royal-blue: #0066CC;
--colour-slate-grey: #546E7A;
--colour-blue: #0015FF;
--colour-blue-violet: #653EF1;
--colour-dodger-blue: #0084FF;
--colour-dark-turquoise: #00C6C6;
--colour-medium-slate-blue: #5F67EC;
--colour-indian-red: #EE464F;
--colour-red: #E41313;
--colour-fire-brick: #BF2626;
--colour-aqua: #47FFFF;
--colour-crimson: #D91B3E;
--gradient-1: linear-gradient(to top right, #0066CC, #653EF1);
--gradient-2: linear-gradient(135deg, #0015FF 0%, #0084FF 50%, #00C6C6 100%);
--gradient-3: linear-gradient( 135deg, #0015FF 0%, #0084FF 50%, #00C6C6 100% );
/* Typefaces */
--font-headings: 'museo-sans', sans-serif;
--font-buttons: 'museo-sans', sans-serif;
--font-body: 'pt-serif', 'Georgia', serif;
/* Type scale */
--text-h1: 6.4rem;
--leading-h1: 1.12;
--text-h2: 3.6rem;
--leading-h2: 1.12;
--text-h3: 2.8rem;
--leading-h3: 1.2;
--text-h4: 2rem;
--leading-h4: 1.2;
--text-h5: 1.4rem;
--leading-h5: 1.5;
--text-h6: 1.4rem;
--leading-h6: 1.5;
--text-body: 2.0rem;
--leading-body: 1.7;
--text-p: 22px;
--leading-p: 1.7;
--text-small: 80%;
--text-button: 1.6rem;
--leading-button: 1.15;
--text-a: 16px;
--leading-a: 0;
/* Shape */
--radius-1: 5px;
--radius-2: 4px;
--radius-3: 3px;
--radius-4: 100px;
--radius-5: 10px;
--radius-6: 50px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 478px;
--breakpoint-2: 480px;
--breakpoint-3: 482px;
--breakpoint-4: 600px;
--breakpoint-5: 767px;
--breakpoint-6: 768px;
--breakpoint-7: 782px;
--breakpoint-8: 960px;
--max-width-1: 1200px;
--max-width-2: 1000px;
--max-width-3: 960px;
--max-width-4: 800px;
--max-width-5: 700px;
--max-width-6: 420px;
}
{
"site": "copyblogger.com",
"source": "https://sitestyleguide.com/copyblogger.com",
"text": "#263238",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Cool Charcoal",
"hex": "#263238",
"rgb": [
38,
50,
56
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Cool Light Grey",
"hex": "#CFD8DC",
"rgb": [
207,
216,
220
]
},
{
"name": "Royal Blue",
"hex": "#0066CC",
"rgb": [
0,
102,
204
]
},
{
"name": "Slate Grey",
"hex": "#546E7A",
"rgb": [
84,
110,
122
]
},
{
"name": "Blue",
"hex": "#0015FF",
"rgb": [
0,
21,
255
]
},
{
"name": "Blue Violet",
"hex": "#653EF1",
"rgb": [
101,
62,
241
]
},
{
"name": "Dodger Blue",
"hex": "#0084FF",
"rgb": [
0,
132,
255
]
},
{
"name": "Dark Turquoise",
"hex": "#00C6C6",
"rgb": [
0,
198,
198
]
},
{
"name": "Medium Slate Blue",
"hex": "#5F67EC",
"rgb": [
95,
103,
236
]
},
{
"name": "Indian Red",
"hex": "#EE464F",
"rgb": [
238,
70,
79
]
},
{
"name": "Red",
"hex": "#E41313",
"rgb": [
228,
19,
19
]
},
{
"name": "Fire Brick",
"hex": "#BF2626",
"rgb": [
191,
38,
38
]
},
{
"name": "Aqua",
"hex": "#47FFFF",
"rgb": [
71,
255,
255
]
},
{
"name": "Crimson",
"hex": "#D91B3E",
"rgb": [
217,
27,
62
]
}
],
"fonts": [
{
"name": "museo-sans",
"stack": "'museo-sans', sans-serif",
"weights": [
400,
500,
600,
700,
900
],
"source": "Adobe Fonts"
},
{
"name": "pt-serif",
"stack": "'pt-serif', Georgia, serif",
"weights": [
400,
500,
700
],
"source": "Adobe Fonts"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run copyblogger.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/copyblogger.com" title="Copyblogger 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 museo-sans
Other websites using museo-sans as their main typefaceSimilar colours
Websites whose lead colour is closest to Copyblogger’s
sfgate.com
sfgate.com · 2 days ago
Save
slideshare.net
slideshare.net · 4 days ago
Save
kakaku.com
kakaku.com · 5 days ago
Save
エキサイトブログ
exblog.jp · 2 days ago
Save
Captured from copyblogger.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Copyblogger; this guide describes the public website for reference.