What font does Lifehacker use?

Lifehacker’s website uses three typefaces: akshar (headings), self-hosted; inter (body text), self-hosted; league, self-hosted.

What are Lifehacker’s brand colours?

The main colours on lifehacker.com are Sea Green (#028858), Dark Slate Grey (#13553A), Honey Dew (#CFFFDD), Deep Black (#111827), Medium Sea Green (#38B588) and Lime Green (#6FB538).

What colour is Lifehacker’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Lifehacker’s logo from?

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

Is this Lifehacker’s official style guide?

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

Lifehacker 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: Lifehacker | Do everything better; ● 33 / 60 characters
Meta description: Lifehacker is the ultimate authority on optimizing every aspect of your life. Do everything better.; ● 99 / 160 characters
Site name: Lifehacker
og:title: Lifehacker | Do everything better
og:description: Lifehacker is the ultimate authority on optimizing every aspect of your life. Do everything better.
Language: en
Theme colour: #ffffff

In search results

Lifehackerhttps://lifehacker.com/

Lifehacker | Do everything better

Lifehacker is the ultimate authority on optimizing every aspect of your life. Do everything better.

When shared

lifehacker.com

Lifehacker | Do everything better

Lifehacker is the ultimate authority on optimizing every aspect of your life. Do everything better.

Back to top ↑

Logo & favicons

Found as: schema.org logo. SVG, 1497 × 414.

Logo

On white

On black

On Sea Green

Favicons

6 found

480 px · PNG icon
480 px · PNG icon
384 px · PNG icon
192 px · PNG icon
180 px · PNG apple-touch-icon
48 px · ICO favicon.ico

Lifehacker | Do everything better

Light browser tab

Lifehacker | Do everything better

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 (#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 23.7%
Sea Green 12.4%
Black 10.8%
Dark Slate Grey 8.1%
Honey Dew 7%
Charcoal 6.3%
Deep Black 6.1%
Off White 5.8%
Medium Sea Green 5.2%
Lime Green 5.2%
Dark Slate Blue 4.1%
Light Black 2.2%
Crimson 1.9%
Orange Red 1.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
—

Background, border, text · .\!bg-white, .bg-white
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · .bg-black, .text-black
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 10 12 84

On text
1.38:1 Fail

On white
15.17:1 AAA

Text, background, border · .zmgad-full-width .content-lift .title, .bg-gray-800
Off White

HEX

RGB

HSL

OKLCH

CMYK
3 2 0 8

On text
16.96:1 AAA

On white
1.24:1 Fail

Border · --tw-prose-hr, --tw-prose-quote-borders

Colours

Brand colours and accents, most used first

Sea Green

HEX

RGB

HSL

OKLCH

CMYK
99 0 35 47

On text
4.67:1 AA

On white
4.50:1 AA

Text, background, border · .bg-brand-green, .before\:bg-brand-green:before
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
78 0 32 67

On text
2.39:1 Fail

On white
8.79:1 AAA

Background, text, border · .bg-\[linear-gradient\(126deg\2c \#13553A_28\.77\%\2c rgba\(58\2c 125\2c 57\2c 0, .md\:bg-\[linear-gradient\(90deg\2c \#13553A_0\.17\%\2c rgba\(111\2c 181\2c 56\2
Honey Dew

HEX

RGB

HSL

OKLCH

CMYK
19 0 13 0

On text
19.00:1 AAA

On white
1.11:1 Fail

Background, text, graphic · .bg-brand-green-100, .text-brand-green-100
Deep Black

HEX

RGB

HSL

OKLCH

CMYK
56 38 0 85

On text
1.18:1 Fail

On white
17.74:1 AAA

Used · --tw-prose-headings, --tw-prose-links
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
69 0 25 29

On text
8.13:1 AAA

On white
2.58:1 Fail

Background, border · --tw-gradient-to, .bg-brand-green-gradient-end
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
39 0 69 29

On text
8.34:1 AAA

On white
2.52:1 Fail

Background, border · --tw-gradient-from, .bg-brand-green-gradient-start
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
32 20 0 68

On text
2.04:1 Fail

On white
10.31:1 AAA

Used · --tw-prose-body, --tw-prose-invert-hr
Light Black

HEX

RGB

HSL

OKLCH

CMYK
44 25 0 78

On text
1.43:1 Fail

On white
14.68:1 AAA

Text · .text-\[\#1F2937\], --tw-prose-pre-bg
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 83 83 14

On text
4.35:1 AA large

On white
4.83:1 AA

Text · .text-red-600, .hover\:text-red-600:hover
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 65 97 2

On text
6.47:1 AA

On white
3.25:1 AA large

Text · .text-red

Gradients

linear-gradient(to right,)
linear-gradient(126deg,#13553a 28.77%,rgba(58,125,57,.6) 70.37%,rgba(111,181,56,.28) 92.78%,rgba(59,182,131,.08))
linear-gradient(90deg,#13553a .17%,rgba(111,181,56,.2) 84.01%,rgba(59,182,131,.04) 99.82%)

Dark mode

Switched on by the site

Honey Dew

#CFFFDD
White

#FFFFFF
Light Grey

#D6D3D1
Warm Dark Grey

#57534E
Charcoal

#292524
Warm Grey

#A8A29E
Warm Charcoal

#44403C

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.

akshar

Aa 100 Aa 800

akshar

Self-hosted · weights 100, 500, 800 · headings · shown in a stand-in if you don’t have it

Aa 100 Aa 800

inter

Self-hosted · weights 100, 800 · body · shown in a stand-in if you don’t have it

Aa 100 Aa 800

league

Self-hosted · weights 100, 800 · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 2 1.25rem · 20 px / 1.75rem

Lifehacker | Do everything better

Heading 3 1.125rem · 18 px / 1.75rem

Lifehacker | Do everything better

Paragraph .875rem · 14 px / 1.75rem akshar

Lifehacker is the ultimate authority on optimizing every aspect of your life. Do everything better.

Small 80%

Lifehacker is the ultimate authority on optimizing every aspect of your life. Do everything better.

Button 100% none

Get started

Link 1rem · 16 px / 1.5rem weight 500

Sizes in use

Most common across the site

36pxline 2.5rem · 4 rules
26px4 rules
24pxline 2rem · 6 rules
20pxline 1.75rem · 10 rules
18pxline 1.75rem · 6 rules
16pxline 1.5rem · 6 rules
14pxline 1.7142857 · 27 rules
12pxline 1rem · 5 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

.375rem · 12×
.5rem · 4×
.25rem · 3×
.3125rem · 3×
1rem · 2×
9999px · 2×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000
0 0 0 1px rgb(/10%),0 3px 0 rgb(/10%)

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

375

640

767

768

1024

1280

1360

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1360 px

1024 px

896 px

768 px

672 px

448 px

Back to top ↑

Notes

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

Notes

● FineThe title is 33 characters, short enough to show in full in search results.

Back to top ↑

Questions

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

Questions

What font does Lifehacker use?: Lifehacker’s website uses three typefaces: akshar (headings), self-hosted; inter (body text), self-hosted; league, self-hosted.
What are Lifehacker’s brand colours?: The main colours on lifehacker.com are Sea Green (#028858), Dark Slate Grey (#13553A), Honey Dew (#CFFFDD), Deep Black (#111827), Medium Sea Green (#38B588) and Lime Green (#6FB538).
What colour is Lifehacker’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Lifehacker’s logo from?: The logo shown in this guide was found on lifehacker.com’s homepage. For official logo files and usage rules, check Lifehacker’s own brand or press page.
Is this Lifehacker’s official style guide?: No. SiteStyleGuide made it from lifehacker.com’s public web pages on 27 October 2026, and isn’t affiliated with Lifehacker. 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

lifehacker-com-tokens.css

Download

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

/* lifehacker.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/lifehacker.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-charcoal: #292524;
  --colour-off-white: #E5E7EB;
  --colour-sea-green: #028858;
  --colour-dark-slate-grey: #13553A;
  --colour-honey-dew: #CFFFDD;
  --colour-deep-black: #111827;
  --colour-medium-sea-green: #38B588;
  --colour-lime-green: #6FB538;
  --colour-dark-slate-blue: #374151;
  --colour-light-black: #1F2937;
  --colour-crimson: #DC2626;
  --colour-orange-red: #FB5708;
  --gradient-1: linear-gradient(to right,);
  --gradient-2: linear-gradient(126deg,#13553a 28.77%,rgba(58,125,57,.6) 70.37%,rgba(111,181,56,.28) 92.78%,rgba(59,182,131,.08));
  --gradient-3: linear-gradient(90deg,#13553a .17%,rgba(111,181,56,.2) 84.01%,rgba(59,182,131,.04) 99.82%);

  /* Typefaces */
  --font-headings: 'akshar', 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Roboto', sans-serif;
  --font-body: 'inter', 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Roboto', sans-serif;
  --font-other: 'league', 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Roboto', sans-serif;

  /* Type scale */
  --text-h2: 1.25rem;
  --leading-h2: 1.75rem;
  --text-h3: 1.125rem;
  --leading-h3: 1.75rem;
  --text-p: .875rem;
  --leading-p: 1.75rem;
  --text-small: 80%;
  --text-button: 100%;
  --text-a: 1rem;
  --leading-a: 1.5rem;

  /* Shape */
  --radius-1: .375rem;
  --radius-2: .5rem;
  --radius-3: .25rem;
  --radius-4: .3125rem;
  --radius-5: 1rem;
  --radius-6: 9999px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 375px;
  --breakpoint-2: 640px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 1024px;
  --breakpoint-6: 1280px;
  --breakpoint-7: 1360px;
  --breakpoint-8: 1440px;
  --max-width-1: 1360px;
  --max-width-2: 1024px;
  --max-width-3: 896px;
  --max-width-4: 768px;
  --max-width-5: 672px;
  --max-width-6: 448px;
}

{
    "site": "lifehacker.com",
    "source": "https://sitestyleguide.com/lifehacker.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#292524",
            "rgb": [
                41,
                37,
                36
            ]
        },
        {
            "name": "Off White",
            "hex": "#E5E7EB",
            "rgb": [
                229,
                231,
                235
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#028858",
            "rgb": [
                2,
                136,
                88
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#13553A",
            "rgb": [
                19,
                85,
                58
            ]
        },
        {
            "name": "Honey Dew",
            "hex": "#CFFFDD",
            "rgb": [
                207,
                255,
                221
            ]
        },
        {
            "name": "Deep Black",
            "hex": "#111827",
            "rgb": [
                17,
                24,
                39
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#38B588",
            "rgb": [
                56,
                181,
                136
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#6FB538",
            "rgb": [
                111,
                181,
                56
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#374151",
            "rgb": [
                55,
                65,
                81
            ]
        },
        {
            "name": "Light Black",
            "hex": "#1F2937",
            "rgb": [
                31,
                41,
                55
            ]
        },
        {
            "name": "Crimson",
            "hex": "#DC2626",
            "rgb": [
                220,
                38,
                38
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FB5708",
            "rgb": [
                251,
                87,
                8
            ]
        }
    ],
    "fonts": [
        {
            "name": "akshar",
            "stack": "akshar, Segoe UI, Helvetica Neue, Helvetica, Roboto, sans-serif",
            "weights": [
                100,
                500,
                800
            ],
            "source": "Self-hosted"
        },
        {
            "name": "inter",
            "stack": "inter, Segoe UI, Helvetica Neue, Helvetica, Roboto, sans-serif",
            "weights": [
                100,
                800
            ],
            "source": "Self-hosted"
        },
        {
            "name": "league",
            "stack": "league, Segoe UI, Helvetica Neue, Helvetica, Roboto, sans-serif",
            "weights": [
                100,
                800
            ],
            "source": "Self-hosted"
        }
    ]
}

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 lifehacker.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/lifehacker.com" title="Lifehacker 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 ↑

Lifehackerstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Charcoal

Off White

Colours

Sea Green

Dark Slate Grey

Honey Dew

Deep Black

Medium Sea Green

Lime Green

Dark Slate Blue

Light Black

Crimson

Orange Red

Gradients

Dark mode

akshar

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Presseportal.de

Consumer Reports

FotMob

Rock Paper Shotgun

Lifehackerstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Charcoal

Off White

Colours

Sea Green

Dark Slate Grey

Honey Dew

Deep Black

Medium Sea Green

Lime Green

Dark Slate Blue

Light Black

Crimson

Orange Red

Gradients

Dark mode

akshar

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run lifehacker.com?

Similar colours

Presseportal.de

Consumer Reports

FotMob

Rock Paper Shotgun

Title &
description