Flow

Primary Colors

--primary #052d47

--secondary #1f8aa2

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

Component Gallery

Colors