Colors
One purple, one yellow, a family of near-blacks, and white. Every value here is the one that ships.
Core
The colors that identify FluoTest.
Primary purple
Buttons, links, active states, the brand gradient. As text it works on white; on dark grounds use the bright purple instead.
- HEX
- #9E3BB9
- RGB
- 158, 59, 185
Deep purple
Start of the brand gradient (emails, video). Not used on its own.
- HEX
- #7A2D91
- RGB
- 122, 45, 145
Bright purple
Purple as text or small accents on dark grounds.
- HEX
- #C264DA
- RGB
- 194, 100, 218
Yellow accent
Fluo's magnifying glass, the mid score band, a rare highlight. Never a background for text.
- HEX
- #FFD94D
- RGB
- 255, 217, 77
White
Type and the logo on dark grounds.
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
Dark grounds
FluoTest is dark-first. Marketing surfaces and the video use a slightly plum near-black; the app's own dark theme and emails use neutral near-blacks.
Marketing ground
The dark ground of marketing visuals, video and social images.
- HEX
- #0D0A12
- RGB
- 13, 10, 18
Surface
Cards and panels on the marketing ground.
- HEX
- #17131E
- RGB
- 23, 19, 30
Surface, raised
A second step up for nested panels and mockup chrome.
- HEX
- #211B2B
- RGB
- 33, 27, 43
App dark background
The product's dark-theme page background.
- HEX
- #161616 (oklch(0.2 0 0))
- RGB
- 22, 22, 22
App dark card
Cards in the product's dark theme. Also the email card.
- HEX
- #222222 (oklch(0.25 0 0))
- RGB
- 34, 34, 34
Email background
The outer background of every FluoTest email.
- HEX
- #1A1A1A
- RGB
- 26, 26, 26
Text on dark
Three steps of white for hierarchy. All three pass accessibility contrast on the dark ground.
Text
Headlines and primary text on dark grounds.
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
Text, secondary
Paragraphs and descriptions on dark grounds.
- HEX
- #B9B4C3
- RGB
- 185, 180, 195
Text, muted
Captions, helper text and metadata on dark grounds.
- HEX
- #8B8494
- RGB
- 139, 132, 148
Dividers and borders
Hairlines, low contrast, one pixel.
Border
Default hairline on dark grounds.
- HEX
- rgba(255, 255, 255, 0.10)
- RGB
- 255, 255, 255, 0.10
Border, strong
Hover and emphasis borders on dark grounds.
- HEX
- rgba(255, 255, 255, 0.16)
- RGB
- 255, 255, 255, 0.16
Email divider
Borders and separators inside emails.
- HEX
- #333333
- RGB
- 51, 51, 51
Light theme
The app and the website also ship a full light theme. Purple is slightly adjusted so text stays readable on white.
Background
Light-theme page background.
- HEX
- #FFFFFF
- RGB
- 255, 255, 255
Foreground
Light-theme text.
- HEX
- #0F0F0F (oklch(0.17 0 0))
- RGB
- 15, 15, 15
Primary (light theme)
The purple tuned for readable text on white.
- HEX
- #A12DDE (oklch(0.56 0.25 310))
- RGB
- 161, 45, 222
Muted text
Secondary text in the light theme.
- HEX
- #585858 (oklch(0.46 0 0))
- RGB
- 88, 88, 88
Border
Light-theme hairline.
- HEX
- #E4E4E4 (oklch(0.92 0 0))
- RGB
- 228, 228, 228
Brand gradient
Deep purple to primary purple at 135 degrees. Used in email headers and the video, always with white text on top.
Usage
Purple does the work, neutrals carry it, yellow is rare.
- Use the primary purple for one action per view. Two purple buttons side by side compete.
- On dark grounds, set purple text in the bright purple, not the primary.
- Yellow appears once, if at all. It belongs to Fluo's magnifying glass and to score highlights.
- Green and red are score and status colors only, never brand accents.
- Do not add a fifth dark ground or a second purple.
Example
Score any decision.
Secondary text sits one step below white. Muted text is for captions.
Muted caption text