Colors¶

Color Palette¶

The palette leverages the energetic "Spotify Green" as the primary brand signifier, balanced by a deep, high-contrast dark mode and a clean, utility-focused light mode.

Surface Colors¶

Token	Light	Usage
`surface`	`#f4fcef`	Background
`surface-dim`	`#d4dcd0`	Dimmed surface
`surface-bright`	`#f4fcef`	Bright surface
`surface-container-lowest`	`#ffffff`	Cards, elevated
`surface-container-low`	`#eef6e9`	Containers
`surface-container`	`#e8f0e4`	Higher containers
`surface-container-high`	`#e2ebde`	High containers
`surface-container-highest`	`#dde5d9`	Highest containers

On Surface Colors¶

Token	Light	Usage
`on-surface`	`#161d16`	Primary text
`on-surface-variant`	`#3d4a3d`	Secondary text
`inverse-surface`	`#2b322a`	Dark surface
`inverse-on-surface`	`#ebf3e7`	Text on dark
`outline`	`#6d7b6c`	Borders
`outline-variant`	`#bccbb9`	Subtle borders

Primary Colors¶

Token	Light	Usage
`primary`	`#006e2d`	Primary actions
`on-primary`	`#ffffff`	Text on primary
`primary-container`	`#1db954`	Primary container
`on-primary-container`	`#004118`	Text on primary container
`inverse-primary`	`#53e076`	Primary on dark

Secondary Colors¶

Token	Light	Usage
`secondary`	`#006e2d`	Secondary actions
`on-secondary`	`#ffffff`	Text on secondary
`secondary-container`	`#7df994`	Secondary container
`on-secondary-container`	`#00722f`	Text on container

Tertiary Colors¶

Token	Light	Usage
`tertiary`	`#a8353e`	Accent tertiary
`on-tertiary`	`#ffffff`	Text on tertiary
`tertiary-container`	`#ff767b`	Tertiary container
`on-tertiary-container`	`#730a1b`	Text on container

Error Colors¶

Token	Light	Usage
`error`	`#ba1a1a`	Error states
`on-error`	`#ffffff`	Text on error
`error-container`	`#ffdad6`	Error background
`on-error-container`	`#93000a`	Text on error bg

Usage Guidelines¶

Primary Actions¶

Use Primary Green for primary buttons and key interactions. Hover/pressed states transition to Primary Dark.

Backgrounds¶

Keep backgrounds neutral to allow package status colors to serve as the primary functional indicators:

Success: Green tones
In Transit: Blue/cyan tones
Error: Red tones

Text Hierarchy¶

Use On Surface Variant for secondary text to maintain clear visual hierarchy between titles and metadata.

Status Colors¶

Status	Color	Usage
Delivered	`#8BC34A`	Success states
In Transit	`#00BCD4`	Shipments in transit
Delayed	`#FF5722`	Attention needed
Error	`#F44336`	Failed states