Theme Style Guide
This is the style guide for Purple Paradigm's website, using a range of colours including those which are WCAG AAA and AA compliant. For more on choosing your own accessible colour palette, read Why Colour Alone Is Not Enough.
Active Theme
Colours
Brand colours
Brand Primary
theme.colours.brand.primary
#6418ff
Brand Secondary
theme.colours.brand.secondary
#9081ff
Brand Tertiary
theme.colours.brand.tertiary
#00afff
Brand Quaternary
theme.colours.brand.quaternary
#ff00a6
Accent colours
Accent Primary
theme.colours.accent.primary
#ffadff
Accent Secondary
theme.colours.accent.secondary
#0058ff
Accent Tertiary
theme.colours.accent.tertiary
#e56db1
Accent Quaternary
theme.colours.accent.quaternary
#c95eff
Accent Quinary
theme.colours.accent.quinary
#3459A5
Accent Senary
theme.colours.accent.senary
#93A6F5
Accent Septenary
theme.colours.accent.septenary
#34E8BB
Accent Octonary
theme.colours.accent.octonary
#ffeb3b
Text colours
Text Primary
theme.colours.text.primary
#fff
Text Secondary
theme.colours.text.secondary
#e6e6fa
Text Tertiary
theme.colours.text.tertiary
#b7b4c7
Text Quaternary
theme.colours.text.quaternary
#4d229e
Text Header
theme.colours.text.header
#e6e6fa
Text Inverse
theme.colours.text.inverse
#000
Text link colours
Text Link Default
theme.colours.text.link.default
#93A6F5
Text Link Hover
theme.colours.text.link.hover
#ffadff
Background colours
Background Primary
theme.colours.background.primary
#270147
Background Secondary
theme.colours.background.secondary
#040217
Background Tertiary
theme.colours.background.tertiary
#b7b4c7
Background Quaternary
theme.colours.background.quaternary
#9081ff
Background Card
theme.colours.background.card
#13111a
Background Code
theme.colours.background.code
#13111a
Background Header
theme.colours.background.header
#000
Border colours
Border Primary
theme.colours.border.primary
#88849c
Border Secondary
theme.colours.border.secondary
#5e5b71
Border Tertiary
theme.colours.border.tertiary
#302c3f
Border Focus
theme.colours.border.focus
#93A6F5
Status
Status Error Background
theme.colours.status.error.background
#B30000
Status Error Text
theme.colours.status.error.text
#fff
Status Info Background
theme.colours.status.info.background
#C9A0DC
Status Info Text
theme.colours.status.info.text
#000
Status Success Background
theme.colours.status.success.background
#00E676
Status Success Text
theme.colours.status.success.text
#000
Status Warning Background
theme.colours.status.warning.background
#f2ff00
Status Warning Text
theme.colours.status.warning.text
#000
Monochromatic colours
Monochromatic 0
theme.colours.monochromatic[0]
#fff
Monochromatic 1
theme.colours.monochromatic[1]
#e6e6fa
Monochromatic 2
theme.colours.monochromatic[2]
#d9d7e6
Monochromatic 3
theme.colours.monochromatic[3]
#b7b4c7
Monochromatic 4
theme.colours.monochromatic[4]
#88849c
Monochromatic 5
theme.colours.monochromatic[5]
#5e5b71
Monochromatic 6
theme.colours.monochromatic[6]
#302c3f
Monochromatic 7
theme.colours.monochromatic[7]
#1d1a27
Monochromatic 8
theme.colours.monochromatic[8]
#17141f
Monochromatic 9
theme.colours.monochromatic[9]
#13111a
Monochromatic 10
theme.colours.monochromatic[10]
#000
RGB dark
Rgb Dark 0
theme.colours.rgb.dark[0]
rgba(0, 0, 0, 0)
Rgb Dark 1
theme.colours.rgb.dark[1]
rgba(0, 0, 0, 0.08)
Rgb Dark 2
theme.colours.rgb.dark[2]
rgba(0, 0, 0, 0.16)
Rgb Dark 3
theme.colours.rgb.dark[3]
rgba(0, 0, 0, 0.24)
Rgb Dark 4
theme.colours.rgb.dark[4]
rgba(0, 0, 0, 0.4)
Rgb Dark 5
theme.colours.rgb.dark[5]
rgba(0, 0, 0, 0.6)
Rgb Dark 6
theme.colours.rgb.dark[6]
rgba(0, 0, 0, 0.9)
RGB light
Rgb Light 0
theme.colours.rgb.light[0]
rgba(255, 255, 255, 0)
Rgb Light 1
theme.colours.rgb.light[1]
rgba(255, 255, 255, 0.08)
Rgb Light 2
theme.colours.rgb.light[2]
rgba(255, 255, 255, 0.16)
Rgb Light 3
theme.colours.rgb.light[3]
rgba(255, 255, 255, 0.24)
Rgb Light 4
theme.colours.rgb.light[4]
rgba(255, 255, 255, 0.4)
Rgb Light 5
theme.colours.rgb.light[5]
rgba(255, 255, 255, 0.7)
Rgb Light 6
theme.colours.rgb.light[6]
rgba(255, 255, 255, 0.9)
Effects
Effects Gradient Body
theme.effects.gradient.body
linear-gradient(#000 0, #270147 57%, #270147 100%)
Effects Gradient Border
theme.effects.gradient.border
linear-gradient(71deg, #000, #6418ff, #000)
Effects Gradient Brand
theme.effects.gradient.brand
linear-gradient(60deg, #ff00a6, #9081ff, #00afff)
Effects Gradient Header
theme.effects.gradient.header
linear-gradient(270deg, #ff00a6, #00afff, #9081ff)
Radius
Radius Image
theme.radius.image
0.6rem 3rem 0 0
Radius Large
theme.radius.large
1rem
Radius Medium
theme.radius.medium
0.75rem
Radius Pill
theme.radius.pill
999rem
Radius Ribbon
theme.radius.ribbon
0.6rem 1.25rem 1.25rem 0
Radius Round
theme.radius.round
50%
Radius Shape
theme.radius.shape
1.25rem 3.5rem
Radius Small
theme.radius.small
0.6rem
Radius Tiny
theme.radius.tiny
0.4rem
Radius Xl
theme.radius.xl
1.25rem
Opacity
Opacity 0
theme.opacity[0]
0
Opacity 1
theme.opacity[1]
0.08
Opacity 2
theme.opacity[2]
0.3
Opacity 3
theme.opacity[3]
0.55
Opacity 4
theme.opacity[4]
0.85
Opacity 5
theme.opacity[5]
0.9
Layout and Breakpoints
Layout Max Content Width
theme.layout.maxContentWidth
120rem
Breakpoints Desktop
theme.breakpoints.desktop
60rem
Breakpoints Mobile
theme.breakpoints.mobile
30rem
Breakpoints Tablet
theme.breakpoints.tablet
48rem