HHS Styleguide
← Back to site

Colors & Tokens

CSS custom properties defined in global.css via @theme inline. Tailwind utility colours used across components are also listed.

Theme Tokens

Semantic CSS custom properties mapped to Tailwind via @theme inline

Background

--background

#f5f5f5

Foreground

--foreground

#171717

Primary

--primary

#000000

Secondary

--secondary

#ffffff

Primary Color Scale

Semantic CSS custom properties mapped to Tailwind via @theme inline

Primary 50

Primary 100

Primary 200

Primary 300

Primary 400

Primary 500

Primary 600

Primary 700

Primary 800

Primary 800

Primary 900

Primary 950

Tailwind Colours in Use

Non-token colours referenced directly in component classes

Gray 100

Gray 200

Gray 400

Gray 500

Gray 600

Gray 800

Blue 600

Red 800

Teal 600

Neutral 700

Neutral 800

Neutral 900

Primary Gradients

Gradients used across components, defined via Tailwind utility classes

Primary Gradient 1

Primary Gradient 2

Primary Gradient 3

Primary Gradient 4

Dark Mode

Dark mode uses the .dark class on html, toggled by Preline theme-switch

Light

Background: #f5f5f5

Foreground: #171717

Dark

Background: neutral-900

Foreground: neutral-100