iFlow

Primary & Secondary

--primary #00285B

--primary-hover #1E3E6E

--secondary cyan-light (bg)

--secondary-text cyan-dark

--secondary-hover cyan-dark

Contrast (Action/CTA)

--contrast #fb8a25

--contrast-hover #c4520f

--contrast-light orange-light

Button Color Scheme

Light buttons use light background with dark text. Dark buttons use dark background with white text.

Variant	Light BG	Text/Icon	Dark BG	Dark Hover
Default	pearl	storm	charcoal	slate
Primary	blue-light	primary	primary	primary-hover
Secondary	cyan-light	cyan-dark	cyan-dark	cyan
Warning	orange-light	orange-dark	orange-dark	orange
Error	red-light	red-dark	red-dark	red
Success	green-light	green-dark	green-dark	green
Disabled	snow	ash	—

Avatar Colors (middle tones)

--avatar-1 --blue

--avatar-2 --indigo

--avatar-3 --violet

--avatar-4 --purple

--avatar-5 --red

--avatar-6 --orange

--avatar-7 --green

--avatar-8 --cyan

Grayscale (Warm-tinted)

--white #fefefd

--snow #f9f8f7

--pearl #ebeae8

--silver #dfdedd

--ash #b0afad

--slate #6f6e6c

--storm #4b4a48

--charcoal #363533

--obsidian #232221

Purple Family

--purple-light #f3e3e9

--purple-muted #cc7994

--purple #af2b56

--purple-dark #8b2e4f

--purple-verydark #6a2440

Violet Family

--violet-light #f0e4ec

--violet-muted #bc849b

--violet #983e7a

--violet-dark #793a60

--violet-verydark #5c2d4a

Lavender Family

--lavender-light #eae7f0

--lavender-muted #a48dbd

--lavender #744a98

--lavender-dark #5a3c80

--lavender-verydark #442e62

Indigo Family

--indigo-light #e5e7f1

--indigo-muted #888bbd

--indigo #444897

--indigo-dark #353475

--indigo-verydark #282859

Blue Family

--blue-light #deeef4

--blue-muted #619fbf

--blue #07669a

--blue-dark #074068

--blue-verydark #052d47

Cyan Family

--cyan-light #e8f5f6

--cyan-muted #7ed3e1

--cyan #2ab9d0

--cyan-dark #1f8aa2

--cyan-verydark #16677a

Turquoise Family

--turquoise-light #e5f9f5

--turquoise-muted #7de2d0

--turquoise #2fd2b5

--turquoise-dark #22a18b

--turquoise-verydark #1a7a6a

Green Family

--green-light #e8f8f0

--green-muted #8fe3b9

--green #4dd491

--green-dark #3aa870

--green-verydark #2c7f55

Lime Family

--lime-light #eef5d9

--lime-muted #d7e493

--lime #bfd552

--lime-dark #9fb043

--lime-verydark #788533

Gold Family

--gold-light #fdf0d4

--gold-muted #fdd480

--gold #fdbb36

--gold-dark #dea432

--gold-verydark #a87b26

Orange Family

--orange-light #ffefe5

--orange-muted #feb67d

--orange #fc8c2d

--orange-dark #de7d26

--orange-verydark #a85e1d

Red Family

--red-light #fde8e5

--red-muted #f18d7f

--red #e74a34

--red-dark #c43d2b

--red-verydark #942e21

Semantic Variables

--surface Card backgrounds

--surface-alt Alternate surfaces

--text-primary Main text

--text-secondary Secondary text

--border-color Borders