Components

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

Provide context relevant to one piece of an interface.

The contextual note is meant to further explain a given task or piece of content. It’s not important enough to warrant an interruption, but should serve as a heads-up worth knowing then and there.

For information related to an entire interface, check the notice. And if something comes up as the result of a workflow, use the toast.

Size

Relevant to the note’s size are the sizes of both the icon and text. Consider location and interface density as you choose.

information

This information will only appear for verified recruiters, not the general public.

Small: Micro text and the small icon, ideal for dense interfaces where the note should not compete for attention.

Type

The four note types correspond directly to our feedback icons.

information

We'll use this email address and cell phone number to send you updates related to your account.

Information: Use this for a message that won’t really affect a given task, more of a neutral FYI.

Mobile

Small and medium notes work well on mobile phones, but reserve the large size for tablet views only.

Usage

Non-Dismissible

Every note is either ever-present or removed by righting a wrong.

note-dismiss-dont

Don'tallow them to remove context.

note-dismiss-do

Dodisplay the note for as long as the content is relevant.

Relative Importance

Most notes should serve as subtle hints and updates in the interface, tied directly to just one section.

note-importance-dont

Don'tuse it to introduce an entire page or discuss a feature’s purpose.

note-importance-do

Docarefully consider how helpful the note would be.

Location

Where a note lives can make all the difference in whether or not its seen and how effective the message is.

note-location-dont

Don'tpresent multiple notes together.

note-location-do

Doplace the note right next to whatever it’s discussing.

Links

Feel free to hyperlink text in information and warning notes for the sake of providing more details. Just make sure the linked resource is relevant and valuable enough to distract from the current task.

note-links-dont

Don'tmake the link mandatory or use it in place of the note itself.

note-links-do

Doframe it as supplementary to what’s mentioned in the note.

Styling

Like tooltips, you should only bold or italicize one phrase per note—never an entire sentence, and only if the styling is absolutely necessary.

note-styling-dont

Don'tstyle an entire note just to grab a user’s attention.

note-styling-do

Douse styling for emphasis or clarification.

Microcopy

Content Length

Each note should be no longer than 170 characters. If you can make it shorter, great. Any longer and you risk interrupting their flow.

note-length-dont

Don'tramble when hyperlinked text is always an option.

note-length-do

Doget to the point with only the most relevant info.

Whose Interface?

Check these guidelines and remember “we’re” always talking to a “you”.

note-whoseinterface-dont

Don'twrite in third-person and make things weirdly impersonal.

note-whoseinterface-do

Dosound like one human talking to another.

Body Only

Regardless of what purpose the note serves (message or status), you’ll never need a title or subtitle.

Messages should be written as complete sentences with proper punctuation.

Statuses should be no longer than three words, free of punctuation.

Both should be sentence case.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.