OTTODesign System

Foundations

Functional communication

Functional communication describes the meaning carried by signals, states, colors and messages in the interface.
It defines how feedback, status, and intent are interpreted and shape how users understand relevance, priority, and potential consequences.

Overview

We differentiate between five functional types:

  • Error communicates a blocking problem that prevents completion.
  • Warning communicates potential risk or negative consequences that require attention.
  • Success communicates the achievement of an intended, positive outcome.
  • Hint communicates optional guidance that can improve or optimize the situation.
  • Info communicates neutral context without implying risk or required action.

Functional colors

Functional colors show meaning through consistent visual signals and are exclusively reserved for specific functions: error, warning, success, hint, and info. Do not use them outside of their intended use.

text/errorerror-red/100
stroke/errorerror-red/75
background/emphasized/
errorerror-red/50
background/errorerror-red/25
text/warningwarning-orange/100
stroke/warningwarning-orange/75
background/emphasized/
warningwarning-orange/50
background/warningwarning-orange/25
text/successsuccess-green/100
stroke/successsuccess-green/75
background/emphasized/
successsuccess-green/50
background/successsuccess-green/25
text/hinthint-blue/100
stroke/hinthint-blue/75
background/emphasized/
hinthint-blue/50
background/hinthint-blue/25
text/infoblack/100
stroke/infogray400
background/emphasized/
infogray150
background/infogray100
Livefunctional colors
HTML
<div style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%">
<div style="background:var(--oc-semantic-color-text-error);color:var(--oc-semantic-color-text-inverted);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">text/error</strong><span style="opacity:.75">error-red/100</span></div>
<div style="background:var(--oc-semantic-color-stroke-error);color:var(--oc-semantic-color-text-inverted);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">stroke/error</strong><span style="opacity:.75">error-red/75</span></div>
<div style="background:var(--oc-semantic-color-background-emphasized-error);color:var(--oc-semantic-color-text-default);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">background/emphasized/<br>error</strong><span style="opacity:.75">error-red/50</span></div>
<div style="background:var(--oc-semantic-color-background-error);color:var(--oc-semantic-color-text-default);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">background/error</strong><span style="opacity:.75">error-red/25</span></div>
<div style="background:var(--oc-semantic-color-text-warning);color:var(--oc-semantic-color-text-inverted);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">text/warning</strong><span style="opacity:.75">warning-orange/100</span></div>
<div style="background:var(--oc-semantic-color-stroke-warning);color:var(--oc-semantic-color-text-inverted);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">stroke/warning</strong><span style="opacity:.75">warning-orange/75</span></div>
<div style="background:var(--oc-semantic-color-background-emphasized-warning);color:var(--oc-semantic-color-text-default);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">background/emphasized/<br>warning</strong><span style="opacity:.75">warning-orange/50</span></div>
<div style="background:var(--oc-semantic-color-background-warning);color:var(--oc-semantic-color-text-default);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">background/warning</strong><span style="opacity:.75">warning-orange/25</span></div>
<div style="background:var(--oc-semantic-color-text-success);color:var(--oc-semantic-color-text-inverted);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">text/success</strong><span style="opacity:.75">success-green/100</span></div>
<div style="background:var(--oc-semantic-color-stroke-success);color:var(--oc-semantic-color-text-inverted);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">stroke/success</strong><span style="opacity:.75">success-green/75</span></div>
<div style="background:var(--oc-semantic-color-background-emphasized-success);color:var(--oc-semantic-color-text-default);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">background/emphasized/<br>success</strong><span style="opacity:.75">success-green/50</span></div>
<div style="background:var(--oc-semantic-color-background-success);color:var(--oc-semantic-color-text-default);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">background/success</strong><span style="opacity:.75">success-green/25</span></div>
<div style="background:var(--oc-semantic-color-text-hint);color:var(--oc-semantic-color-text-inverted);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">text/hint</strong><span style="opacity:.75">hint-blue/100</span></div>
<div style="background:var(--oc-semantic-color-stroke-hint);color:var(--oc-semantic-color-text-inverted);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">stroke/hint</strong><span style="opacity:.75">hint-blue/75</span></div>
<div style="background:var(--oc-semantic-color-background-emphasized-hint);color:var(--oc-semantic-color-text-default);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">background/emphasized/<br>hint</strong><span style="opacity:.75">hint-blue/50</span></div>
<div style="background:var(--oc-semantic-color-background-hint);color:var(--oc-semantic-color-text-default);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">background/hint</strong><span style="opacity:.75">hint-blue/25</span></div>
<div style="background:var(--oc-semantic-color-text-info);color:var(--oc-semantic-color-text-inverted);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">text/info</strong><span style="opacity:.75">black/100</span></div>
<div style="background:var(--oc-semantic-color-stroke-info);color:var(--oc-semantic-color-text-inverted);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">stroke/info</strong><span style="opacity:.75">gray400</span></div>
<div style="background:var(--oc-semantic-color-background-emphasized-info);color:var(--oc-semantic-color-text-default);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">background/emphasized/<br>info</strong><span style="opacity:.75">gray150</span></div>
<div style="background:var(--oc-semantic-color-background-info);color:var(--oc-semantic-color-text-default);border-radius:4px;padding:8px;min-height:96px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.6875rem;letter-spacing:-0.02em;line-height:1.35"><strong style="display:block;opacity:.85">background/info</strong><span style="opacity:.75">gray100</span></div>

