Color Palette
Every brand needs a color palette. Cake's palette consists of three sets of color swatches: shades, tints, and accents. Background colors and typography use shades. Tints add visual interest in displaying topics. Actions like buttons, links, and other interactive elements use accent swatches.
Type Scale
Strong typography is fundamental to Cake as our customers spend the most time on it reading. Setting a typographic scale for headlines, subtitles, and body paragraphs create a proper visual hierarchy.
Icons
Every icon is designed for clear navigation or actions. Cake’s icon set is completely custom built.
Buttons
Interactive elements like buttons, icons, and links need to be clear and actionable. Emphasis is created by applying accent or shade swatches.
Message Bars
Displaying feedback on completed actions and system status is critical for smooth user experience. Some message bars include actions to perform. Left untouched, these bars self-dismiss after a few seconds.
Guides & Tips
Sometimes it is necessary to help users familiarize themselves with the interface and features. Guides provide step-by-step instructions or explanations, while tips pinpoint errors and describe interface elements.
Topic Cards
The most colorful elements of Cake's UI are topic cards. They are color-coded according to a tint color wheel. This system helps in scanning groups of topic cards.
Placeholders
Staring at a blank screen creates anxiety for users. Placeholder graphics help ease that tension by displaying an abstract preview of the content. A brief description or an action follows under each placeholder.
