Metacritic
metacritic.com · set in ProximaNova
SaveUnofficial A style guide made by SiteStyleGuide from livejournal.com’s public web pages. Not affiliated with or endorsed by livejournal.com. The real site is livejournal.com ↗
Unofficial style guide
livejournal.comstyle guide
livejournal.com’s website (livejournal.com) uses ProximaNova for its headings and body text. Its palette is led by Deep Sky Blue (#00A3D9), Light Steel Blue (#0099CC) and Light Slate Grey (#004359), with #242F33 text on #FFFFFF. Captured from the live site on 27 October 2026.
- Website
- livejournal.com
- Typefaces
- ProximaNova, a, Arial
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 27 Oct 2026 · added by @sitestyleguide
https://www.livejournal.com/
Screenshot
livejournal.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
- LiveJournal: Discover global communities of bloggers who share your unique passions and interests.
- ▲ 98 / 60 characters
- Meta description
- Your life is the best story! Just start your blog today!
- ● 56 / 160 characters
- og:title
- LiveJournal: Discover global communities of bloggers who share your unique passions and interests.
- og:description
- Your life is the best story! Just start your blog today!
- Language
- en-us
- Theme colour
- #004359
In search results
livejournal.comhttps://www.livejournal.com/
LiveJournal: Discover global communities of bloggers who shar…
Your life is the best story! Just start your blog today!
When shared
livejournal.com
LiveJournal: Discover global communities of bloggers who share your unique passions and i…
Your life is the best story! Just start your blog today!
Logo & favicons
Found as: image in the header. PNG, 346 × 60.
Logo
On white
On black
On Deep Sky Blue
Favicons
5 found-
512 px · PNG
manifest
-
256 px · ICO shortcut icon
-
192 px · PNG
icon
-
192 px · PNG
manifest
-
180 px · PNG
apple-touch-icon
LiveJournal: Discover global communities of bloggers who share your unique passions and interests.
Light browser tab
LiveJournal: Discover global communities of bloggers who share your unique passions and interests.
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 (#242F33) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 42.1%
- Cool Grey 10.4%
- Deep Sky Blue 9.4%
- Black 8.7%
- Cool Off White 7.3%
- Light Steel Blue 3.7%
- Light Slate Grey 3.4%
- Light Blue 3.2%
- Light Sky Blue 2.2%
- Deep Slate Grey 1.9%
- Tomato 1.7%
- Deep Steel Blue 1.4%
- Sky Blue 1.4%
- Dark Orange 1.2%
- Medium Sea Green 1.2%
- Red 0.9%
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.73:1 AAA
- On white
- —
Background, text, graphic · inline style on <path>, .s-header-sub-list-item__title
-
Cool Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 20 5 0 40
- On text
- 4.14:1 AA large
- On white
- 3.31:1 AA large
Graphic, text, background · .b-topten-journaltitle, .columns-2 H2
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.53:1 Fail
- On white
- 21.00:1 AAA
Text, background, graphic · DIV.lj_ippu_app DIV.lj_ippu_titlebar, DIV.lj_ippu_app H3
-
Cool Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 5 1 0 10
- On text
- 10.53:1 AAA
- On white
- 1.30:1 Fail
Border, background, text · HR.hr, .b-bubble-disabled
Colours
Brand colours and accents, most used first-
Deep Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 25 0 15
- On text
- 4.73:1 AA
- On white
- 2.90:1 Fail
Text, background, border · A, .button-icon--telegram .button-icon__icon
-
Light Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 25 0 20
- On text
- 4.20:1 AA large
- On white
- 3.27:1 AA large
Background, text, border · .b-flatbutton, DIV .b-flatbutton-loading
-
Light Slate Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 25 0 65
- On text
- 1.27:1 Fail
- On white
- 10.79:1 AAA
Background, theme, text · .button-icon--donation .button-icon__icon, theme-color meta tag
-
Light Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 25 6 0 20
- On text
- 6.98:1 AA
- On white
- 1.97:1 Fail
Graphic, text, border · .s-header-item--special .s-header-item__link, .body--header-v5 .b-adjusting
-
Light Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 25 0 0
- On text
- 6.53:1 AA
- On white
- 2.10:1 Fail
Background, text, border · .flatbutton--neutral-blue, .s-header-extra-menu-item__link--pending::before
-
Deep Slate Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 25 0 75
- On text
- 1.02:1 Fail
- On white
- 14.03:1 AAA
Background, text, border · .s-drop, .s-header-extra
-
Tomato
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 70 73 0
- On text
- 4.16:1 AA large
- On white
- 3.30:1 AA large
Background, text, graphic · .header-notif-center-slot .s-header-notifications-count, .ljlikus--like-active .flaticon--like
-
Deep Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 25 0 30
- On text
- 3.31:1 AA large
- On white
- 4.15:1 AA large
Text, background · .button-has-link--marathon .basepopup a:active, .layers-item-name
-
Sky Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 82 28 0 7
- On text
- 5.33:1 AA
- On white
- 2.57:1 Fail
Background, border, graphic · .button-icon--telegram .button-icon__icon, .b-btn
-
Dark Orange
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 42 100 0
- On text
- 6.24:1 AA
- On white
- 2.20:1 Fail
Background, border, graphic · .notification__icon--post, .notification__icon--whosback
-
Medium Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 70 0 41 25
- On text
- 5.80:1 AA
- On white
- 2.37:1 Fail
Background, graphic, border · .lightbutton--green, .b-flatbutton-green
-
Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 78 78 7
- On text
- 3.34:1 AA large
- On white
- 4.11:1 AA large
Background, border, text · .lightbutton--red, .emailverify--confirm .emailverify__button--red
Gradients
-
linear-gradient(180deg,#2aabee 0,#229ed9 100%)
-
linear-gradient(135deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))
-
linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1) 50%)
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.
ProximaNova
Aa
300
Aa
700
ProximaNova
Self-hosted · weights 300, 400, 600, 700 · headings, buttons · shown in a stand-in if you don’t have it
Aa
400
a
System font, or not loaded on this page · headings, buttons · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Arial
System font, or not loaded on this page · weights 400, 700 · headings · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Helvetica
System font, or not loaded on this page · weights 400, 700 · headings · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
2em · 32 px
livejournal.com
Heading 2
1.428em · 23 px / 1.4
weight 400 · uppercase · Arial
LiveJournal: Discover global communities of blo…
Heading 3
13px / 1.4
weight 400
LiveJournal: Discover global communities of blo…
Heading 4
13px / 1.4
weight 400
LiveJournal: Discover global communities of blo…
Heading 5
1em · 16 px
weight 700 · Arial
LiveJournal: Discover global communities of blo…
Heading 6
1em · 16 px
weight 400 · Arial
LiveJournal: Discover global communities of blo…
Body
15px / 1.4
Your life is the best story! Just start your blog today!
Paragraph
100% / 1.4
Your life is the best story! Just start your blog today!
Small
80%
Your life is the best story! Just start your blog today!
Button
100% / 1.15
none
Get started
Link
12px / 1
weight 400 · uppercase
Read more about livejournal.com
Sizes in use
Most common across the site- 20pxline 1 · 9 rules
- 18pxline 1.2 · 14 rules
- 16pxline 1.4 · 48 rules
- 15pxline 1.05 · 11 rules
- 14pxline 16px · 81 rules
- 13pxline 16px · 28 rules
- 12pxline 1.2 · 33 rules
- 11pxline 1.6 · 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-icon · #D9EDF7 · radius 28px
Link
Read our latest news today.
a · #00A3D9
Corner radius
- 3px · 31×
- 4px · 19×
- 2px · 19×
- 50% · 15×
- 10px · 15×
- 6px · 10×
Shadows
- 0 0 0 0 transparent
- 0 0 0 2px #00A3D9
- 0 2px 3px rgba(53,99,161,.7)
- 0 1px 2px 0 rgb(60,64,67,.3),0 1px 3px 1px rgb(60,64,67,.15)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
480
600
650
750
768
950
1000
1200
On a scale of 0 to 1440 px.
Content widths (max-width)
1256 px
1240 px
1000 px
765 px
500 px
300 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 98 characters. Google usually cuts titles near 60, so the end may not show in results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does livejournal.com use?
- livejournal.com’s website uses one typeface: ProximaNova (headings and body text), self-hosted.
- What are livejournal.com’s brand colours?
- The main colours on livejournal.com are Deep Sky Blue (#00A3D9), Light Steel Blue (#0099CC), Light Slate Grey (#004359), Light Blue (#99BFCC), Light Sky Blue (#00C0FF) and Deep Slate Grey (#003040).
- What colour is livejournal.com’s text and background?
- Body text is #242F33 on a #FFFFFF background.
- Where is livejournal.com’s logo from?
- The logo shown in this guide was found on livejournal.com’s homepage. For official logo files and usage rules, check livejournal.com’s own brand or press page.
- Is this livejournal.com’s official style guide?
- No. SiteStyleGuide made it from livejournal.com’s public web pages on 27 October 2026, and isn’t affiliated with livejournal.com. 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
livejournal-com-tokens.css
/* livejournal.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/livejournal.com) */
:root {
/* Colours */
--text: #242F33;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-cool-grey: #7A9199;
--colour-black: #000000;
--colour-cool-off-white: #DAE3E6;
--colour-deep-sky-blue: #00A3D9;
--colour-light-steel-blue: #0099CC;
--colour-light-slate-grey: #004359;
--colour-light-blue: #99BFCC;
--colour-light-sky-blue: #00C0FF;
--colour-deep-slate-grey: #003040;
--colour-tomato: #FF4C44;
--colour-deep-steel-blue: #0086B3;
--colour-sky-blue: #2AABEE;
--colour-dark-orange: #FF9500;
--colour-medium-sea-green: #39BF71;
--colour-red: #EC3434;
--gradient-1: linear-gradient(180deg,#2aabee 0,#229ed9 100%);
--gradient-2: linear-gradient(135deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));
--gradient-3: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1) 50%);
/* Typefaces */
--font-headings: 'ProximaNova', 'Helvetica', sans-serif;
--font-buttons: 'ProximaNova', 'Helvetica', sans-serif;
--font-other: 'ProximaNova Black', sans-serif;
/* Type scale */
--text-h1: 2em;
--text-h2: 1.428em;
--leading-h2: 1.4;
--text-h3: 13px;
--leading-h3: 1.4;
--text-h4: 13px;
--leading-h4: 1.4;
--text-h5: 1em;
--text-h6: 1em;
--text-body: 15px;
--leading-body: 1.4;
--text-p: 100%;
--leading-p: 1.4;
--text-small: 80%;
--text-button: 100%;
--leading-button: 1.15;
--text-a: 12px;
--leading-a: 1;
/* Shape */
--radius-1: 3px;
--radius-2: 4px;
--radius-3: 2px;
--radius-4: 50%;
--radius-5: 10px;
--radius-6: 6px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 480px;
--breakpoint-2: 600px;
--breakpoint-3: 650px;
--breakpoint-4: 750px;
--breakpoint-5: 768px;
--breakpoint-6: 950px;
--breakpoint-7: 1000px;
--breakpoint-8: 1200px;
--max-width-1: 1256px;
--max-width-2: 1240px;
--max-width-3: 1000px;
--max-width-4: 765px;
--max-width-5: 500px;
--max-width-6: 300px;
}
{
"site": "livejournal.com",
"source": "https://sitestyleguide.com/livejournal.com",
"text": "#242F33",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Cool Grey",
"hex": "#7A9199",
"rgb": [
122,
145,
153
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Cool Off White",
"hex": "#DAE3E6",
"rgb": [
218,
227,
230
]
},
{
"name": "Deep Sky Blue",
"hex": "#00A3D9",
"rgb": [
0,
163,
217
]
},
{
"name": "Light Steel Blue",
"hex": "#0099CC",
"rgb": [
0,
153,
204
]
},
{
"name": "Light Slate Grey",
"hex": "#004359",
"rgb": [
0,
67,
89
]
},
{
"name": "Light Blue",
"hex": "#99BFCC",
"rgb": [
153,
191,
204
]
},
{
"name": "Light Sky Blue",
"hex": "#00C0FF",
"rgb": [
0,
192,
255
]
},
{
"name": "Deep Slate Grey",
"hex": "#003040",
"rgb": [
0,
48,
64
]
},
{
"name": "Tomato",
"hex": "#FF4C44",
"rgb": [
255,
76,
68
]
},
{
"name": "Deep Steel Blue",
"hex": "#0086B3",
"rgb": [
0,
134,
179
]
},
{
"name": "Sky Blue",
"hex": "#2AABEE",
"rgb": [
42,
171,
238
]
},
{
"name": "Dark Orange",
"hex": "#FF9500",
"rgb": [
255,
149,
0
]
},
{
"name": "Medium Sea Green",
"hex": "#39BF71",
"rgb": [
57,
191,
113
]
},
{
"name": "Red",
"hex": "#EC3434",
"rgb": [
236,
52,
52
]
}
],
"fonts": [
{
"name": "ProximaNova",
"stack": "ProximaNova, Helvetica, sans-serif",
"weights": [
300,
400,
600,
700
],
"source": "Self-hosted"
},
{
"name": "a",
"stack": "a",
"weights": [],
"source": "System font, or not loaded on this page"
},
{
"name": "Arial",
"stack": "Arial, sans-serif",
"weights": [
400,
700
],
"source": "System font, or not loaded on this page"
},
{
"name": "Helvetica",
"stack": "Helvetica, Arial, sans-serif",
"weights": [
400,
700
],
"source": "System font, or not loaded on this page"
},
{
"name": "ProximaNova Black",
"stack": "'ProximaNova Black', sans-serif",
"weights": [
900
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run livejournal.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/livejournal.com" title="livejournal.com 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 ProximaNova
Other websites using ProximaNova as their main typefaceSimilar colours
Websites whose lead colour is closest to livejournal.com’s
Calculatio
calculat.io · 5 days ago
Save
Sketchfab
sketchfab.com · 4 days ago
Save
Sketchfab
skfb.ly · 4 days ago
Save
Weather Underground
wunderground.com · 5 days ago
Save
Captured from livejournal.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by livejournal.com; this guide describes the public website for reference.