For information on color, refer to the color guidelines.

Choose the right functional communication

Communication is needed.
Is there a blocking problem?
YesNo
Use error communication
Does the situation involve risk?
YesNo
Use warning communication
Was an intended positive outcome achieved?
YesNo
Use success communication
Is there helpful guidance to improve or optimize?
YesNo
Use hint communication
Is there relevant information to share?
YesNo
Use info communication
No communication is needed.
Liveuse_right_semantic
HTML
<div style="display:grid;grid-template-columns:minmax(0,1fr) 170px;column-gap:0;max-width:560px;margin:0 auto;width:100%">
<div style="justify-self:center;background:#f0056e;color:#fff;border-radius:999px;padding:8px 20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;font-weight:700">Communication is needed.</div><div></div>
<div style="justify-self:center;position:relative;width:12px;height:36px"><span style="position:absolute;left:5px;top:0;bottom:2px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:1px;bottom:3px;width:8px;height:8px;border-right:2px solid #f0056e;border-bottom:2px solid #f0056e;transform:rotate(45deg)"></span></div><div></div>
<div style="justify-self:center;border:1.5px solid #f0056e;border-radius:999px;padding:6px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center;max-width:280px;line-height:1.4;color:var(--oc-semantic-color-text-default)">Is there a blocking problem?</div><div></div>
<div style="position:relative;height:96px"><span style="position:absolute;left:50%;top:0;height:64px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:50%;right:10px;top:0;height:40px;border-left:2px solid #f0056e;border-bottom:2px solid #f0056e;border-bottom-left-radius:16px"></span><span style="position:absolute;right:2px;top:35px;width:9px;height:9px;border-top:2px solid #f0056e;border-right:2px solid #f0056e;transform:rotate(45deg)"></span><span style="position:absolute;left:62%;top:30px;background:var(--oc-semantic-color-background-canvas);padding:0 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;color:var(--oc-semantic-color-text-default)">Yes</span><span style="position:absolute;left:50%;top:64px;transform:translateX(-50%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;color:var(--oc-semantic-color-text-default)">No</span></div><div style="align-self:start;margin-top:18px;background:var(--oc-semantic-color-background-error);border:1px solid var(--oc-semantic-color-stroke-error);color:var(--oc-semantic-color-text-error);padding:8px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center">Use error communication</div>
<div style="justify-self:center;position:relative;width:12px;height:36px"><span style="position:absolute;left:5px;top:0;bottom:2px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:1px;bottom:3px;width:8px;height:8px;border-right:2px solid #f0056e;border-bottom:2px solid #f0056e;transform:rotate(45deg)"></span></div><div></div>
<div style="justify-self:center;border:1.5px solid #f0056e;border-radius:999px;padding:6px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center;max-width:280px;line-height:1.4;color:var(--oc-semantic-color-text-default)">Does the situation involve risk?</div><div></div>
<div style="position:relative;height:96px"><span style="position:absolute;left:50%;top:0;height:64px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:50%;right:10px;top:0;height:40px;border-left:2px solid #f0056e;border-bottom:2px solid #f0056e;border-bottom-left-radius:16px"></span><span style="position:absolute;right:2px;top:35px;width:9px;height:9px;border-top:2px solid #f0056e;border-right:2px solid #f0056e;transform:rotate(45deg)"></span><span style="position:absolute;left:62%;top:30px;background:var(--oc-semantic-color-background-canvas);padding:0 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;color:var(--oc-semantic-color-text-default)">Yes</span><span style="position:absolute;left:50%;top:64px;transform:translateX(-50%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;color:var(--oc-semantic-color-text-default)">No</span></div><div style="align-self:start;margin-top:18px;background:var(--oc-semantic-color-background-warning);border:1px solid var(--oc-semantic-color-stroke-warning);color:var(--oc-semantic-color-text-warning);padding:8px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center">Use warning communication</div>
<div style="justify-self:center;position:relative;width:12px;height:36px"><span style="position:absolute;left:5px;top:0;bottom:2px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:1px;bottom:3px;width:8px;height:8px;border-right:2px solid #f0056e;border-bottom:2px solid #f0056e;transform:rotate(45deg)"></span></div><div></div>
<div style="justify-self:center;border:1.5px solid #f0056e;border-radius:999px;padding:6px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center;max-width:280px;line-height:1.4;color:var(--oc-semantic-color-text-default)">Was an intended positive outcome achieved?</div><div></div>
<div style="position:relative;height:96px"><span style="position:absolute;left:50%;top:0;height:64px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:50%;right:10px;top:0;height:40px;border-left:2px solid #f0056e;border-bottom:2px solid #f0056e;border-bottom-left-radius:16px"></span><span style="position:absolute;right:2px;top:35px;width:9px;height:9px;border-top:2px solid #f0056e;border-right:2px solid #f0056e;transform:rotate(45deg)"></span><span style="position:absolute;left:62%;top:30px;background:var(--oc-semantic-color-background-canvas);padding:0 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;color:var(--oc-semantic-color-text-default)">Yes</span><span style="position:absolute;left:50%;top:64px;transform:translateX(-50%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;color:var(--oc-semantic-color-text-default)">No</span></div><div style="align-self:start;margin-top:18px;background:var(--oc-semantic-color-background-success);border:1px solid var(--oc-semantic-color-stroke-success);color:var(--oc-semantic-color-text-success);padding:8px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center">Use success communication</div>
<div style="justify-self:center;position:relative;width:12px;height:36px"><span style="position:absolute;left:5px;top:0;bottom:2px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:1px;bottom:3px;width:8px;height:8px;border-right:2px solid #f0056e;border-bottom:2px solid #f0056e;transform:rotate(45deg)"></span></div><div></div>
<div style="justify-self:center;border:1.5px solid #f0056e;border-radius:999px;padding:6px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center;max-width:280px;line-height:1.4;color:var(--oc-semantic-color-text-default)">Is there helpful guidance to improve or optimize?</div><div></div>
<div style="position:relative;height:96px"><span style="position:absolute;left:50%;top:0;height:64px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:50%;right:10px;top:0;height:40px;border-left:2px solid #f0056e;border-bottom:2px solid #f0056e;border-bottom-left-radius:16px"></span><span style="position:absolute;right:2px;top:35px;width:9px;height:9px;border-top:2px solid #f0056e;border-right:2px solid #f0056e;transform:rotate(45deg)"></span><span style="position:absolute;left:62%;top:30px;background:var(--oc-semantic-color-background-canvas);padding:0 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;color:var(--oc-semantic-color-text-default)">Yes</span><span style="position:absolute;left:50%;top:64px;transform:translateX(-50%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;color:var(--oc-semantic-color-text-default)">No</span></div><div style="align-self:start;margin-top:18px;background:var(--oc-semantic-color-background-hint);border:1px solid var(--oc-semantic-color-stroke-hint);color:var(--oc-semantic-color-text-hint);padding:8px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center">Use hint communication</div>
<div style="justify-self:center;position:relative;width:12px;height:36px"><span style="position:absolute;left:5px;top:0;bottom:2px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:1px;bottom:3px;width:8px;height:8px;border-right:2px solid #f0056e;border-bottom:2px solid #f0056e;transform:rotate(45deg)"></span></div><div></div>
<div style="justify-self:center;border:1.5px solid #f0056e;border-radius:999px;padding:6px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center;max-width:280px;line-height:1.4;color:var(--oc-semantic-color-text-default)">Is there relevant information to share?</div><div></div>
<div style="position:relative;height:96px"><span style="position:absolute;left:50%;top:0;height:64px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:50%;right:10px;top:0;height:40px;border-left:2px solid #f0056e;border-bottom:2px solid #f0056e;border-bottom-left-radius:16px"></span><span style="position:absolute;right:2px;top:35px;width:9px;height:9px;border-top:2px solid #f0056e;border-right:2px solid #f0056e;transform:rotate(45deg)"></span><span style="position:absolute;left:62%;top:30px;background:var(--oc-semantic-color-background-canvas);padding:0 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;color:var(--oc-semantic-color-text-default)">Yes</span><span style="position:absolute;left:50%;top:64px;transform:translateX(-50%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.75rem;color:var(--oc-semantic-color-text-default)">No</span></div><div style="align-self:start;margin-top:18px;background:var(--oc-semantic-color-background-info);border:1px solid var(--oc-semantic-color-stroke-info);color:var(--oc-semantic-color-text-info);padding:8px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center">Use info communication</div>
<div style="justify-self:center;position:relative;width:12px;height:36px"><span style="position:absolute;left:5px;top:0;bottom:2px;border-left:2px solid #f0056e"></span><span style="position:absolute;left:1px;bottom:3px;width:8px;height:8px;border-right:2px solid #f0056e;border-bottom:2px solid #f0056e;transform:rotate(45deg)"></span></div><div></div>
<div style="justify-self:center;background:#f0056e;color:#fff;border-radius:999px;padding:8px 20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;font-weight:700">No communication is needed.</div><div></div>

