Preamble
- CSS Framework used is TailwindCSS v4 . Anything offered by Tailwind but not listed here is also available.
- This is primarily used for the Frontend test participant module.
- Available in both light and dark mode.
Logo (1rem = 14pt = 16px)
-
Original
-
Heading
max-height: 6rem
-
Inline
max-height: 4rem
Typography (1rem = 14pt = 16px)
-
Poppins
Header
-
Inter
Body
This is the body font, ideal for longer paragraphs. This font should be smaller than the header font so that it doesn't compete with the header. Since this font is used in the body area, it should be easily readable. It should also be complementary to the header font. -
Inter
Accent
Colour Swatches
Fillers from Tailwind
- white
#ffffff
- black
#000000
- stone-500
#78716c
- stone-900
#1c1917
- amber-300
#fcd34d
- amber-500
#f59e0b
SSI Main
- ssi-white
#f4f4f5
- ssi-cream
#ffefc9
- ssi-yellow
#ffe3a1
- ssi-amber-light
#ffce1f
- ssi-amber
#e9b500
- ssi-amber-dark
#b89000
- ssi-black
#000000
SSI Generic
- ssi-green
#52bd96
- ssi-green-dark
#017752
- ssi-red
#ef4a3c
- ssi-red-dark
#731913
- ssi-blue
#6fceef
- ssi-blue-dark
#00529e
- ssi-purple
#c7a1cb
- ssi-purple-dark
#753e97
SSI Quadrants
- ssi-emerging
#ef4a3c
- ssi-emerging-dark
#731913
- ssi-functional
#f6c896
- ssi-functional-dark
#ff8500
- ssi-strong
#ffff00
- ssi-strong-dark
#f1b26c
- ssi-expert
#017752
- ssi-expert-dark
#52bd96