DomainTools
domaintools.com · set in DM Sans
SaveUnofficial A style guide made by SiteStyleGuide from creativecommons.org’s public web pages. Not affiliated with or endorsed by Creative Commons. The real site is creativecommons.org ↗
Unofficial style guide
Creative Commonsstyle guide
Creative Commons’s website (creativecommons.org) uses DM Sans for its headings and body text. Its palette is led by Medium Blue (#2E1FB8), Violet (#FF9CFF) and Green Yellow (#ADFF00), with #000000 text on #FFFFFF. Captured from the live site on 27 October 2026.
- Website
- creativecommons.org
- Typefaces
- DM Sans, DM Mono, TablePress
- Palette
- 4 neutrals, 10 colours, 3 gradients
- Captured
- 27 Oct 2026 · added by @sitestyleguide
https://creativecommons.org/
Screenshot
creativecommons.org
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Building tools for shared knowledge - Creative Commons
- ● 54 / 60 characters
- Meta description
- Missing
- ▲ 0 / 160 characters
- Site name
- Creative Commons
- og:title
- Building tools for shared knowledge - Creative Commons
- Language
- en-US
In search results
Creative Commonshttps://creativecommons.org/
Building tools for shared knowledge - Creative Commons
When shared
No og:image, so no picture
creativecommons.org
Building tools for shared knowledge - Creative Commons
Logo & favicons
No logo could be found on the homepage.
Logo
Favicons
6 found-
512 px · PNG
manifest
-
192 px · PNG
manifest
-
180 px · PNG
apple-touch-icon
-
80 px · PNG
favicon.ico
-
72 px · SVG
icon
-
Building tools for shared knowledge - Creative Commons
Light browser tab
Building tools for shared knowledge - Creative Commons
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 (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- Black 30.4%
- White 29.1%
- Medium Blue 8.9%
- Violet 7.3%
- Green Yellow 7.1%
- Misty Rose 5.2%
- Yellow 4.6%
- Off White 2.4%
- Red 1.2%
- Thistle 1%
- Yellow Green 0.9%
- Dark Slate Blue 0.7%
- Charcoal 0.6%
- Dark Blue 0.5%
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-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- —
- On white
- 21.00:1 AAA
Background, text, border · --underline-background-color, main nav.pagination ul li span.current
-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 21.00:1 AAA
- On white
- —
Background, text, border · --underline-background-color, body > footer .search input:nth-of-type(2)
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 12
- On text
- 15.91:1 AAA
- On white
- 1.32:1 Fail
Background, border, text · body > article.attention.low-importance, --underline-background-color
-
Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 80
- On text
- 1.66:1 Fail
- On white
- 12.63:1 AAA
Text · main > header
Colours
Brand colours and accents, most used first-
Medium Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 75 83 0 28
- On text
- 2.00:1 Fail
- On white
- 10.48:1 AAA
Text, background, border · --underline-background-color, .events-index .event h4
-
Violet
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 39 0 0
- On text
- 11.45:1 AAA
- On white
- 1.83:1 Fail
Background, text, border · --underline-background-color, .search-index .search-form form button:after
-
Green Yellow
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 32 0 100 0
- On text
- 17.08:1 AAA
- On white
- 1.23:1 Fail
Background, text, border · --underline-background-color, body > header .masthead h1:before
-
Misty Rose
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 15 20 0
- On text
- 16.05:1 AAA
- On white
- 1.31:1 Fail
Background, border · --underline-background-color, body > article.attention.low-importance
-
Yellow
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 12 0 100 0
- On text
- 18.47:1 AAA
- On white
- 1.14:1 Fail
Background, border · --underline-background-color, .search-index .search-form form button:before
-
Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 100 100 0
- On text
- 5.25:1 AA
- On white
- 4.00:1 AA large
Text, background, border · .event-post .content .speakers .speaker h3 a:hover, blockquote:nth-of-type(even):after
-
Thistle
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 13 14 0 16
- On text
- 10.92:1 AAA
- On white
- 1.92:1 Fail
Background · body > article.attention.low-importance, --underline-background-color
-
Yellow Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 21 0 65 22
- On text
- 10.80:1 AAA
- On white
- 1.94:1 Fail
Background · body > header .masthead h1:before
-
Dark Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 61 40 0 50
- On text
- 2.48:1 Fail
- On white
- 8.48:1 AAA
Background · .chooser-page details.format footer button
-
Dark Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 75 83 0 47
- On text
- 1.54:1 Fail
- On white
- 13.63:1 AAA
Text · body > article.attention.low-importance a
Gradients
-
linear-gradient(, ), -webkit-linear-gradient(, ), -webkit-linear-gradient(currentColor, currentColor)
-
linear-gradient(, ), linear-gradient(, ), linear-gradient(currentColor, currentColor)
-
linear-gradient(45deg, #ADFF00, #FF9CFF)
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.
DM Sans
Aa
400
Aa
700
DM Sans
System font, or not loaded on this page · weights 400, 500, 600, 700 · headings, buttons · shown in a stand-in if you don’t have it
Aa
300
Aa
700
DM Mono
System font, or not loaded on this page · weights 300, 400, 700 · headings, buttons · shown in a stand-in if you don’t have it
Aa
400
Aa
700
TablePress
Self-hosted · weights 400, 700 · buttons · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
3.56em · 57 px
weight 700 · DM Sans
Creative Commons
Heading 2
1em · 16 px / 1.5
weight 700 · none · Roboto Condensed
Building tools for shared knowledge - Creative …
Heading 3
1.4em · 22 px
weight 700 · none · DM Sans
Building tools for shared knowledge - Creative …
Heading 4
1.4em · 22 px
weight 400 · DM Sans
Building tools for shared knowledge - Creative …
Heading 5
1.4em · 22 px
DM Sans
Building tools for shared knowledge - Creative …
Heading 6
1.3em · 21 px
DM Sans
Building tools for shared knowledge - Creative …
Paragraph
1.5em · 24 px / 1.4
weight 700 · DM Mono
The quick brown fox jumps over the lazy dog.
Link
1em · 16 px
weight 400 · none · DM Mono
Read more about Creative Commons
Sizes in use
Most common across the site- 26px6 rules
- 24pxline 150% · 17 rules
- 22pxline 1.4 · 15 rules
- 21pxline 1.2 · 8 rules
- 19pxline 1.4 · 42 rules
- 16pxline 150% · 32 rules
- 14pxline 1 · 6 rules
- 13pxline 1.3 · 21 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
.chooser-page details.format footer button · #324C7F · radius 3px
Corner radius
- 16px · 33×
- 60px · 15×
- 5px · 6×
- 20px · 3×
- 50% · 3×
- 4px · 2×
Shadows
- 2px 2px #ADFF00
- 2px 2px #FF9CFF
- 0 0 0 2px rgba(211, 47, 47, 0.2)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
705
765
979
1140
1170
1190
1300
1500
On a scale of 0 to 1500 px.
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 54 characters, short enough to show in full in search results.
- ▲ CheckThere is no meta description, so search engines will pick text from the page.
- ▲ 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 Creative Commons use?
- Creative Commons’s website uses two typefaces: DM Sans (headings and body text), a system font; TablePress, self-hosted.
- What are Creative Commons’s brand colours?
- The main colours on creativecommons.org are Medium Blue (#2E1FB8), Violet (#FF9CFF), Green Yellow (#ADFF00), Misty Rose (#FFD9CC), Yellow (#E0FF00) and Red (#FF0000).
- What colour is Creative Commons’s text and background?
- Body text is #000000 on a #FFFFFF background.
- Is this Creative Commons’s official style guide?
- No. SiteStyleGuide made it from creativecommons.org’s public web pages on 27 October 2026, and isn’t affiliated with Creative Commons. 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
creativecommons-org-tokens.css
/* creativecommons.org design tokens, from SiteStyleGuide (https://sitestyleguide.com/creativecommons.org) */
:root {
/* Colours */
--text: #000000;
--background: #FFFFFF;
--colour-black: #000000;
--colour-white: #FFFFFF;
--colour-off-white: #E0E0E0;
--colour-charcoal: #333333;
--colour-medium-blue: #2E1FB8;
--colour-violet: #FF9CFF;
--colour-green-yellow: #ADFF00;
--colour-misty-rose: #FFD9CC;
--colour-yellow: #E0FF00;
--colour-red: #FF0000;
--colour-thistle: #BAB8D6;
--colour-yellow-green: #9EC846;
--colour-dark-slate-blue: #324C7F;
--colour-dark-blue: #221787;
--gradient-1: linear-gradient(, ), -webkit-linear-gradient(, ), -webkit-linear-gradient(currentColor, currentColor);
--gradient-2: linear-gradient(, ), linear-gradient(, ), linear-gradient(currentColor, currentColor);
--gradient-3: linear-gradient(45deg, #ADFF00, #FF9CFF);
/* Typefaces */
--font-headings: 'DM Sans';
--font-buttons: 'DM Sans';
/* Type scale */
--text-h1: 3.56em;
--text-h2: 1em;
--leading-h2: 1.5;
--text-h3: 1.4em;
--text-h4: 1.4em;
--text-h5: 1.4em;
--text-h6: 1.3em;
--text-p: 1.5em;
--leading-p: 1.4;
--text-a: 1em;
/* Shape */
--radius-1: 16px;
--radius-2: 60px;
--radius-3: 5px;
--radius-4: 20px;
--radius-5: 50%;
--radius-6: 4px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 705px;
--breakpoint-2: 765px;
--breakpoint-3: 979px;
--breakpoint-4: 1140px;
--breakpoint-5: 1170px;
--breakpoint-6: 1190px;
--breakpoint-7: 1300px;
--breakpoint-8: 1500px;
}
{
"site": "creativecommons.org",
"source": "https://sitestyleguide.com/creativecommons.org",
"text": "#000000",
"background": "#FFFFFF",
"colours": [
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Off White",
"hex": "#E0E0E0",
"rgb": [
224,
224,
224
]
},
{
"name": "Charcoal",
"hex": "#333333",
"rgb": [
51,
51,
51
]
},
{
"name": "Medium Blue",
"hex": "#2E1FB8",
"rgb": [
46,
31,
184
]
},
{
"name": "Violet",
"hex": "#FF9CFF",
"rgb": [
255,
156,
255
]
},
{
"name": "Green Yellow",
"hex": "#ADFF00",
"rgb": [
173,
255,
0
]
},
{
"name": "Misty Rose",
"hex": "#FFD9CC",
"rgb": [
255,
217,
204
]
},
{
"name": "Yellow",
"hex": "#E0FF00",
"rgb": [
224,
255,
0
]
},
{
"name": "Red",
"hex": "#FF0000",
"rgb": [
255,
0,
0
]
},
{
"name": "Thistle",
"hex": "#BAB8D6",
"rgb": [
186,
184,
214
]
},
{
"name": "Yellow Green",
"hex": "#9EC846",
"rgb": [
158,
200,
70
]
},
{
"name": "Dark Slate Blue",
"hex": "#324C7F",
"rgb": [
50,
76,
127
]
},
{
"name": "Dark Blue",
"hex": "#221787",
"rgb": [
34,
23,
135
]
}
],
"fonts": [
{
"name": "DM Sans",
"stack": "\"DM Sans\"",
"weights": [
400,
500,
600,
700
],
"source": "System font, or not loaded on this page"
},
{
"name": "DM Mono",
"stack": "\"DM Mono\"",
"weights": [
300,
400,
700
],
"source": "System font, or not loaded on this page"
},
{
"name": "TablePress",
"stack": "TablePress",
"weights": [
400,
700
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run creativecommons.org?
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/creativecommons.org" title="Creative Commons 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 DM Sans
Other websites using DM Sans as their main typeface
BlogVitals
blogvitals.com · set in DM Sans
Save
ARH Digital
arhdesign.tech · set in DM Sans
Save
Similar colours
Websites whose lead colour is closest to Creative Commons’s
The Motley Fool
fool.com · 4 days ago
Save
Eclipse Foundation
eclipse.org · 5 days ago
Save
ABC
abc.com · 2 days ago
Save
craigslist
craigslist.org · 4 days ago
Save
Captured from creativecommons.org on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Creative Commons; this guide describes the public website for reference.