When to provide actions

Actions should support users when a decision, resolution, or next step is meaningful.
The presence of an action depends on the semantic intent of the message and the level of urgency or choice involved.

Error
communication
Action: Required
An action is required to resolve the issue or exit the state.
Warning
communication
Action: Recommended
An action is recommended to support an explicit decision.
Success
communication
Action: Optional
An action is optional and may support next steps.
Hint
communication
Action: Optional
An action is optional and should enhance guidance.
Info
communication
Action: Optional
An action is optional and should add context sparingly.
Liveactions
HTML
<div style="display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px 24px;align-items:center;width:100%">
<div style="background:var(--oc-semantic-color-background-error);border:1px solid var(--oc-semantic-color-stroke-error);color:var(--oc-semantic-color-text-error);padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center">Error<br>communication</div><div style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;line-height:1.5;color:#f0056e"><strong>Action: Required</strong><br>An action is required to resolve the issue or exit the state.</div>
<div style="background:var(--oc-semantic-color-background-warning);border:1px solid var(--oc-semantic-color-stroke-warning);color:var(--oc-semantic-color-text-warning);padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center">Warning<br>communication</div><div style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;line-height:1.5;color:#f0056e"><strong>Action: Recommended</strong><br>An action is recommended to support an explicit decision.</div>
<div style="background:var(--oc-semantic-color-background-success);border:1px solid var(--oc-semantic-color-stroke-success);color:var(--oc-semantic-color-text-success);padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center">Success<br>communication</div><div style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;line-height:1.5;color:#f0056e"><strong>Action: Optional</strong><br>An action is optional and may support next steps.</div>
<div style="background:var(--oc-semantic-color-background-hint);border:1px solid var(--oc-semantic-color-stroke-hint);color:var(--oc-semantic-color-text-hint);padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center">Hint<br>communication</div><div style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;line-height:1.5;color:#f0056e"><strong>Action: Optional</strong><br>An action is optional and should enhance guidance.</div>
<div style="background:var(--oc-semantic-color-background-info);border:1px solid var(--oc-semantic-color-stroke-info);color:var(--oc-semantic-color-text-info);padding:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;text-align:center">Info<br>communication</div><div style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.8125rem;line-height:1.5;color:#f0056e"><strong>Action: Optional</strong><br>An action is optional and should add context sparingly.</div>
Lieferungen in das europäische Ausland sind nicht möglich. Bitte wähle eine Lieferanschrift innerhalb Deutschlands.Lieferanschrift ändern E-Mail-Adresse
Liveactions_in_components
HTML
<oc-banner-v1 variant="error" size="200" headline="Lieferung nicht möglich" hide-close-button>Lieferungen in das europäische Ausland sind nicht möglich. Bitte wähle eine Lieferanschrift innerhalb Deutschlands.<oc-link-v2 variant="underlined" href="#" slot="actions">Lieferanschrift ändern</oc-link-v2></oc-banner-v1>
<oc-text-field-v1 type="email" value="max mustermann@otto.de" validation-message="E-Mail-Adressen dürfen keine Leerzeichen enthalten. Bitte pass deine Eingabe an und versuche es erneut.">E-Mail-Adresse</oc-text-field-v1>

