Create front-end style guides in minutes

Try for free See features


Always visible input hints are info texts or examples guiding users to fill in empty text fields correctly. They should be placed close to the text field (usually below or on the right side of it)...

Written by: Janne Lammi

Always Visible Input Hints


Offering users a way to invite their friends to start using your website is a good way to get more users to your site. Invite feature is also necessary for online collaboration tools, because peop...

Written by: Johannes Hocksell



Rating is an easy way for users to voice their opinion about a certain object. These objects can be physical products, services, or virtual items such as images, videos and articles. Users are inv...

Written by: Johannes Hocksell



User Card pops out when hovering over someone’s profile picture or display name. It is a small panel presenting a larger version of the user’s display image, the user’s full display na...

Written by: Johannes Hocksell

User Card


Blank slate is the screen people see when they start using an application and there is no data to show yet. Leaving it blank would not make a good first impression, so it should be filled with som...

Written by: Janne Lammi

Blank Slate


Inline edit allows the user to edit text directly in the page without requiring going to a separate page. It makes the interaction more direct and intuitive as the user can edit the text in the sa...

Written by: Janne Lammi

Inline Edit


Tab-based navigation consists of buttons or tabs aligned side by side and it is usually located at the top of the page. Navigation tabs help the users know where they are and find their way around...

Written by: Janne Lammi

Navigation Tabs


Match the visual presentation of actions to their importance to minimize the risk for potential errors and help people complete a form as quickly as possible. Primary actions are actions such as “...

Written by: Janne Lammi

Primary & Secondary Actions


A special pattern describing basic input controls (Text box, checkbox, radio button, and drop-down list) in Web applications. Source: Different types...

Written by: Janne Lammi

Input Controls


Vertical Module Tabs separates content into different panes, and the panes can be viewed one at a time. This pattern can also be used to show selection-dependent inputs on a form (show initial que...

Written by: Janne Lammi

Vertical Module Tabs


Hover-Reveal Tools allows user to interact directly with the content. Hover-Reveal Tools are contextual tools that are shown when the user hovers over an element that has tools available. Hiding t...

Written by: Janne Lammi

Hover-Reveal Tools


People tend to make mistakes when interacting with applications. Making one mistake can throw away hours of work. Therefore users should be have an option to easily undo their actions and get thei...

Written by: Janne Lammi



Highlighting (a.k.a., spotlighting) is an effective but subtle way to draw attention to a change in the interface. For instance, instead of showing a message telling people that their item was add...

Written by: Janne Lammi

Spotlight Effect


Contextual Tools, like Always-Visible Tools, allow user to interact directly with the content. Like the name says, Always-Visible Tools are always visible instead of hiding them until the user nee...

Written by: Janne Lammi

Always-Visible Tools


Autocomplete helps the user to provide valid answers. As the user types into a text box, a list of matching answers is shown in a drop-down menu below the text box. The user can then choose the co...

Written by: Janne Lammi