Introduction | TrueUI

Atoms

Guidelines

Blue

Should be used in conjunction with informational calls to action. For example if a user desires more information on a particular course of action.

Orange

Perhaps the most visible color, orange should be paired with pursuasive calls to action. Extremely capable for use with multi screen flows.

Green

Can be used interchangeably with the color orange. A lower sense of urgency and can be paired with an action that carries a sense of finality.

Red

The highest sense of urgency. Should be paired with an extremely important call to action.

HTML

Button Text
<button class=“btn btn--green>Button Text</button>

Disabled State

Button Text

Appending the class “op4” will reduce the opacity to 40% and indicate to the user the button is currently disabled.

HTML

<button class=“btn btn-—blue o-40 disabled”>Button Text</button>