DesignDojo
1.1-first-principles · 07-color

Estimated time: 8 min

Info / Primary ActionSuccess / Safe StateWarning / Needs AttentionError / Destructive Action
Semantic color first signals

Color Is A Signal System

Consistent color roles reduce hesitation during decisions.

Blue can mean primary action, green can mean success, and red can mean danger. Those roles must stay stable across screens.

Use Fewer Colors Better

One primary accent for actions

One success, one warning, one danger semantic

Neutrals for structure and body text

A narrow palette feels intentional and easier to maintain. Too many accent colors destroy hierarchy and trust.

Contrast Decides Readability

Color choices still fail if text contrast is weak against the background.

Always test color in context, not in a palette tool alone. Semantic meaning and legibility must both pass.

Primary CTA uses one brand accent while status messages use clear semantic colors with readable text contrast.

Exercise

Select the safest color system for a dashboard.

Semantic Color

A color role with stable meaning, such as success, warning, danger, or primary action.

Contrast Ratio

The luminance difference between foreground and background that determines text readability.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Typography Has A Scale