Functional components

We use a set of functional components to communicate meaning consistently across the interface. Component variants and states further express functional meaning by indicating context, status, and interaction across different situations.

  • Authfield: The auth field is a variation of the text field. It allows users to mask and reveal input.
  • Badge: The badge is a visual component that indicates a status or count.
  • Banner: A banner displays general information or user feedback.
  • Button: Buttons are elements to trigger most UI interactions, such as submitting forms.
  • Form: Form contains checkboxes, dropdowns, form groups, radio buttons and text fields.
  • Icon button: Icon buttons display actions in a compact layout.
  • Progress bar: The progress bar provides a visual representation of progress in a task or process.
  • Search field: The search field component is a component to provide search functionality.
  • Switch: The switch provides a toggle functionality for the users.
  • Tag: A tag labels UI objects for quick recognition and navigation.

Content

Good feedback communication is defined by meaning, intent, and consequence.
Use the following building blocks to communicate feedback consistently, express the right level of impact and risk, and support clear interpretation across the interface.

General

  • Prioritize clarity over creativity.
  • Use a user perspective, not system logic.
  • Use plain language and avoid unexplained terms or abbreviations.
  • Be direct and concrete.
  • Stay calm and respectful.
  • Use active language to describe what is, what happens, and what is possible.

Error

