Color Palette

Our design system color palette with semantic meanings and usage guidelines. Click any color to copy its HEX value.

Brand Colors

Brand Primary Blue

#2563EB

Primary buttons, links, active states

Dark Ink

#0F172A

Headings, key content

White

#FFFFFF

Page backgrounds

Neutral Colors

Neutral 900

#111827

Neutral 700

#374151

Neutral 500

#6B7280

Neutral 200

#E5E7EB

Neutral 100

#F3F4F6

Semantic Colors

Accent Teal

#14B8A6

Icons, hover, focus

Success Green

#22C55E

Success states

Warning Yellow

#F59E0B

Warnings

Error Red

#EF4444

Errors

Info Blue

#3B82F6

Notices

Usage Guidelines

Brand Colors: Use for primary actions, links, and key interactive elements. The primary blue should be the most prominent color in the interface.

Neutral Colors: Use for text, backgrounds, borders, and dividers. Higher numbers (900) are darker and used for text, lower numbers (100) are lighter and used for backgrounds.

Semantic Colors: Use to communicate meaning - success (green), warning (yellow), error (red), and informational (blue) states.

Accessibility: All color combinations meet WCAG AA contrast standards for readability.