Color
Colors
Click any swatch to copy its value.
Purple
Primary purple
Purple / 100% · #6160B0
Core brand purple — CTAs, links, key accents.
Light purple
Light purple · #FCFCFF
Lightest purple — app background / surface tint.
Dark purple
Dark purple · #40336E
Deep purple — emphasis & dark accents.
Purple 8%
Purple / 8% · #6160B014
Purple tint — selected / subtle fill.
Purple 4%
Purple / 4% · #6160B00A
Purple tint — subtlest fill / hover.
Neutral · black
Text / primary
Black / 100% · #1F1F1F
Primary text — near-black.
Text / secondary
Black / 64% · #1F1F1FA3
Secondary text & icons.
Text / tertiary
Black / 48% · #1F1F1F7A
Placeholder / disabled text.
Divider / fill
Black / 8% · #1F1F1F14
Hairlines & subtle fills on light.
Subtle fill
Black / 4% · #1F1F1F0A
Row hover / faint fills on light.
Neutral · white
Surface / base
White / 100% · #FFFFFF
Base surface & cards (light theme).
On-color / primary
White / 82% · #FFFFFFD1
Primary text & icons on color.
On-color / muted
White / 48% · #FFFFFF7A
Muted text & icons on color.
Success · green
Success
Green / 100% · #078326
Success states & confirmations.
Success surface
Light green · #F2FFF6
Success background tint.
Success 16%
Green / 16% · #07832629
Success tint — emphasis fill.
Success 8%
Green / 8% · #07832614
Success tint — subtle fill.
Success 4%
Green / 4% · #0783260A
Success tint — faint fill.
Error · red
Error
Red / 100% · #CD0707
Errors & destructive actions.
Error surface
Light red · #FFF2F2
Error background tint.
Error 16%
Red / 16% · #CD070729
Error tint — emphasis fill.
Error 8%
Red / 8% · #CD070714
Error tint — subtle fill.
Error 4%
Red / 4% · #CD07070A
Error tint — faint fill.
Warning · yellow
Warning
Yellow / 100% · #C57E14
Warnings & caution states.
Warning 16%
Yellow / 16% · #C57E1429
Warning tint — emphasis fill.
Warning 8%
Yellow / 8% · #C57E1414
Warning tint — subtle fill.
Warning 4%
Yellow / 4% · #C57E140A
Warning tint — faint fill.
Gradients
Button gradient
Button gradient · linear-gradient(135deg, rgba(30,24,67,1) 0%, rgba(100,91,153,1) 100%)
Primary button / CTA gradient.
Border gradient
Border gradient · linear-gradient(90deg, rgba(29,29,29,0) 0%, rgba(29,29,29,1) 50%, rgba(29,29,29,0) 100%)
Gradient hairline / border treatment.
SkinnyRx product Design System palette, pulled from Figma (Skinny – Design System → Colors). Light-theme base colours — purple #6160B0, neutrals on #1F1F1F / #FFFFFF, plus green / red / yellow states & gradients. Tints are previewed over white. (The brandbook UI itself runs a separate dark FlowDesk theme — these swatches document the product, not this site.)