Goal: provide clarity on the failure and enable recovery

| User Question:
What is broken and how do I move forward? | User Emotion:
Before: Confused, stuck

After: Relieved, knows how to proceed | |---|---|

Question Purpose Example Requirement
What went wrong? States clearly what failed „Die Zahlung konnte nicht abgeschlossen werden." Required

| What does this 
mean for the user? | Explains the impact | „Deine Bestellung wurde nicht aufgegeben.“ | Required | | How can this be resolved? | Enables recovery | "Bitte prüfe deine Zahlungsdaten." | Required | | Alternative/exit/support | Restores control | "Oder wähle eine andere Zahlungsart" | Optional |

Best practices

DoState the problem clearly and precisely.
Don'tUse irony or humor.
DoKeep the tone calm and serious.
Don'tUse emotional or dramatic language.
DoDo focus on how the user can resolve the issue.
Don'tBlame the user.
DoGuide the user to the next step.
Don'tLeave users without a clear way forward.

Icons

Use only icons that clearly communicate error. Such as:

LiveIcons: clear, error-hint, error-article-image, oder-cancelled
HTML
<div style="display:flex;gap:8px;width:100%"><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-error)"><oc-icon-v1 type="clear" style="color:var(--oc-semantic-color-text-error)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-error)"><oc-icon-v1 type="error-hint" style="color:var(--oc-semantic-color-text-error)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-error)"><oc-icon-v1 type="error-article-image" style="color:var(--oc-semantic-color-text-error)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-error)"><oc-icon-v1 type="order-cancelled" style="color:var(--oc-semantic-color-text-error)"></oc-icon-v1></div></div>

