Color Proportions

Overview

Successful designs use color in balanced proportions, with primary, secondary, and accent colors working together to create clear, cohesive layouts. Different uses of color can create different moods, levels of energy, and points of focus, helping guide attention and make content easier to follow.

Guidelines

  • Primary and secondary colors should carry most of the visual weight in a layout.
  • Accent colors should be used sparingly to highlight key information, calls-to-action, data visualizations, or moments of emphasis. 
  • Color tints can be used to soften backgrounds, organize information, or add depth without overpowering content.

Color use Examples

Ocean Blue as the dominant color creates a bold, high-impact brand presence. 

A darker secondary color creates a warmer, more grounded visual tone.

A lighter tint and small touch of accent color create a softer, more subtle visual approach.