Kleuren
Eén paars, één geel, een familie bijna-zwarten en wit. Elke waarde hier is de waarde die daadwerkelijk gebruikt wordt.
Kern
De kleuren die FluoTest herkenbaar maken.
Primair paars
Knoppen, links, actieve staten, het merkverloop. Als tekst werkt het op wit; gebruik op donkere ondergronden het heldere paars.
- HEX
- #9E3BB9
- RGB
- 158, 59, 185
Diep paars
Begin van het merkverloop (e-mails, video). Niet los gebruikt.
- HEX
- #7A2D91
- RGB
- 122, 45, 145
Helder paars
Paars als tekst of kleine accenten op donkere ondergronden.
- HEX
- #C264DA
- RGB
- 194, 100, 218
Geel accent
Fluo's vergrootglas, het middelste scoreniveau, een zeldzame highlight. Nooit een achtergrond voor tekst.
- HEX
- #FFD94D
- RGB
- 255, 217, 77
Wit
Tekst en het logo op donkere ondergronden.
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
Donkere ondergronden
FluoTest is donker als uitgangspunt. Marketingoppervlakken en de video gebruiken een licht pruimkleurig bijna-zwart; het donkere thema van de app en de e-mails gebruiken neutrale bijna-zwarten.
Marketingondergrond
De donkere ondergrond van marketingbeelden, video en social images.
- HEX
- #0D0A12
- RGB
- 13, 10, 18
Vlak
Kaarten en panelen op de marketingondergrond.
- HEX
- #17131E
- RGB
- 23, 19, 30
Vlak, verhoogd
Een tweede stap omhoog voor geneste panelen en mockup-chrome.
- HEX
- #211B2B
- RGB
- 33, 27, 43
Donkere app-achtergrond
De pagina-achtergrond van het donkere thema van het product.
- HEX
- #161616 (oklch(0.2 0 0))
- RGB
- 22, 22, 22
Donkere app-kaart
Kaarten in het donkere thema van het product. Ook de e-mailkaart.
- HEX
- #222222 (oklch(0.25 0 0))
- RGB
- 34, 34, 34
E-mailachtergrond
De buitenste achtergrond van elke FluoTest-e-mail.
- HEX
- #1A1A1A
- RGB
- 26, 26, 26
Tekst op donker
Drie stappen wit voor hiërarchie. Alle drie halen het toegankelijkheidscontrast op de donkere ondergrond.
Tekst
Koppen en primaire tekst op donkere ondergronden.
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
Tekst, secundair
Alinea's en beschrijvingen op donkere ondergronden.
- HEX
- #B9B4C3
- RGB
- 185, 180, 195
Tekst, gedempt
Bijschriften, hulptekst en metadata op donkere ondergronden.
- HEX
- #8B8494
- RGB
- 139, 132, 148
Scheidingslijnen en randen
Haarlijnen, laag contrast, één pixel.
Rand
Standaard haarlijn op donkere ondergronden.
- HEX
- rgba(255, 255, 255, 0.10)
- RGB
- 255, 255, 255, 0.10
Rand, sterk
Hover- en nadrukranden op donkere ondergronden.
- HEX
- rgba(255, 255, 255, 0.16)
- RGB
- 255, 255, 255, 0.16
E-mailscheiding
Randen en scheidingslijnen in e-mails.
- HEX
- #333333
- RGB
- 51, 51, 51
Licht thema
De app en de website hebben ook een volledig licht thema. Paars is iets aangepast zodat tekst leesbaar blijft op wit.
Achtergrond
Pagina-achtergrond in het lichte thema.
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
Voorgrond
Tekst in het lichte thema.
- HEX
- #0F0F0F (oklch(0.17 0 0))
- RGB
- 15, 15, 15
Primair (licht thema)
Het paars afgestemd op leesbare tekst op wit.
- HEX
- #A12DDE (oklch(0.56 0.25 310))
- RGB
- 161, 45, 222
Gedempte tekst
Secundaire tekst in het lichte thema.
- HEX
- #585858 (oklch(0.46 0 0))
- RGB
- 88, 88, 88
Rand
Haarlijn in het lichte thema.
- HEX
- #E4E4E4 (oklch(0.92 0 0))
- RGB
- 228, 228, 228
Merkverloop
Van diep paars naar primair paars onder 135 graden. Gebruikt in e-mailkoppen en de video, altijd met witte tekst erop.
Gebruik
Paars doet het werk, neutralen dragen het, geel is zeldzaam.
- Gebruik het primaire paars voor één actie per scherm. Twee paarse knoppen naast elkaar concurreren.
- Zet paarse tekst op donkere ondergronden in het heldere paars, niet in het primaire.
- Geel verschijnt één keer, als het al verschijnt. Het hoort bij Fluo's vergrootglas en bij score-highlights.
- Groen en rood zijn alleen score- en statuskleuren, nooit merkaccenten.
- Voeg geen vijfde donkere ondergrond of tweede paars toe.
Voorbeeld
Scoor elke beslissing.
Secundaire tekst staat één stap onder wit. Gedempte tekst is voor bijschriften.
Gedempt bijschrift