Themes Style Guide
This is the style guide used for Purple Paradigm, including colours that are WCAG AA and AAA compliant.
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