MyAnimeList.net
myanimelist.net · 4 days ago
SaveUnofficial A style guide made by SiteStyleGuide from comicbook.com’s public web pages. Not affiliated with or endorsed by ComicBook.com. The real site is comicbook.com ↗
Unofficial style guide
ComicBook.comstyle guide
ComicBook.com’s website (comicbook.com) sets its headings in Clash Grotesk and its body text in Helvetica Neue. Its palette is led by Light Slate Blue (#284A9C), Midnight Blue (#02144A) and Deep Slate Blue (#1E3774), with #000000 text on #FFFFFF. Captured from the live site on 26 October 2026.
- Website
- comicbook.com
- Typefaces
- Clash Grotesk, Helvetica Neue, Clash Display
- Palette
- 4 neutrals, 4 colours
- Captured
- 26 Oct 2026 · added by @sitestyleguide
https://comicbook.com/
Screenshot
comicbook.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
- Comicbook.com: Comics, Movies, TV, Gaming and Anime
- ● 51 / 60 characters
- Meta description
- Comicbook.com is the #1 site for everything geek. Get news, opinion and exclusives on movies, TV shows, video games, comics, anime and more.
- ● 140 / 160 characters
- Site name
- ComicBook.com
- og:title
- Home
- og:description
- Comicbook.com is the #1 site for everything geek. Get news, opinion and exclusives on movies, TV shows, video games, comics, anime and more.
- Language
- en-US
In search results
ComicBook.comhttps://comicbook.com/
Comicbook.com: Comics, Movies, TV, Gaming and Anime
Comicbook.com is the #1 site for everything geek. Get news, opinion and exclusives on movies, TV shows, video games, comics, anime and more.
When shared
comicbook.com
Home
Comicbook.com is the #1 site for everything geek. Get news, opinion and exclusives on movies, TV shows, video…
Logo & favicons
Found as: schema.org logo. WEBP, 522 × 89.
Logo
On white
On black
On Light Slate Blue
Favicons
4 found-
192 px · WEBP
icon
-
180 px · WEBP
apple-touch-icon
-
32 px · PNG
icon
-
16 px · ICO favicon.ico
Comicbook.com: Comics, Movies, TV, Gaming and Anime
Light browser tab
Comicbook.com: Comics, Movies, TV, Gaming and Anime
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- White 30.9%
- Light Slate Blue 19.5%
- Midnight Blue 14.3%
- Off White 13.6%
- Black 7.8%
- Deep Slate Blue 7.5%
- Grey 4.2%
- Crimson 2.2%
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
- 21.00:1 AAA
- On white
- —
Text, background, border · .displate-left-col .giveaway-title, #giveaway-countdown .countdown-segment
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 12
- On text
- 15.91:1 AAA
- On white
- 1.32:1 Fail
Border, background, text · .comment-avatar, .avatar-letter
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- —
- On white
- 21.00:1 AAA
Background, text, graphic · .wp-block-post-featured-image .wp-block-post-featured-image__overlay.has-backgro, .accordian-icon
-
Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 50
- On text
- 5.32:1 AA
- On white
- 3.95:1 AA large
Text, background · .view, .comment-month-year
Colours
Brand colours and accents, most used first-
Light Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 74 53 0 39
- On text
- 2.55:1 Fail
- On white
- 8.24:1 AAA
Text, background · .wp-block-heading.is-style-latest, .wp-block-heading.is-style-trending
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 97 73 0 71
- On text
- 1.20:1 Fail
- On white
- 17.48:1 AAA
Text, background · #giveaway-form-main-div .form-title, .is-style-featured .wp-block-post-template .wp-block-post:first-child .wp-block-
-
Deep Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 74 53 0 55
- On text
- 1.85:1 Fail
- On white
- 11.33:1 AAA
Background, border, text · inline style on <div>, .wp-block-heading.is-style-latest
-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 88 84 11
- On text
- 4.42:1 AA large
- On white
- 4.76:1 AA
Background, text · :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-lastfm, :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-pintere
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.
Clash Grotesk
Aa
200
Aa
700
Clash Grotesk
Self-hosted · weights 200, 400, 500, 600, 700 · headings · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Helvetica Neue
System font, or not loaded on this page · weights 400, 700 · body · shown in a stand-in if you don’t have it
Aa
600
Aa
700
Clash Display
Self-hosted · weights 600, 700 · headings · shown in a stand-in if you don’t have it
Aa
400
Aa
700
Space Mono
Self-hosted · weights 400, 500, 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
clamp(2.25rem, 5vw, 3rem) · 48 px / 1.2
weight 600 · Clash Grotesk
ComicBook.com
Heading 2
2rem · 32 px / 1.2
weight 600 · Clash Grotesk
Comicbook.com: Comics, Movies, TV, Gaming and A…
Heading 3
1.5rem · 24 px / 1.2
weight 600 · Clash Grotesk
Comicbook.com: Comics, Movies, TV, Gaming and A…
Heading 4
1.375rem · 22 px / 1.2
weight 600 · Clash Grotesk
Comicbook.com: Comics, Movies, TV, Gaming and A…
Heading 5
1.25rem · 20 px / 1.2
weight 600 · Clash Grotesk
Comicbook.com: Comics, Movies, TV, Gaming and A…
Heading 6
1.1875rem · 19 px / 1.2
weight 600 · Clash Grotesk
Comicbook.com: Comics, Movies, TV, Gaming and A…
Body
1.1875rem · 19 px / 1.58
weight 400 · Helvetica Neue
Comicbook.com is the #1 site for everything geek. Get news, opinion and exclusives on movies, TV shows, video games, comics, anime and more.
Paragraph
14px
weight 500 · Clash Grotesk
Comicbook.com is the #1 site for everything geek. Get news, opinion and exclusives on movies, TV shows, video games, comics, anime and more.
Link
14px / 16px
weight 700 · uppercase · Clash Grotesk
Read more about ComicBook.com
Sizes in use
Most common across the site- 48px4 rules
- 42px4 rules
- 24px5 rules
- 19pxline 1.58 · 5 rules
- 16pxline inherit · 14 rules
- 14pxline 1.58 · 13 rules
- 12pxline 1.25 · 8 rules
- 11px7 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Corner radius
- 16px · 8×
- 9999px · 3×
- 5px · 3×
- 50% · 3×
- inherit · 1×
- 10px · 1×
Shadows
- 0px 14px 70px rgba(0, 0, 0, 0.25)
- 0px 5px 65px 0px #0000004d
- 0 2px 12px rgba(0, 0, 0, 0.08)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
415
600
768
781
782
992
1023
1024
On a scale of 0 to 1440 px.
Content widths (max-width)
1280 px
600 px
505 px
461 px
315 px
308 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.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does ComicBook.com use?
- ComicBook.com’s website uses four typefaces: Clash Grotesk (headings), self-hosted; Helvetica Neue (body text), a system font; Clash Display, self-hosted; Space Mono, self-hosted.
- What are ComicBook.com’s brand colours?
- The main colours on comicbook.com are Light Slate Blue (#284A9C), Midnight Blue (#02144A), Deep Slate Blue (#1E3774), Crimson (#E21B24), White (#FFFFFF) and Off White (#E0E0E0).
- What colour is ComicBook.com’s text and background?
- Body text is #000000 on a #FFFFFF background.
- Where is ComicBook.com’s logo from?
- The logo shown in this guide was found on comicbook.com’s homepage. For official logo files and usage rules, check ComicBook.com’s own brand or press page.
- Is this ComicBook.com’s official style guide?
- No. SiteStyleGuide made it from comicbook.com’s public web pages on 26 October 2026, and isn’t affiliated with ComicBook.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
comicbook-com-tokens.css
/* comicbook.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/comicbook.com) */
:root {
/* Colours */
--text: #000000;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-off-white: #E0E0E0;
--colour-black: #000000;
--colour-grey: #808080;
--colour-light-slate-blue: #284A9C;
--colour-midnight-blue: #02144A;
--colour-deep-slate-blue: #1E3774;
--colour-crimson: #E21B24;
/* Typefaces */
--font-headings: 'Clash Grotesk', sans-serif;
--font-body: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
--font-buttons: 'Space Mono', ui-monospace, monospace;
/* Type scale */
--text-h1: clamp(2.25rem, 5vw, 3rem);
--leading-h1: 1.2;
--text-h2: 2rem;
--leading-h2: 1.2;
--text-h3: 1.5rem;
--leading-h3: 1.2;
--text-h4: 1.375rem;
--leading-h4: 1.2;
--text-h5: 1.25rem;
--leading-h5: 1.2;
--text-h6: 1.1875rem;
--leading-h6: 1.2;
--text-body: 1.1875rem;
--leading-body: 1.58;
--text-p: 14px;
--text-a: 14px;
--leading-a: 16px;
/* Shape */
--radius-1: 16px;
--radius-2: 9999px;
--radius-3: 5px;
--radius-4: 50%;
--radius-5: inherit;
--radius-6: 10px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 415px;
--breakpoint-2: 600px;
--breakpoint-3: 768px;
--breakpoint-4: 781px;
--breakpoint-5: 782px;
--breakpoint-6: 992px;
--breakpoint-7: 1023px;
--breakpoint-8: 1024px;
--max-width-1: 1280px;
--max-width-2: 600px;
--max-width-3: 505px;
--max-width-4: 461px;
--max-width-5: 315px;
--max-width-6: 308px;
}
{
"site": "comicbook.com",
"source": "https://sitestyleguide.com/comicbook.com",
"text": "#000000",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Off White",
"hex": "#E0E0E0",
"rgb": [
224,
224,
224
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Grey",
"hex": "#808080",
"rgb": [
128,
128,
128
]
},
{
"name": "Light Slate Blue",
"hex": "#284A9C",
"rgb": [
40,
74,
156
]
},
{
"name": "Midnight Blue",
"hex": "#02144A",
"rgb": [
2,
20,
74
]
},
{
"name": "Deep Slate Blue",
"hex": "#1E3774",
"rgb": [
30,
55,
116
]
},
{
"name": "Crimson",
"hex": "#E21B24",
"rgb": [
226,
27,
36
]
}
],
"fonts": [
{
"name": "Clash Grotesk",
"stack": "\"Clash Grotesk\", sans-serif",
"weights": [
200,
400,
500,
600,
700
],
"source": "Self-hosted"
},
{
"name": "Helvetica Neue",
"stack": "\"Helvetica Neue\", Helvetica, Arial, sans-serif",
"weights": [
400,
700
],
"source": "System font, or not loaded on this page"
},
{
"name": "Clash Display",
"stack": "\"Clash Display\", sans-serif",
"weights": [
600,
700
],
"source": "Self-hosted"
},
{
"name": "Space Mono",
"stack": "\"Space Mono\", ui-monospace, monospace",
"weights": [
400,
500,
700
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run comicbook.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/comicbook.com" title="ComicBook.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>
Similar colours
Websites whose lead colour is closest to ComicBook.com’s
Captured from comicbook.com on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by ComicBook.com; this guide describes the public website for reference.