Deine Bestellung wurde nicht aufgegeben.Bitte prüfe deine Zahlungsdaten.Oder wähle eine andere Zahlungsart
Liveerror_example
HTML
<div style="max-width:340px;margin:0 auto;width:100%"><oc-banner-v1 variant="error" size="200" headline="Die Zahlung konnte nicht abgeschlossen werden." hide-close-button>Deine Bestellung wurde nicht aufgegeben.<span style="display:block;margin-top:8px">Bitte prüfe deine Zahlungsdaten.</span><oc-link-v2 variant="underlined" href="#" slot="actions">Oder wähle eine andere Zahlungsart</oc-link-v2></oc-banner-v1></div>

Warning

Goal: raise awareness and make risks transparent

| User Question:
What is at stake and what can I do? | User Emotion:
Before: Concerned, unsure

After: Reassured, able to decide | |---|---|

Question Purpose Example Requirement
What went wrong? Clearly describes the issue „Es gibt ungespeicherte Änderungen" Required
What might happen? Makes consequences explicit „Wenn du fortfährst werden deine Änderungen nicht übernommen.“ Required
How can this be resolved? Supports conscious choice "Du kannst die Änderungen speichern oder ohne zu speichern fortfahren." Recommended
Recommended action Guides without forcing "Hier Änderungen speichern." Optional

Best practices

DoClearly state the risk.
Don'tExaggerate or dramatize the risk.
DoExplain the possible consequences.
Don'tDownplay potential consequences.
DoKeep the tone objective and matter-of-fact
Don'tUse vague or ambiguous wording.
DoHelp user understand the situation.
Don'tCreate unnecessary urgency.

Icons

Use only icons that clearly communicate warning. Such as:

LiveIcons: warning-hint, warning
HTML
<div style="display:flex;gap:8px;width:100%"><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-warning)"><oc-icon-v1 type="warning-hint" style="color:var(--oc-semantic-color-text-warning)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-warning)"><oc-icon-v1 type="warning" style="color:var(--oc-semantic-color-text-warning)"></oc-icon-v1></div></div>
Wenn du fortfährst, werden deine Änderungen nicht gespeichert.Du kannst die Änderungen speichern oder ohne zu speichern fortfahren.Hier Änderungen speichern
Livewarning_example
HTML
<div style="max-width:340px;margin:0 auto;width:100%"><oc-banner-v1 variant="warning" size="200" headline="Es gibt ungespeicherte Änderungen" hide-close-button>Wenn du fortfährst, werden deine Änderungen nicht gespeichert.<span style="display:block;margin-top:8px">Du kannst die Änderungen speichern oder ohne zu speichern fortfahren.</span><oc-link-v2 variant="underlined" href="#" slot="actions">Hier Änderungen speichern</oc-link-v2></oc-banner-v1></div>

