taylorhare.comstyle guide

• 192 px · JPG icon
• 180 px · JPG apple-touch-icon
• 32 px · JPG icon

• Warm Off White 33%
• Warm Near Black 24.7%
• Cool Light Grey 20.8%
• Tomato 13%
• Black 4.7%
• Dark Olive Green 3.8%

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

  Warm Off White

  HEX

  #F3EEE8

  RGB

  243, 238, 232

  HSL

  33 31% 93%

  OKLCH

  95.1% 0.01 72.7

  CMYK

  0 2 5 5

  On text

  14.58:1 AAA

  On white

  1.15:1 Fail

  Background, text · body, .page-wrap#home-page .home-section .content-column.media-column.full-width .proj

• Aa Copied

  Warm Near Black

  HEX

  #132019

  RGB

  19, 32, 25

  HSL

  148 25% 10%

  OKLCH

  22.9% 0.023 160.4

  CMYK

  41 0 22 87

  On text

  —

  On white

  16.82:1 AAA

  Background, text · body, .page-wrap .page-section .content-row .text-column .text-dropdowns-wrap .text-dr

• Aa Copied

  Cool Light Grey

  HEX

  #A7B9BD

  RGB

  167, 185, 189

  HSL

  191 14% 70%

  OKLCH

  77.3% 0.021 212.6

  CMYK

  12 2 0 26

  On text

  8.27:1 AAA

  On white

  2.04:1 Fail

  Background · body.single-projects footer, body.page-template-page-text footer

• Aa Copied

  Black

  HEX

  #000000

  RGB

  0, 0, 0

  HSL

  0 0% 0%

  OKLCH

  0% 0 0

  CMYK

  0 0 0 100

  On text

  1.25:1 Fail

  On white

  21.00:1 AAA

  Background · .nav-menu-overlay .close-button:after

• Aa Copied

  Tomato

  HEX

  #E4644B

  RGB

  228, 100, 75

  HSL

  10 74% 59%

  OKLCH

  65.8% 0.165 32.8

  CMYK

  0 56 67 11

  On text

  4.99:1 AA

  On white

  3.37:1 AA large

  Background, graphic · .nav-menu-overlay, .nav-menu-overlay .hover-images .hover-image

• Aa Copied

  Dark Olive Green

  HEX

  #5A6F48

  RGB

  90, 111, 72

  HSL

  92 21% 36%

  OKLCH

  51.4% 0.064 131.3

  CMYK

  19 0 35 56

  On text

  3.05:1 AA large

  On white

  5.52:1 AA

  Background · body.green-bg, #cursor-dot

• 36px2 rules
• 21px2 rules
• 16px1 rules

Corner radius

• 50% · 1×

Breakpoints

On a scale of 0 to 2470 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.

/* taylorhare.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/taylorhare.com) */
:root {
  /* Colours */
  --text: #132019;
  --background: #F3EEE8;
  --colour-warm-off-white: #F3EEE8;
  --colour-warm-near-black: #132019;
  --colour-cool-light-grey: #A7B9BD;
  --colour-black: #000000;
  --colour-tomato: #E4644B;
  --colour-dark-olive-green: #5A6F48;

  /* Typefaces */
  --font-headings: 'Isola Book';
  --font-body: 'Isola Book';

  /* Type scale */
  --text-h1: 36px;
  --leading-h1: 1.14em;
  --text-h2: 100%;
  --text-h3: 36px;
  --leading-h3: 1.1176470588em;
  --text-h4: 100%;
  --text-h5: 16px;
  --leading-h5: 1.2em;
  --text-h6: 100%;
  --text-body: 20.5px;
  --text-p: 20.5px;
  --leading-p: 1.1875em;
  --text-small: 100%;
  --text-a: 100%;

  /* Shape */
  --radius-1: 50%;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 390px;
  --breakpoint-2: 767px;
  --breakpoint-3: 1920px;
  --breakpoint-4: 2470px;
}

{
    "site": "taylorhare.com",
    "source": "https://sitestyleguide.com/taylorhare.com",
    "text": "#132019",
    "background": "#F3EEE8",
    "colours": [
        {
            "name": "Warm Off White",
            "hex": "#F3EEE8",
            "rgb": [
                243,
                238,
                232
            ]
        },
        {
            "name": "Warm Near Black",
            "hex": "#132019",
            "rgb": [
                19,
                32,
                25
            ]
        },
        {
            "name": "Cool Light Grey",
            "hex": "#A7B9BD",
            "rgb": [
                167,
                185,
                189
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Tomato",
            "hex": "#E4644B",
            "rgb": [
                228,
                100,
                75
            ]
        },
        {
            "name": "Dark Olive Green",
            "hex": "#5A6F48",
            "rgb": [
                90,
                111,
                72
            ]
        }
    ],
    "fonts": [
        {
            "name": "Isola Book",
            "stack": "\"Isola Book\"",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Isola Book Slanted",
            "stack": "\"Isola Book Slanted\"",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Isola Regular",
            "stack": "\"Isola Regular\"",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}