Colors

App Palette Documentation

This document provides a comprehensive overview of the application’s color palette. The palette is based on Material Design 3 principles, ensuring a cohesive, modern, and accessible user interface across the entire application.

Primary Colors

Color Name	Hex Code	Preview	Description
`primary`	`#C8BFFF`	Text	The primary color for key components in the UI.
`onPrimary`	`#2F2176`	● Sample Text	A color that passes accessibility guidelines for text and icons when drawn on top of the primary color.
`primaryContainer`	`#463A8D`	Text	A color used for elements that need less emphasis than the primary color.
`onPrimaryContainer`	`#E5DEFF`	● Sample Text	A color that passes accessibility guidelines for text and icons when drawn on top of the primary container color.

Secondary Colors

Color Name	Hex Code	Preview	Description
`secondary`	`#C9C3DC`	Text	A color for less prominent components in the UI.
`onSecondary`	`#312E41`	● Sample Text	A color that passes accessibility guidelines for text and icons when drawn on top of the secondary color.
`secondaryContainer`	`#474459`	Text	A color used for elements that need less emphasis than the secondary color.
`onSecondaryContainer`	`#E5DFF9`	● Sample Text	A color that passes accessibility guidelines for text and icons when drawn on top of the secondary container color.

Tertiary Colors

Color Name	Hex Code	Preview	Description
`tertiary`	`#DDE6AA`	Text	A color for contrasting accents that can be used to balance primary and secondary colors.
`onTertiary`	`#444A23`	● Sample Text	A color that passes accessibility guidelines for text and icons when drawn on top of the tertiary color.
`tertiaryContainer`	`#5C6337`	Text	A color used for elements that need less emphasis than the tertiary color.
`onTertiaryContainer`	`#FAFFD9`	● Sample Text	A color that passes accessibility guidelines for text and icons when drawn on top of the tertiary container color.

Error Colors

Color Name	Hex Code	Preview	Description
`error`	`#FFB4AB`	Text	The color to use for input validation errors, for example.
`onError`	`#690005`	● Sample Text	A color that passes accessibility guidelines for text and icons when drawn on top of the error color.
`errorContainer`	`#93000A`	Text	A color used for elements that need less emphasis than the error color.
`onErrorContainer`	`#FFDAD6`	● Sample Text	A color that passes accessibility guidelines for text and icons when drawn on top of the error container color.

Surface and Background Colors

Color Name	Hex Code	Preview	Description
`background`	`#131313`	Text	A color that typically appears behind scrollable content.
`onBackground`	`#E2E2E2`	● Sample Text	A color that passes accessibility guidelines for text and icons when drawn on top of the background color.
`surface`	`#131313`	Text	The background color for components like cards, sheets, and menus.
`onSurface`	`#E2E2E2`	● Sample Text	A color that passes accessibility guidelines for text and icons when drawn on top of the surface color.
`surfaceVariant`	`#353535`	Text	A color variant of the surface color that can be used for different emphasis levels.
`onSurfaceVariant`	`#C6C6C6`	● Sample Text	A color that passes accessibility guidelines for text and icons when drawn on top of the surface variant color.

Outline Colors

Color Name	Hex Code	Preview	Description
`outline`	`#919191`	● Sample Text	A color for borders and dividers.
`outlineVariant`	`#474747`	● Sample Text	A color variant of the outline color with a lower emphasis.

Other Colors

Color Name	Hex Code	Preview	Description
`shadow`	`#000000`	● Sample Text	A color used to paint the drop shadows of elevated components.
`scrim`	`#000000`	● Sample Text	A color that can be used to obscure the background of a modal component.
`inverseSurface`	`#E2E2E2`	Text	A color that contrasts with the surface color, for example, for a snackbar.
`onInverseSurface`	`#303030`	● Sample Text	A color that passes accessibility guidelines for text and icons when drawn on top of the inverse surface color.
`inversePrimary`	`#5E52A7`	● Sample Text	An inverted primary color for use on inverse surfaces.
`surfaceTint`	`#C8BFFF`	● Sample Text	A color used to tint the surface color, for example, when a surface is elevated.