Success

Goal: confirm, provide positive feedback, and create orientation

User Question:
What was successfull and what happens next?		 User Emotion:
Before: Calm
After: Calm, oriented, happy
Question Purpose Example Requirement
What was successfully completed? Confirms success „Es gibt ungespeicherte Änderungen" Required
What does this mean now? Creates confidence „Wenn du fortfährst werden deine Änderungen nicht übernommen.“ Optional

| What is the next 
meaningful step? | Orients the user | "Du kannst die Änderungen speichern oder ohne zu speichern fortfahren." | Optinal |

Best practices

DoConfirm what was successfully completed.
Don'tOver-celebrate or sound euphoric.
DoKeep the message short and clear.
Don'tAdd unnecessary details.
DoUse a positive and appreciative tone.
Don'tUse overly emotional language.
DoProvide orientation on what happens next (if relevant).
Don'tLeave users without clarity on the outcome.

Icons

Use icons more freely, as long as they communicate a positive outcome. A few examples:

LiveIcons: success-hint, check, clipboard-check, email-verification-confirmed, lock-closed-check, hand-high-five
HTML
<div style="display:flex;gap:8px;width:100%"><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-success)"><oc-icon-v1 type="success-hint" style="color:var(--oc-semantic-color-text-success)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-success)"><oc-icon-v1 type="check" style="color:var(--oc-semantic-color-text-success)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-success)"><oc-icon-v1 type="clipboard-check" style="color:var(--oc-semantic-color-text-success)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-success)"><oc-icon-v1 type="email-verification-confirmed" style="color:var(--oc-semantic-color-text-success)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-success)"><oc-icon-v1 type="lock-closed-check" style="color:var(--oc-semantic-color-text-success)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-success)"><oc-icon-v1 type="hand-high-five" style="color:var(--oc-semantic-color-text-success)"></oc-icon-v1></div></div>
Schön, dass du dabei bist! Erkunde jetzt deine UP Plus Vorteilswelt.So einfach geht's
Livesuccess_example
HTML
<div style="max-width:340px;margin:0 auto;width:100%"><oc-banner-v1 variant="success" size="200" icon-type="new" headline="Anmeldung erfolgreich" hide-close-button>Schön, dass du dabei bist! Erkunde jetzt deine UP Plus Vorteilswelt.<oc-link-v2 variant="underlined" href="#" slot="actions">So einfach geht&#39;s</oc-link-v2></oc-banner-v1></div>

Hint

Goal: support, optimize, and help

User Question:
What might help me here?		 User Emotion:
Before: Calm
After: Calm, gently guided, comfortable
Question Purpose Example Requirement
What is relevant to know here? Focuses attention „Doch andere Raten?" Required
Why is this helpful? Builds trust „Du kannst die Ratenzahl einmalig bis zum 14.07.2026“ Required
What is recommended? Guides choice "Ratenzahl ändern" Optional

Best practices

DoSupport, optimize, and help in the current context.
Don'tMake the hint feel required or blocking.
DoKeep the tone friendly, light, and approachable.
Don'tSound instructive or commanding.
DoMake it clear that the hint is optional.
Don'tInterrupt or distract from the main flow.
DoUse an inviting, slightly conversational tone.
Don'tOverload with information.

Icons

Use icons more freely, as long as they fit the context. A few examples:

