Relapse Records Official Storestyle guide

• 16 px · PNG shortcut icon

• White 37.1%
• Near Black 24.2%
• Black 20.3%
• Off White 17.2%
• Medium Blue 0.5%
• Steel Blue 0.4%
• Red 0.3%

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

  --swiper-theme-color--tw-ring-offset-color

  HEX

  #FFFFFF

  RGB

  255, 255, 255

  HSL

  0 0% 100%

  OKLCH

  100% 0 0

  CMYK

  0 0 0 0

  On text

  17.81:1 AAA

  On white

  —

  Background, text, border · body, .btn-solid-white-accent

• Aa Copied

  Near Black

  --color-primary-text--color-white-text--overlay

  HEX

  #161819

  RGB

  22, 24, 25

  HSL

  200 6% 9%

  OKLCH

  20.7% 0.004 229

  CMYK

  12 4 0 90

  On text

  —

  On white

  17.81:1 AAA

  Text, background, border · body, .btn-outline-primary-text

• Aa Copied

  Black

  --color-secondary-background--color-secondary-background-hex

  HEX

  #000000

  RGB

  0, 0, 0

  HSL

  0 0% 0%

  OKLCH

  0% 0 0

  CMYK

  0 0 0 100

  On text

  1.18:1 Fail

  On white

  21.00:1 AAA

  Text, background, border · .btn-solid-black-accent, .btn-outline-tertiary-text

• Aa Copied

  Off White

  --color-secondary-accent--color-primary-border

  HEX

  #ECECEC

  RGB

  236, 236, 236

  HSL

  0 0% 93%

  OKLCH

  94.3% 0 0

  CMYK

  0 0 0 7

  On text

  15.08:1 AAA

  On white

  1.18:1 Fail

  Text, border, background · .btn-secondary-accent-full, .btn-outline-secondary-accent

• Aa Copied

  Medium Blue

  HEX

  #142FBD

  RGB

  20, 47, 189

  HSL

  230 81% 41%

  OKLCH

  40.7% 0.219 266

  CMYK

  89 75 0 26

  On text

  1.84:1 Fail

  On white

  9.67:1 AAA

  Background · inline style on <path>

• Aa Copied

  Steel Blue

  HEX

  #1990C6

  RGB

  25, 144, 198

  HSL

  199 78% 44%

  OKLCH

  61.8% 0.126 235.4

  CMYK

  87 27 0 22

  On text

  4.96:1 AA

  On white

  3.59:1 AA large

  Background · .shopify-payment-button__button--unbranded

• Aa Copied

  Red

  HEX

  #FF0000

  RGB

  255, 0, 0

  HSL

  0 100% 50%

  OKLCH

  62.8% 0.258 29.2

  CMYK

  0 100 100 0

  On text

  4.46:1 AA large

  On white

  4.00:1 AA large

  Text · .monopile-bis_error

• Copied

  linear-gradient(to bottom,)

• Copied

  linear-gradient(to top,)

• 43px1 rules
• 34pxline calc(1.3 * .9) · 2 rules
• 27pxline 1.3 · 3 rules
• 22pxline 1.3 · 7 rules
• 18pxline 1.3 · 7 rules
• 14pxline 1 · 20 rules
• 12pxline 1.3 · 11 rules
• 9px2 rules

Corner radius

• 4px · 3×
• 50% · 2×
• 9999px · 2×
• 3px · 2×
• .375rem · 1×
• 0 3px 3px 0 · 1×

Shadows

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

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.

/* relapse.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/relapse.com) */
:root {
  /* Colours */
  --text: #161819;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #161819;
  --colour-black: #000000;
  --colour-off-white: #ECECEC;
  --colour-medium-blue: #142FBD;
  --colour-steel-blue: #1990C6;
  --colour-red: #FF0000;
  --gradient-1: linear-gradient(to bottom,);
  --gradient-2: linear-gradient(to top,);

  /* Typefaces */
  --font-headings: 'Montserrat', sans-serif;
  --font-buttons: 'Montserrat', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial';

  /* Type scale */
  --text-h1: 2.441rem;
  --text-h2: 1.953rem;
  --leading-h2: 1.3;
  --text-h3: 1.563rem;
  --leading-h3: 1.3;
  --text-h4: 1.25rem;
  --leading-h4: 1.3;
  --text-h5: 1rem;
  --leading-h5: 1.3;
  --text-h6: .875rem;
  --leading-h6: 1.3;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;
  --text-a: 1rem;
  --leading-a: 1;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 50%;
  --radius-3: 9999px;
  --radius-4: 3px;
  --radius-5: .375rem;
  --radius-6: 0 3px 3px 0;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 480px;
  --breakpoint-2: 640px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 1023px;
  --breakpoint-6: 1024px;
  --breakpoint-7: 1280px;
  --max-width-1: 1280px;
  --max-width-2: 1024px;
  --max-width-3: 768px;
  --max-width-4: 640px;
  --max-width-5: 576px;
  --max-width-6: 320px;
}

{
    "site": "relapse.com",
    "source": "https://sitestyleguide.com/relapse.com",
    "text": "#161819",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#161819",
            "rgb": [
                22,
                24,
                25
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Off White",
            "hex": "#ECECEC",
            "rgb": [
                236,
                236,
                236
            ]
        },
        {
            "name": "Medium Blue",
            "hex": "#142FBD",
            "rgb": [
                20,
                47,
                189
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#1990C6",
            "rgb": [
                25,
                144,
                198
            ]
        },
        {
            "name": "Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        }
    ],
    "fonts": [
        {
            "name": "Montserrat",
            "stack": "Montserrat, sans-serif",
            "weights": [
                500,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Segoe UI",
            "stack": "system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Work Sans",
            "stack": "\"Work Sans\", sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}