What font does geek.com use?

geek.com’s website uses two typefaces: Funnel Display (headings), a system font; Arial (body text), a system font.

What are geek.com’s brand colours?

The main colours on geek.com are Blue Violet (#6D3BFA), Medium Spring Green (#00F1AB), Midnight Blue (#0F1460), Deep Midnight Blue (#07084E), Light Midnight Blue (#172072) and Medium Slate Blue (#805AF6).

What colour is geek.com’s text and background?

Body text is #333333 on a #FFFFFF background.

Where is geek.com’s logo from?

The logo shown in this guide was found on geek.com’s homepage. For official logo files and usage rules, check geek.com’s own brand or press page.

Is this geek.com’s official style guide?

No. SiteStyleGuide made it from geek.com’s public web pages on 28 October 2026, and isn’t affiliated with geek.com. Members can refresh a guide after 90 days to pick up changes.

geek.com Style Guide: Colours, Fonts & Logo

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Geek Media; ● 10 / 60 characters
Meta description: Missing; ▲ 0 / 160 characters
og:title: Geek Media

In search results

geek.comhttps://geek.com/

Geek Media

When shared

No og:image, so no picture

geek.com

Geek Media

Back to top ↑

Logo & favicons

Found as: image in the header. SVG, 337 × 162.

Logo

On white

On black

On Blue Violet

Favicons

2 found

256 px · PNG apple-touch-icon
32 px · PNG shortcut icon

Geek Media

Light browser tab

Geek Media

Dark browser tab

Back to top ↑

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 (#333333) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 36.5%
Blue Violet 13.8%
Medium Spring Green 9.1%
Midnight Blue 7.5%
Deep Midnight Blue 7.4%
Charcoal 6.5%
Off White 4.6%
Light Midnight Blue 4.4%
Near Black 3.9%
Medium Slate Blue 2.2%
Golden Rod 1.7%
Light Dodger Blue 1.5%
Deep Dodger Blue 1.1%

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
12.63:1 AAA

On white
—

Text, background, border · body, .top-heading
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
—

On white
12.63:1 AAA

Text · body, .w-input
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 13

On text
9.30:1 AAA

On white
1.36:1 Fail

Background, border · .w-form-done, .w-slider
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 87

On text
1.26:1 Fail

On white
15.91:1 AAA

Text, background · .w-slider-nav-invert > div.w-active, .w-lightbox-thumbnail

Colours

Brand colours and accents, most used first

Blue Violet

HEX

RGB

HSL

OKLCH

CMYK
56 76 0 2

On text
2.20:1 Fail

On white
5.74:1 AA

Background · .navbar, .nav-menu-2
Medium Spring Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 29 5

On text
8.53:1 AAA

On white
1.48:1 Fail

Text, background · .main-heading, .about-heading-container
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
84 79 0 62

On text
1.29:1 Fail

On white
16.29:1 AAA

Background · .footer, .section-shows
Deep Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
91 90 0 69

On text
1.44:1 Fail

On white
18.20:1 AAA

Background, text · .main-heading.store, .body
Light Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
80 72 0 55

On text
1.12:1 Fail

On white
14.13:1 AAA

Background · .listen-group, .section-hosts
Medium Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
48 63 0 4

On text
2.83:1 Fail

On white
4.46:1 AA large

Background · .slide-content._3, .purple-bg
Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 19 61 11

On text
6.80:1 AA

On white
1.86:1 Fail

Text · .nav-bar.u-bg-manuscript-light, .nav__menu-2:hover
Light Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
76 36 0 7

On text
4.13:1 AA large

On white
3.06:1 AA large

Background, border · .w-button, .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after
Deep Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
100 47 0 5

On text
3.30:1 AA large

On white
3.83:1 AA large

Text · .w-dropdown-link.w--current, .w-nav-link.w--current

Gradients

linear-gradient(to bottom, #6d3bfa, #6d3bfa)
linear-gradient(#000000b3, #0000 17%)
linear-gradient(#0000, #0000)

Back to top ↑

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.

Funnel Display

Aa 300 Aa 700

Funnel Display

System font, or not loaded on this page · weights 300, 400, 500, 600, 700 · headings · shown in a stand-in if you don’t have it

Aa 400

Arial

System font, or not loaded on this page · body · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 38px / 44px weight 700

geek.com

Heading 2 32px / 36px weight 700

Geek Media

Heading 3 24px / 30px weight 700

Geek Media

Heading 4 18px / 24px weight 700

Geek Media

Heading 5 14px / 20px weight 700

Geek Media

Heading 6 12px / 18px weight 700

Geek Media

Body 14px / 20px Arial

The quick brown fox jumps over the lazy dog.

Small 80%

The quick brown fox jumps over the lazy dog.

Sizes in use

Most common across the site

40pxline 40px · 3 rules
32pxline 36px · 3 rules
24pxline 30px · 5 rules
18pxline 22px · 10 rules
16pxline 20px · 6 rules
15pxline 12px · 4 rules
14pxline 20px · 8 rules
12pxline 14px · 4 rules

Back to top ↑

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

3px · 2×
50% · 2×
unset · 1×
100% · 1×
4px · 1×

Shadows

unset
0 0 0 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1)
0 0 3px rgba(51, 51, 51, 0.4)
0px 0px 0px 2px #fff

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

479

767

768

991

1024

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1000 px

940 px

728 px

350 px

340 px

320 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 10 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.
▲ CheckThe page doesn’t declare its language (the lang attribute on <html>).

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does geek.com use?: geek.com’s website uses two typefaces: Funnel Display (headings), a system font; Arial (body text), a system font.
What are geek.com’s brand colours?: The main colours on geek.com are Blue Violet (#6D3BFA), Medium Spring Green (#00F1AB), Midnight Blue (#0F1460), Deep Midnight Blue (#07084E), Light Midnight Blue (#172072) and Medium Slate Blue (#805AF6).
What colour is geek.com’s text and background?: Body text is #333333 on a #FFFFFF background.
Where is geek.com’s logo from?: The logo shown in this guide was found on geek.com’s homepage. For official logo files and usage rules, check geek.com’s own brand or press page.
Is this geek.com’s official style guide?: No. SiteStyleGuide made it from geek.com’s public web pages on 28 October 2026, and isn’t affiliated with geek.com. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

geek-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* geek.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/geek.com) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #333333;
  --colour-off-white: #DDDDDD;
  --colour-near-black: #222222;
  --colour-blue-violet: #6D3BFA;
  --colour-medium-spring-green: #00F1AB;
  --colour-midnight-blue: #0F1460;
  --colour-deep-midnight-blue: #07084E;
  --colour-light-midnight-blue: #172072;
  --colour-medium-slate-blue: #805AF6;
  --colour-golden-rod: #E4B85A;
  --colour-light-dodger-blue: #3898EC;
  --colour-deep-dodger-blue: #0082F3;
  --gradient-1: linear-gradient(to bottom, #6d3bfa, #6d3bfa);
  --gradient-2: linear-gradient(#000000b3, #0000 17%);
  --gradient-3: linear-gradient(#0000, #0000);

  /* Typefaces */
  --font-headings: 'Funnel Display', sans-serif;
  --font-body: 'Arial', sans-serif;

  /* Type scale */
  --text-h1: 38px;
  --leading-h1: 44px;
  --text-h2: 32px;
  --leading-h2: 36px;
  --text-h3: 24px;
  --leading-h3: 30px;
  --text-h4: 18px;
  --leading-h4: 24px;
  --text-h5: 14px;
  --leading-h5: 20px;
  --text-h6: 12px;
  --leading-h6: 18px;
  --text-body: 14px;
  --leading-body: 20px;
  --text-small: 80%;

  /* Shape */
  --radius-1: 3px;
  --radius-2: 50%;
  --radius-3: unset;
  --radius-4: 100%;
  --radius-5: 4px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 479px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 991px;
  --breakpoint-5: 1024px;
  --breakpoint-6: 1440px;
  --max-width-1: 1000px;
  --max-width-2: 940px;
  --max-width-3: 728px;
  --max-width-4: 350px;
  --max-width-5: 340px;
  --max-width-6: 320px;
}

{
    "site": "geek.com",
    "source": "https://sitestyleguide.com/geek.com",
    "text": "#333333",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Off White",
            "hex": "#DDDDDD",
            "rgb": [
                221,
                221,
                221
            ]
        },
        {
            "name": "Near Black",
            "hex": "#222222",
            "rgb": [
                34,
                34,
                34
            ]
        },
        {
            "name": "Blue Violet",
            "hex": "#6D3BFA",
            "rgb": [
                109,
                59,
                250
            ]
        },
        {
            "name": "Medium Spring Green",
            "hex": "#00F1AB",
            "rgb": [
                0,
                241,
                171
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#0F1460",
            "rgb": [
                15,
                20,
                96
            ]
        },
        {
            "name": "Deep Midnight Blue",
            "hex": "#07084E",
            "rgb": [
                7,
                8,
                78
            ]
        },
        {
            "name": "Light Midnight Blue",
            "hex": "#172072",
            "rgb": [
                23,
                32,
                114
            ]
        },
        {
            "name": "Medium Slate Blue",
            "hex": "#805AF6",
            "rgb": [
                128,
                90,
                246
            ]
        },
        {
            "name": "Golden Rod",
            "hex": "#E4B85A",
            "rgb": [
                228,
                184,
                90
            ]
        },
        {
            "name": "Light Dodger Blue",
            "hex": "#3898EC",
            "rgb": [
                56,
                152,
                236
            ]
        },
        {
            "name": "Deep Dodger Blue",
            "hex": "#0082F3",
            "rgb": [
                0,
                130,
                243
            ]
        }
    ],
    "fonts": [
        {
            "name": "Funnel Display",
            "stack": "Funnel Display, sans-serif",
            "weights": [
                300,
                400,
                500,
                600,
                700
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Arial",
            "stack": "Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run geek.com?

Add the badge to your site

Link 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/geek.com" title="geek.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>

Back to top ↑

geek.comstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Off White

Near Black

Colours

Blue Violet

Medium Spring Green

Midnight Blue

Deep Midnight Blue

Light Midnight Blue

Medium Slate Blue

Golden Rod

Light Dodger Blue

Deep Dodger Blue

Gradients

Funnel Display

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Yahoo!

gettyimages.it

gettyimages.es

NCERT Solutions

geek.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Off White

Near Black

Colours

Blue Violet

Medium Spring Green

Midnight Blue

Deep Midnight Blue

Light Midnight Blue

Medium Slate Blue

Golden Rod

Light Dodger Blue

Deep Dodger Blue

Gradients

Funnel Display

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run geek.com?

Similar colours

Yahoo!

gettyimages.it

gettyimages.es

NCERT Solutions

Title &
description