Barvy
Jedna fialová, jedna žlutá, rodina skoro černých a bílá. Každá hodnota tady je ta, která se skutečně používá.
Základ
Barvy, které FluoTest identifikují.
Hlavní fialová
Tlačítka, odkazy, aktivní stavy, přechod značky. Jako text funguje na bílé; na tmavém podkladu použijte místo ní jasnou fialovou.
- HEX
- #9E3BB9
- RGB
- 158, 59, 185
Tmavá fialová
Začátek přechodu značky (e-maily, video). Samostatně se nepoužívá.
- HEX
- #7A2D91
- RGB
- 122, 45, 145
Jasná fialová
Fialová jako text nebo malé akcenty na tmavém podkladu.
- HEX
- #C264DA
- RGB
- 194, 100, 218
Žlutý akcent
Fluova lupa, střední bodové pásmo, vzácné zvýraznění. Nikdy podklad pro text.
- HEX
- #FFD94D
- RGB
- 255, 217, 77
Bílá
Text a logo na tmavém podkladu.
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
Tmavé podklady
FluoTest je primárně tmavý. Marketingové plochy a video používají lehce švestkovou skoro černou; tmavý režim aplikace a e-maily používají neutrální skoro černé.
Marketingový podklad
Tmavý podklad marketingových vizuálů, videa a obrázků pro sociální sítě.
- HEX
- #0D0A12
- RGB
- 13, 10, 18
Plocha
Karty a panely na marketingovém podkladu.
- HEX
- #17131E
- RGB
- 23, 19, 30
Plocha, vyvýšená
Druhý stupeň pro vnořené panely a rámy mockupů.
- HEX
- #211B2B
- RGB
- 33, 27, 43
Tmavé pozadí aplikace
Pozadí stránek v tmavém režimu produktu.
- HEX
- #161616 (oklch(0.2 0 0))
- RGB
- 22, 22, 22
Tmavá karta aplikace
Karty v tmavém režimu produktu. Také karta v e-mailech.
- HEX
- #222222 (oklch(0.25 0 0))
- RGB
- 34, 34, 34
Pozadí e-mailů
Vnější pozadí každého e-mailu FluoTestu.
- HEX
- #1A1A1A
- RGB
- 26, 26, 26
Text na tmavém
Tři stupně bílé pro hierarchii. Všechny tři splňují kontrast pro přístupnost na tmavém podkladu.
Text
Titulky a hlavní text na tmavém podkladu.
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
Text, sekundární
Odstavce a popisy na tmavém podkladu.
- HEX
- #B9B4C3
- RGB
- 185, 180, 195
Text, tlumený
Popisky, nápověda a metadata na tmavém podkladu.
- HEX
- #8B8494
- RGB
- 139, 132, 148
Oddělovače a rámečky
Tenké linky, nízký kontrast, jeden pixel.
Rámeček
Výchozí tenká linka na tmavém podkladu.
- HEX
- rgba(255, 255, 255, 0.10)
- RGB
- 255, 255, 255, 0.10
Rámeček, výrazný
Rámečky při najetí a pro zdůraznění na tmavém podkladu.
- HEX
- rgba(255, 255, 255, 0.16)
- RGB
- 255, 255, 255, 0.16
Oddělovač v e-mailu
Rámečky a oddělovače uvnitř e-mailů.
- HEX
- #333333
- RGB
- 51, 51, 51
Světlý režim
Aplikace i web mají také plnohodnotný světlý režim. Fialová je mírně upravená, aby text zůstal čitelný na bílé.
Pozadí
Pozadí stránky ve světlém režimu.
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
Popředí
Text ve světlém režimu.
- HEX
- #0F0F0F (oklch(0.17 0 0))
- RGB
- 15, 15, 15
Hlavní (světlý režim)
Fialová vyladěná pro čitelný text na bílé.
- HEX
- #A12DDE (oklch(0.56 0.25 310))
- RGB
- 161, 45, 222
Tlumený text
Sekundární text ve světlém režimu.
- HEX
- #585858 (oklch(0.46 0 0))
- RGB
- 88, 88, 88
Rámeček
Tenká linka ve světlém režimu.
- HEX
- #E4E4E4 (oklch(0.92 0 0))
- RGB
- 228, 228, 228
Přechod značky
Z tmavé fialové do hlavní fialové pod úhlem 135 stupňů. Používá se v hlavičkách e-mailů a ve videu, vždy s bílým textem.
Použití
Fialová pracuje, neutrální barvy ji nesou, žlutá je vzácná.
- Hlavní fialovou používejte pro jednu akci na obrazovku. Dvě fialová tlačítka vedle sebe si konkurují.
- Na tmavém podkladu sázejte fialový text jasnou fialovou, ne hlavní.
- Žlutá se objeví jednou, pokud vůbec. Patří Fluově lupě a zvýraznění skóre.
- Zelená a červená jsou jen barvy skóre a stavu, nikdy akcenty značky.
- Nepřidávejte pátý tmavý podklad ani druhou fialovou.
Příklad
Ohodnoťte jakékoli rozhodnutí.
Sekundární text je o stupeň pod bílou. Tlumený text je pro popisky.
Tlumený popisek