Color
Our primary color palette is purple, neutrals and white. Sentiment colors are red, green, and yellow. These colors are present across most touch points from marketing to product.
Brand colors
Neutral colors
Sentiment colors
Comparative brand colors
Functional colors
Typography
We use Proxima Nova for most of our type. However when you want to display code then you should defer to monospace fonts. We use value first hierarchy—important data is made to be more prominent than h1s and h2s.
Main titles. Use once per page.
Section titles. Once per section.
Card titles. Used to define data and context.
Multipurpose
Bold for important information. Flexible for most use cases—from a couple words to long descriptions.
Icons
We use Feather Icons as our icon library. Available as SVGs. To be used at size 24px.
Components
Avatars
Used in the header.
Used in the header.
Used within desktop profile card.
Used within desktop profile card.
Used within mobile profile view.
Used within mobile profile view.
Components
Badges
Badges contain numeric values and indicate a running tally, such as the number of news articles in a page. Use badges to help to draw attention to new or updated content. Badges are placed right next to the label of the thing they're quantifying and contain only numbers or a "+" sign to indicate a quantity greater than the displayed number.
Use default for complimentary info like number of news articles, social media posts, etc.
Use important for info that requires attention.
Components
Banners
Banners are used to at the top of the screen to display important site-wide information. Banners should appear once at a time, should only disappear once the related issue is resolved, or the related campaign is over, and should not be dismissible. Banners appear in the screen by pushing the entire content below by animation. Banners should typically have the title or info followed by action.
Announcing automated replies—Remedy issues in a snap!
Error messages let the user know that something has gone wrong after they've tried to do something. Explain the problem and provide the user with a next step or an alternative. Keep the message simple and direct, and avoid confusing the user with technical details. If it's our fault, own up to it.
We're having issues retrieving infromation.
Warning messages appear before we request the user to take action. This is usually in anticipation of a significant change. Have empathy for the user. Inform, but don't alarm. If the warning comes before an action, clearly communicate what will happen if the they proceed, and provide an alternative where possible.
Your plan is about to expire.
Components
Buttons
Use primary buttons to call attention to an action on a, or highlight the strongest call to action on a page. Primary buttons should only appear once per screen (not including the application header or in ). Keep in mind that not every screen needs a primary button.
Default buttons are the standard button for most use cases.
Use subtle buttons with a primary button for actions that are less crucial such as “Cancel".
Use disabled buttons when another action has to be completed before the button is usable, like changing a field value or waiting for a system response. Use only with primary and standard button types.
Warning buttons appear in anticipation of a significant change. You'll mostly find these in confirmation modals.
Danger button appears as a final confirmation for a destructive action such as deleting. These are found mostly in confirmation modals
Dropdown buttons trigger menus with a set of related actions
Dropdown buttons trigger menus with a set of related actions
Grouped buttons wrapped in a "has group" div give users access to frequently performed, related actions. Use when there is a close relationship between a number of buttons.
A button with an attached dropdown menu of related actions. The labelled section should show the majority use case, while the drop menu shows a list of related actions.
Components
Chips
Use chips to highlight an item's status for quick recognition. They're either 'subtle' or 'bold' and use color to indicate meanings that users can learn and recognize across products.
Components
Inline Message
Used to alert users that important information is available or an action is required to complete the current task.
Components
Modals
Use modal dialogs when you need a user response, to reveal critical information (news articles), or to show info without losing the overall context of a page.
Trigger modalComponents
Components
Tables
Components
Tabs
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Components
Toast notification
Use flags for messages containing confirmations, alerts, and acknowledgments that require minimal user interaction. These event-driven messages appear at the bottom left of the screen and overlay any content. They last for 3 seconds unless they require action.
Your report is ready
Here's your sentiment analysis report covering March 2nd to August 2nd. Comparing pepsi, coke, fanta, and sprite
Download PDFServers are taking a while
The dashboard is taking a little longer than expected. Give it a couple seconds, then try refreshing.
RefreshCheck connectionYour internet may be off
It looks like you're not connected to the internet. Please check you connection settings and try again.
Try againTest it out
Trigger notificationTrigger warning notificationTrigger danger notificationTrigger dropdown notificationComponents
Tooltips
Use tooltips to identify or add a small amount of information to an element. Typically, tooltips are used to help users understand the meaning or purpose of icons, showing the full version of truncated text, or displaying the alt text for an image.
Use the custom "data-tooltip" attribute to set tooltip content. E.g data-tooltip="Here's a tooltip!"
Patterns
Cards
Used to display critical messaging about loss of data, functionality, or important site-wide information that affects the user's ability to use the product. Banners should appear once at a time, should only disappear once the related issue is resolved, and should not be dismissible. Banners appear in the screen by pushing the entire content below by animating.
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Heading
Current Sentiment
Patterns
Forms
Used to display critical messaging about loss of data, functionality, or important site-wide information that affects the user's ability to use the product. Banners should appear once at a time, should only disappear once the related issue is resolved, and should not be dismissible. Banners appear in the screen by pushing the entire content below by animating.