← Back to Roadmap

Pill design system

Phase: Far future

When objects are mentioned (in-line, on menu lists, titles), they should be presented in a consistent manner. We call how objects are presented, pills. Pills are how objects are presented in the interface. Not all objects have pill, but all pills are objects.

Pills can double as title and menu, or as menu objects, or seen in-line, along content.

Pills can be "summoned" by the user by typing reserved keys and then selecting from an autocomplete.

Example 1

pills.svg (disregard buttons)

Pills can be:

  • People (circular avatars)
  • Groups (square avatars)
  • Tags (no avatar, just # icon)
  • other possible pills?

Pills can appear either as:

Inline example


Dropdown example


Pills have certain variations (variations can accumulate):

  • Active state (if user is on pill page)
  • Relationship with user: default, following, blocked

Pills can have certain affordances too (also cumulative):

  • New content available
  • Connected now
  • What other variations?

Pills have certain actions:

  • clicking on pill points you to object page (except if it's in active state, because you're already there)
  • in the future we should consider a way for user to "sniff" info about pill without jumping to place (maybe double click or click and hold opens a modal?)
  • a brief on object info: about, in relation to user, stats