Field Notes
Composition

Sentiment + Emphasis

The relationship between what a component says and how loudly it says it.

Two Independent Axes

Sentiment and Emphasis are independent axes, but their combination carries semantic weight.

  • Sentiment = what to communicate (neutral, warning, highlight, new)
  • Emphasis = how loudly (high, medium, low)

Low emphasis degrades a sentiment's signal across multiple properties simultaneously — reducing color intensity, saturation, and the presence of background or border surfaces. This is intentional: it enables advisory communication without alarming the user.

The Legibility Floor

This degradation creates a legibility floor. A warning at low emphasis may visually approach neutral. This is only appropriate when the warning is genuinely advisory rather than critical.

Hard Rule

The combination of sentiment + emphasis must reflect the actual urgency of the content. Reducing emphasis to lower visual weight when the situation is genuinely critical is a semantic error — not an aesthetic choice.

Decision Guide for Actions

Content criticalityCorrect combination
User's action is blocked or irreversiblewarning + high
User should be aware but can proceedwarning + medium
User may want to know, not blockingwarning + low
Positive distinction, prominenthighlight + high
Positive distinction, ambienthighlight + low

Container vs Action Escalation

Containers (banners, cards, panels) and their action elements can carry different sentiments.

The pattern:

  • Container defaults to neutral with appropriate emphasis for visibility
  • Action element carries the specific sentiment
  • Container only escalates when the situation becomes imminent or blocking

Not yet urgent

ComponentSentimentEmphasisWhy
BannerneutralhighStrong presence without alarm
Action buttonwarningmediumAction carries the caution signal

Now urgent

ComponentSentimentEmphasisWhy
BannerwarninghighContainer itself signals urgency
Action buttonwarninghighBoth demand attention

This separation prevents false alarms:

  • Neutral container + warning action = "here is something to be aware of"
  • Warning container + warning action = "act now"

On this page