LiveIcons: question-hint, info-hint, order-state-unkown, smiley-relieved, hand-high-five
HTML
<div style="display:flex;gap:8px;width:100%"><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-hint)"><oc-icon-v1 type="question-hint" style="color:var(--oc-semantic-color-text-hint)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-hint)"><oc-icon-v1 type="info-hint" style="color:var(--oc-semantic-color-text-hint)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-hint)"><oc-icon-v1 type="service-info" style="color:var(--oc-semantic-color-text-hint)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-hint)"><oc-icon-v1 type="order-state-unknown" style="color:var(--oc-semantic-color-text-hint)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-hint)"><oc-icon-v1 type="smiley-relieved" style="color:var(--oc-semantic-color-text-hint)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-hint)"><oc-icon-v1 type="hand-high-five" style="color:var(--oc-semantic-color-text-hint)"></oc-icon-v1></div></div>
Du kannst die Ratenzahl einmalig bis zum 14.08.2026 ändern.Ratenzahl ändern
Livehint_example
HTML
<div style="max-width:340px;margin:0 auto;width:100%"><oc-banner-v1 variant="hint" size="200" icon-type="smiley-relieved" headline="Doch andere Raten?" hide-close-button>Du kannst die Ratenzahl einmalig bis zum 14.08.2026 ändern.<oc-link-v2 variant="underlined" href="#" slot="actions">Ratenzahl ändern</oc-link-v2></oc-banner-v1></div>

Info

Goal: provide neutral information and context

| User Question:
What should I know? | User Emotion:
Before: Concerned, unsure

After: Reassured, able to decide | |---|---|

Question Purpose Example Requirement
What information applies? Provides context „Es gibt ungespeicherte Änderungen" Required

| Where can the user learn 
more (if needed)? | Supports interest | „Wenn du fortfährst werden deine Änderungen nicht übernommen.“ | Optional |

Best practices

DoProvide clear and neutral information.
Don'tAdd unnecessary evaluation or opinion.
DoKeep the tone factual and unbiased.
Don'tSound instructive or commanding.

Icons

Use icons more freely, as long as they fit the context. A few examples:

LiveIcons: info-hint, service-info, email-verification-sent, notification, qr-code, faq
HTML
<div style="display:flex;gap:8px;width:100%"><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-info)"><oc-icon-v1 type="info-hint" style="color:var(--oc-semantic-color-text-info)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-info)"><oc-icon-v1 type="service-info" style="color:var(--oc-semantic-color-text-info)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-info)"><oc-icon-v1 type="email-verification-sent" style="color:var(--oc-semantic-color-text-info)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-info)"><oc-icon-v1 type="notification" style="color:var(--oc-semantic-color-text-info)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-info)"><oc-icon-v1 type="qr-code" style="color:var(--oc-semantic-color-text-info)"></oc-icon-v1></div><div style="flex:1 1 0;display:grid;place-items:center;height:72px;background:var(--oc-semantic-color-background-info)"><oc-icon-v1 type="faq" style="color:var(--oc-semantic-color-text-info)"></oc-icon-v1></div></div>
Bei einer Rücksendung erhältst du den Betrag in wenigen Tagen über deine ursprüngliche Zahlungsart zurück.Details zur Erstattung
Liveinfo_example
HTML
<div style="max-width:340px;margin:0 auto;width:100%"><oc-banner-v1 variant="info" hide-close-button>Bei einer Rücksendung erhältst du den Betrag in wenigen Tagen über deine ursprüngliche Zahlungsart zurück.<oc-link-v2 variant="underlined" href="#" slot="actions">Details zur Erstattung</oc-link-v2></oc-banner-v1></div>

Best practices

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyActionAction
DoUse intended variants of components and color for functional communication.

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,

ActionAction

Don'tDesign own functional communication with custom colors.
E-Mail-Adresse Speichern
DoPlace functional messages close to their context.
E-Mail-Adresse Speichern E-Mail-Adressen dürfen keine Leerzeichen enthalten. Bitte pass deine Eingabe an und versuche es erneut.
Don'tSeparate functional messages from their context.
Das ist passiert.Und das bedeutet folgendes.So kannst du es lösen
DoShow only relevant functional messages.
Schon gewusst?Action Ich bin eine irrelevante Info.Action Ich bin der Superlativ von egal.Action
Don'tOverload users with unnecessary or low-value functional messages.

Status

Updated 28 July 2026