<aside>

https://www.figma.com/design/XUdkOHUzaMvl7qwvRPfifn/Keytake-Design-System?node-id=0-1

</aside>

Background

Colors used for background:

• Primary (white / gray.900): Used for the background of areas occupying the most significant portion of the page.
• Secondary (gray.50 / gray.800): Used for areas layered on top of primary backgrounds.
• Tertiary (gray.100 / gray.700): Used for areas layered on top of secondary backgrounds.
• Invert (gray.900 / white): A reverse color of the primary background.

Accent

(Not recommended for large areas, such as the entire page or modal backgrounds.)

• Accent (yellow.50 / yellow.900): When the brand color is used as a background.
• Accent-Secondary (yellow.100 / yellow.700): Used for areas layered on top of the accent background.
• Accent-Contrast (yellow.400 / yellow.400): The brand color.

Functional

• Info (blue.50 / blue.500): Background for informational areas.
• Success (green.50 / green.600): Background for feedback indicating successful user interactions.
• Warning (orange.50 / orange.600): Background for feedback indicating warning during user interactions.
• Error (red.100 / orange.600): Background for feedback indicating failed user interactions.