The visual language of Instant Soup. A color system derived from musical harmony, creating a cohesive and meaningful identity.
7 colors derived from musical scale degrees
--rootPrimary actions, CTAs, brand identity
#DD3C54--secondConsortium, highlights, attention
#EED75A--thirdNew releases, success, music
#54DD3C--fourthPositive feedback, harmony
#3CDDC4--fifthLinks, secondary actions, info
#3CA4DD--sixthFeatured content, special items
#743CDD--seventhCreative accents, highlights
#DD3CA4--neutralPage backgrounds, cards, containers
#1A1A2E--neutral-invertedSwapped variant of Neutral
#F1F1F2--root-invertedSwapped variant of Primary
#F8EAEB--sixth-invertedSwapped variant of Premium
#F0EAF6Each color has 5 variants for different contexts
Semantic CSS variables + page-level theme classes — all in one system
--accentBaseMain color for buttons, links
--accent-foregroundTextText on accent backgrounds
--accent-foreground-secondaryAltSecondary text on accent
--accent-darkHoverHover, focus, active states
--accent-mediumBorderBorders, secondary elements
--accent-lightBackgroundLight tint for sections
--accent-paleSubtleVery subtle highlights
--accent-pagePagePage background color
--accent-cardCardCard component background
.accent-primary#DD3C54.accent-success#3CDDC4.accent-premium#743CDD.accent-secondary#3CA4DD.accent-warning#EED75A.accent-creative#DD3CA4.accent-neutral#4A4A5EWhich accent class each page uses
Font families and scale for consistent hierarchy
Explore our color system in action across the site, or check out the CSS variables in globals.css.