Lonely Planetstyle guide

• 48 px · ICO icon

• White 91.3%
• Black 6.4%
• Blue 1.4%
• Light Grey 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.

• Aa Copied

  White

  HEX

  #FFFFFF

  RGB

  255, 255, 255

  HSL

  0 0% 100%

  OKLCH

  100% 0 0

  CMYK

  0 0 0 0

  On text

  21.00:1 AAA

  On white

  —

  Text, background · .btn-primary-inverse, [data-mode~=shop] .btn-secondary

• Aa Copied

  Black

  HEX

  #000000

  RGB

  0, 0, 0

  HSL

  0 0% 0%

  OKLCH

  0% 0 0

  CMYK

  0 0 0 100

  On text

  —

  On white

  21.00:1 AAA

  Background · [data-video-full-bleed] [data-player-wrapper][data-active], [data-video-full-bleed] [data-jw-playback-slot]

• Aa Copied

  Light Grey

  HEX

  #CCCCCC

  RGB

  204, 204, 204

  HSL

  0 0% 80%

  OKLCH

  84.5% 0 0

  CMYK

  0 0 0 20

  On text

  13.08:1 AAA

  On white

  1.61:1 Fail

  Border · .border-\[\#cccccc\]

• Aa Copied

  Blue

  HEX

  #3A1FE6

  RGB

  58, 31, 230

  HSL

  248 80% 51%

  OKLCH

  45.4% 0.267 273.6

  CMYK

  75 87 0 10

  On text

  2.52:1 Fail

  On white

  8.34:1 AAA

  Used · --core-brand-guide

• Copied

  linear-gradient(initial)

• 64pxline 1 · 2 rules
• 32pxline 1.15 · 4 rules
• 28pxline 1.15 · 4 rules
• 24pxline 1.15 · 3 rules
• 20pxline 1.15 · 4 rules
• 16pxline 1.5 · 24 rules
• 14pxline 1.15 · 11 rules
• 12pxline 1.15 · 5 rules

Corner radius

• 1rem · 3×
• .5rem · 2×
• 100% · 1×
• 2px · 1×
• 1.5rem · 1×

Shadows

• 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000
• 0 0 #0000, 0 0 #0000, 0 0 #0000

Download

• CSS variables
• Design tokens (JSON)
• Tailwind 3 config
• Tailwind 4 theme

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

/* lonelyplanet.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/lonelyplanet.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-light-grey: #CCCCCC;
  --colour-blue: #3A1FE6;
  --gradient-1: linear-gradient(initial);

  /* Typefaces */
  --font-headings: 'ABC Monument Grotesk', 'Arial', sans-serif;
  --font-body: 'ABC Monument Grotesk', 'Arial', sans-serif;
  --font-buttons: 'ABC Arizona Flare', 'Georgia', 'Cambria', 'Times New Roman', 'Times', serif;
  --font-other: 'American Grotesk Compressed', 'Arial', sans-serif;

  /* Type scale */
  --text-h1: 2.25rem;
  --leading-h1: 1.15;
  --text-h2: 2rem;
  --leading-h2: 1.15;
  --text-h3: 1.75rem;
  --leading-h3: 1.15;
  --text-h4: 1.5rem;
  --leading-h4: 1.15;
  --text-h5: 1.5rem;
  --leading-h5: 1.15;
  --text-h6: 1rem;
  --leading-h6: 1.5;
  --text-body: 1rem;
  --leading-body: 1.5;
  --text-p: 1rem;
  --leading-p: 1.5;
  --text-small: 80%;

  /* Shape */
  --radius-1: 1rem;
  --radius-2: .5rem;
  --radius-3: 100%;
  --radius-4: 2px;
  --radius-5: 1.5rem;
}

{
    "site": "lonelyplanet.com",
    "source": "https://sitestyleguide.com/lonelyplanet.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#CCCCCC",
            "rgb": [
                204,
                204,
                204
            ]
        },
        {
            "name": "Blue",
            "hex": "#3A1FE6",
            "rgb": [
                58,
                31,
                230
            ]
        }
    ],
    "fonts": [
        {
            "name": "ABC Monument Grotesk",
            "stack": "\"ABC Monument Grotesk\", Arial, sans-serif",
            "weights": [
                400,
                700,
                900
            ],
            "source": "Served from assets.staticlp.com"
        },
        {
            "name": "ABC Arizona Flare",
            "stack": "\"ABC Arizona Flare\", Georgia, Cambria, \"Times New Roman\", Times, serif",
            "weights": [
                400
            ],
            "source": "Served from assets.staticlp.com"
        },
        {
            "name": "ABC Monument Grotesk Mono",
            "stack": "\"ABC Monument Grotesk Mono\", \"Courier New\", \"Courier\", \"monospace\"",
            "weights": [
                400
            ],
            "source": "Served from assets.staticlp.com"
        },
        {
            "name": "American Grotesk",
            "stack": "\"American Grotesk\", Arial, sans-serif",
            "weights": [
                700
            ],
            "source": "Served from assets.staticlp.com"
        },
        {
            "name": "American Grotesk Compressed",
            "stack": "\"American Grotesk Compressed\", Arial, sans-serif",
            "weights": [
                900
            ],
            "source": "Served from assets.staticlp.com"
        }
    ]
}