Trusted Research & AI Insightsstyle guide

• 512 px · PNG icon
• 192 px · PNG icon
• 180 px · PNG apple-touch-icon
• 48 px · PNG icon
• 32 px · PNG icon
• 32 px · PNG icon
• 20 px · SVG favicon.ico

• White 46%
• Charcoal 13.3%
• Light Grey 12.3%
• Off White 11.9%
• Light Dodger Blue 5.8%
• Medium Spring Green 4.5%
• Dark Slate Grey 3.5%
• Deep Dodger Blue 2.7%

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

  12.63:1 AAA

  On white

  —

  Background, text, border · body, --tw-ring-offset-color

• Aa Copied

  Charcoal

  HEX

  #333333

  RGB

  51, 51, 51

  HSL

  0 0% 20%

  OKLCH

  32.1% 0 0

  CMYK

  0 0 0 80

  On text

  —

  On white

  12.63:1 AAA

  Text · body, .w-input

• 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

  7.87:1 AAA

  On white

  1.61:1 Fail

  Border, background · [data-nav-menu-open], .w-nav-button.w--open

• Aa Copied

  Off White

  HEX

  #DDDDDD

  RGB

  221, 221, 221

  HSL

  0 0% 87%

  OKLCH

  89.8% 0 0

  CMYK

  0 0 0 13

  On text

  9.30:1 AAA

  On white

  1.36:1 Fail

  Background, border · .w-form-done, .w-slider

• Aa Copied

  Light Dodger Blue

  HEX

  #3898EC

  RGB

  56, 152, 236

  HSL

  208 83% 57%

  OKLCH

  66.3% 0.153 248.9

  CMYK

  76 36 0 7

  On text

  4.13:1 AA large

  On white

  3.06:1 AA large

  Background, border · .w-checkbox-input--inputType-custom.w--redirected-checked, .w-button

• Aa Copied

  Medium Spring Green

  HEX

  #00D875

  RGB

  0, 216, 117

  HSL

  153 100% 42%

  OKLCH

  77.4% 0.199 153.1

  CMYK

  100 0 46 15

  On text

  6.67:1 AA

  On white

  1.90:1 Fail

  Text · .wss-suggest__error button, --color-wss-green

• Aa Copied

  Dark Slate Grey

  HEX

  #003B44

  RGB

  0, 59, 68

  HSL

  188 100% 13%

  OKLCH

  32.3% 0.056 211.4

  CMYK

  100 13 0 73

  On text

  1.03:1 Fail

  On white

  12.29:1 AAA

  Background, border · .bg-\[\#003b44\], --color-wss-teal

• Aa Copied

  Deep Dodger Blue

  HEX

  #0082F3

  RGB

  0, 130, 243

  HSL

  208 100% 48%

  OKLCH

  61.1% 0.194 253.9

  CMYK

  100 47 0 5

  On text

  3.30:1 AA large

  On white

  3.83:1 AA large

  Text · .w-dropdown-link.w--current, .w-nav-link.w--current

• Copied

  linear-gradient(180deg,,)

• 38pxline 44px · 1 rules
• 32pxline 36px · 3 rules
• 24pxline 30px · 2 rules
• 20pxline 1.3 · 3 rules
• 18pxline 22px · 4 rules
• 16pxline 1.5 · 5 rules
• 14pxline 20px · 11 rules
• 12pxline 14px · 4 rules

Corner radius

• 0.25rem · 13×
• inherit · 10×
• 100vw · 7×
• 50% · 4×

Shadows

• 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000
• 2px 6px 8px #00000026
• 0 0 3px 1px #3898ec
• 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.

/* wiley.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/wiley.com) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #333333;
  --colour-light-grey: #CCCCCC;
  --colour-off-white: #DDDDDD;
  --colour-light-dodger-blue: #3898EC;
  --colour-medium-spring-green: #00D875;
  --colour-dark-slate-grey: #003B44;
  --colour-deep-dodger-blue: #0082F3;
  --gradient-1: linear-gradient(180deg,,);

  /* Typefaces */
  --font-body: 'Arial', sans-serif;
  --font-other: 'Helvetica Neue', 'Helvetica', 'Ubuntu', 'Segoe UI', 'Verdana', sans-serif;

  /* Type scale */
  --text-h1: 38px;
  --leading-h1: 44px;
  --text-h2: 32px;
  --leading-h2: 36px;
  --text-h3: 24px;
  --leading-h3: 30px;
  --text-h4: 18px;
  --leading-h4: 24px;
  --text-h5: 14px;
  --leading-h5: 20px;
  --text-h6: 12px;
  --leading-h6: 18px;
  --text-small: 80%;

  /* Shape */
  --radius-1: 0.25rem;
  --radius-2: inherit;
  --radius-3: 100vw;
  --radius-4: 50%;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 479px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 991px;
  --max-width-1: 1760px;
  --max-width-2: 940px;
  --max-width-3: 728px;
  --max-width-4: 608px;
  --max-width-5: 416px;
  --max-width-6: 352px;
}

{
    "site": "wiley.com",
    "source": "https://sitestyleguide.com/wiley.com",
    "text": "#333333",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#CCCCCC",
            "rgb": [
                204,
                204,
                204
            ]
        },
        {
            "name": "Off White",
            "hex": "#DDDDDD",
            "rgb": [
                221,
                221,
                221
            ]
        },
        {
            "name": "Light Dodger Blue",
            "hex": "#3898EC",
            "rgb": [
                56,
                152,
                236
            ]
        },
        {
            "name": "Medium Spring Green",
            "hex": "#00D875",
            "rgb": [
                0,
                216,
                117
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#003B44",
            "rgb": [
                0,
                59,
                68
            ]
        },
        {
            "name": "Deep Dodger Blue",
            "hex": "#0082F3",
            "rgb": [
                0,
                130,
                243
            ]
        }
    ],
    "fonts": [
        {
            "name": "Arial",
            "stack": "Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Segoe UI",
            "stack": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Helvetica Neue",
            "stack": "Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif",
            "weights": [
                300
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "SFMono-Regular",
            "stack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}