SlashFilmstyle guide

• 448 px · PNG shortcut icon

• White 30%
• Cadet Blue 28%
• Cool Charcoal 15.9%
• Cool Dark Grey 11.9%
• Off White 8.6%
• Sky Blue 4.5%
• Yellow 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.

• Aa Copied

  White

  HEX

  #FFFFFF

  RGB

  255, 255, 255

  HSL

  0 0% 100%

  OKLCH

  100% 0 0

  CMYK

  0 0 0 0

  On text

  6.26:1 AA

  On white

  —

  Background, text, graphic · .nav-drop, body

• Aa Copied

  Cool Charcoal

  HEX

  #3E4446

  RGB

  62, 68, 70

  HSL

  195 6% 26%

  OKLCH

  38.2% 0.009 219.7

  CMYK

  11 3 0 73

  On text

  1.58:1 Fail

  On white

  9.91:1 AAA

  Text · h2.section-header, h1

• Aa Copied

  Cool Dark Grey

  HEX

  #596264

  RGB

  89, 98, 100

  HSL

  191 6% 37%

  OKLCH

  48.9% 0.012 212.6

  CMYK

  11 2 0 61

  On text

  —

  On white

  6.26:1 AA

  Text, background · body, #footer-detail-container

• Aa Copied

  Off White

  HEX

  #EDF1F2

  RGB

  237, 241, 242

  HSL

  192 16% 94%

  OKLCH

  95.5% 0.004 214.3

  CMYK

  2 0 0 5

  On text

  5.50:1 AA

  On white

  1.14:1 Fail

  Background, border · #footer, #category-content .subcategories li a

• Aa Copied

  Cadet Blue

  HEX

  #1DABC9

  RGB

  29, 171, 201

  HSL

  190 75% 45%

  OKLCH

  68.5% 0.117 217.1

  CMYK

  86 15 0 21

  On text

  2.30:1 Fail

  On white

  2.72:1 Fail

  Text, background, border · .menu-btn.advertise-btn a, a.button button

• Aa Copied

  Sky Blue

  HEX

  #54D3EE

  RGB

  84, 211, 238

  HSL

  191 82% 63%

  OKLCH

  80.7% 0.116 214.4

  CMYK

  65 11 0 7

  On text

  3.55:1 AA large

  On white

  1.76:1 Fail

  Background, border, text · .menu-btn.advertise-btn a:hover, a.button:hover button

• Aa Copied

  Yellow

  HEX

  #FFFF00

  RGB

  255, 255, 0

  HSL

  60 100% 50%

  OKLCH

  96.8% 0.211 109.8

  CMYK

  0 0 100 0

  On text

  5.83:1 AA

  On white

  1.07:1 Fail

  Background · mark

• Copied

  linear-gradient(0deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.1) 50%)

• 32pxline 120% · 1 rules
• 26pxline 125% · 1 rules
• 24px1 rules
• 18pxline 150% · 5 rules
• 16pxline 150% · 3 rules
• 15pxline 125% · 6 rules
• 14pxline 130% · 4 rules
• 10pxline 100% · 1 rules

Corner radius

• 3px · 4×

Shadows

• 1px 1px 10px rgba(46,48,49,0.1)
• 1px 1px 8px rgba(46,48,49,0.03)

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.

/* slashfilm.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/slashfilm.com) */
:root {
  /* Colours */
  --text: #596264;
  --background: #F8FAFB;
  --colour-white: #FFFFFF;
  --colour-cool-charcoal: #3E4446;
  --colour-cool-dark-grey: #596264;
  --colour-off-white: #EDF1F2;
  --colour-cadet-blue: #1DABC9;
  --colour-sky-blue: #54D3EE;
  --colour-yellow: #FFFF00;
  --gradient-1: linear-gradient(0deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.1) 50%);

  /* Typefaces */
  --font-headings: 'aktiv-grotesk-condensed-xbold', 'aktiv-grotesk-condensed-xbold-fallback', sans-serif;
  --font-buttons: 'aktiv-grotesk-condensed-xbold', 'aktiv-grotesk-condensed-xbold-fallback', sans-serif;
  --font-body: 'aktiv-grotesk-regular', 'aktiv-grotesk-regular-fallback', sans-serif;
  --font-other: 'aktiv-grotesk-semibold', 'aktiv-grotesk-semibold-fallback', sans-serif;

  /* Type scale */
  --text-h1: 3.2rem;
  --leading-h1: 120%;
  --text-h2: 2.6rem;
  --leading-h2: 125%;
  --text-h3: 2.2rem;
  --leading-h3: 125%;
  --text-h4: 1.8rem;
  --leading-h4: 125%;
  --text-body: 10px;
  --leading-body: 100%;
  --text-p: 1.8rem;
  --leading-p: 150%;
  --text-small: 1.6rem;
  --text-button: 1.6rem;
  --text-a: 0.9rem;
  --leading-a: 100%;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 750px;
  --breakpoint-2: 768px;
  --breakpoint-3: 926px;
  --breakpoint-4: 992px;
  --breakpoint-5: 1120px;
  --breakpoint-6: 1250px;
  --max-width-1: 1400px;
  --max-width-2: 1360px;
  --max-width-3: 1194px;
}

{
    "site": "slashfilm.com",
    "source": "https://sitestyleguide.com/slashfilm.com",
    "text": "#596264",
    "background": "#F8FAFB",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Cool Charcoal",
            "hex": "#3E4446",
            "rgb": [
                62,
                68,
                70
            ]
        },
        {
            "name": "Cool Dark Grey",
            "hex": "#596264",
            "rgb": [
                89,
                98,
                100
            ]
        },
        {
            "name": "Off White",
            "hex": "#EDF1F2",
            "rgb": [
                237,
                241,
                242
            ]
        },
        {
            "name": "Cadet Blue",
            "hex": "#1DABC9",
            "rgb": [
                29,
                171,
                201
            ]
        },
        {
            "name": "Sky Blue",
            "hex": "#54D3EE",
            "rgb": [
                84,
                211,
                238
            ]
        },
        {
            "name": "Yellow",
            "hex": "#FFFF00",
            "rgb": [
                255,
                255,
                0
            ]
        }
    ],
    "fonts": [
        {
            "name": "aktiv-grotesk-condensed-xbold",
            "stack": "aktiv-grotesk-condensed-xbold, aktiv-grotesk-condensed-xbold-fallback, sans-serif",
            "weights": [
                100,
                800
            ],
            "source": "Self-hosted"
        },
        {
            "name": "aktiv-grotesk-regular",
            "stack": "aktiv-grotesk-regular, aktiv-grotesk-regular-fallback, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "aktiv-grotesk-semibold",
            "stack": "aktiv-grotesk-semibold, aktiv-grotesk-semibold-fallback, sans-serif",
            "weights": [
                100,
                600
            ],
            "source": "Self-hosted"
        }
    ]
}