Color Study

Color should carry mood and meaning.

Color is not just branding. It creates hierarchy, mood, affordance, and trust. A good palette tells people what matters, what changed, and what kind of space they have entered.

PaletteContrastTemperature

Palette Behavior

Wheel / relationship / interface role
BaseSurfaceAccentAlert
Color changes the room.Palette is mood, hierarchy, state, and accessibility at the same time.

Room logic

What this changes in the way I design and build.

What I noticed

01Material Design treats color as a system for backgrounds, surfaces, errors, typography, and icons, not just a single brand value.

02W3C contrast guidance makes color practical: text and interactive states need enough contrast to remain readable and usable.

03For my work, color should create feeling without making the product less clear.

How I use it

  • Define a base, surface, accent, warning, and text color before adding expressive details.
  • Check contrast pairs early, especially on dark editorial layouts.
  • Use color changes to communicate state, but never make color the only signal.
References used for this room
Material DesignThe Color SystemW3C Web Accessibility InitiativeColors with Good Contrast

Other rooms

Move through the rest of the design system.

Typography StudyType as pace, not decoration.Color StudyColor should carry mood and meaning.Spacing StudySpace is how interfaces breathe.Interaction StudyFeedback should feel physical.Sound StudySound as interface texture.Culture StudySpecificity makes products feel alive.Accessibility StudyClarity is part of the aesthetic.
Next room / Spacing Study