SpaceXstyle guide

• 48 px · ICO icon

• Cool Off White 78.1%
• Black 19.3%
• Light Grey 2.6%

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

  Cool Off White

  --white-100

  HEX

  #F0F0FA

  RGB

  240, 240, 250

  HSL

  240 50% 96%

  OKLCH

  95.8% 0.013 286.1

  CMYK

  4 4 0 2

  On text

  18.55:1 AAA

  On white

  1.13:1 Fail

  Text · h1, .app-background

• 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 · .app-background, .image-wrapper

• 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

  Text · .innerhtml-from-cms a:hover

• 100px1 rules
• 80pxline 95% · 1 rules
• 48pxline 48px · 9 rules
• 20px1 rules
• 17pxline 1.75 · 1 rules
• 16pxline 1.5rem · 2 rules

Corner radius

• 4px · 1×

Breakpoints

On a scale of 0 to 1440 px.

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.

/* spacex.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/spacex.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-cool-off-white: #F0F0FA;
  --colour-black: #000000;
  --colour-light-grey: #CCCCCC;

  /* Typefaces */
  --font-body: 'D-DIN', 'Arial', 'Verdana', sans-serif;
  --font-headings: 'D-DIN', 'Arial', 'Verdana', sans-serif;
  --font-buttons: 'D-DIN', 'Arial', 'Verdana', sans-serif;
  --font-other: 'D-DIN-Regular';

  /* Type scale */
  --text-h1: 3rem;
  --leading-h1: 95%;
  --text-h2: 5rem;
  --leading-h2: 95%;
  --text-h3: 1.25rem;
  --text-body: 1rem;
  --leading-body: 1.5rem;
  --text-p: 1.0625rem;
  --leading-p: 1.75;

  /* Shape */
  --radius-1: 4px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 961px;
  --max-width-1: 1400px;
  --max-width-2: 960px;
  --max-width-3: 696px;
  --max-width-4: 535px;
  --max-width-5: 520px;
  --max-width-6: 450px;
}

{
    "site": "spacex.com",
    "source": "https://sitestyleguide.com/spacex.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Cool Off White",
            "hex": "#F0F0FA",
            "rgb": [
                240,
                240,
                250
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#CCCCCC",
            "rgb": [
                204,
                204,
                204
            ]
        }
    ],
    "fonts": [
        {
            "name": "D-DIN",
            "stack": "D-DIN, Arial, Verdana, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "D-DIN-Bold",
            "stack": "D-DIN-Bold",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "D-DIN-Regular",
            "stack": "D-DIN-Regular",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}