General terms

Here is an overview of some of the most common terms and naming conventions that we use in Soul Design System.

Accordion

In UI design, an accordion is a type of menu that vertically stacks items that let the user expand and collapse the content. When a user clicks a label, that section expands to show extended content. One or more labels can be open at a time and it helps users navigate large amounts of information quickly.

Breadcrumb

A breadcrumb is a navigation system which shows where a user is currently situated within a website. Usually located at the top of a page, breadcrumbs let users see their current location and steps they took to get there. As these are clickable links, users can move back to read or edit any information they filled in. For example, if you’re browsing the ASOS clothing website, you might see a trail of links which shows where you are (and how you got there) as follows: Home > Men > Sportswear > Shoes

Call-to-action/CTA

A call-to-action button – or a CTA – encourages users to take a specific action on a website or application. For example: Sign Up, Book Now, Subscribe. CTA buttons exist as a conversion goal, encouraging users to buy, consume or register for a product or service.

Card

Cards group related content side-by-side so that users don’t have to scroll through a list to find the information they are looking for. Square or rectangular-shaped, they have the appearance of a business card and they can include buttons, text and images.

Components

Components are the building blocks of a design system. They can be small (e.g., buttons, icons) or large (e.g., navigation systems, carousels). A core aspect of components is that they’re designed to be as simple yet as flexible as possible so that they can be used in multiple instances.

Controls/Input controls

Input controls are the interactive elements used on any interface. These include checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, plus/minus icons for changing number values, text fields, and date fields.

Input field

Input fields are simple places where users can enter content into a system. Forms are the most common example, but a search bar is an example of an input field that we use on an hourly basis.

Margin

The areas sitting left and right of a grid

Meatball menu

The meatball menu is a set of three horizontal dots. When the user clicks on the dots, more options are revealed.

Modal

Message boxes are also known as modal windows and they work in the same way.

Patterns

Patterns are recurring solutions to common problems. They can be used to solve design challenges in a variety of ways, from layout to interaction. Within most design projects, patterns will be used to help with the structure and flow of the product.

Primary and secondary button

If there are multiple CTAs on a screen, the primary button lets us know which action is the most important. The secondary button is still an important CTA, but it is less important than the primary button. It should be less visually dominant and should not clash with the image or appearance of the primary.

Slider controls

A slider allows users to set or change a value. A very common example of this is when you are searching for holiday accommodation, you can set your price range. Another example is changing the brightness levels on the screen of your phone.

Snackbar

A non-modal, unobtrusive element to display a short message that appears on the screen when an event occurs and usually automatically disappears. It is used to provide feedback or show a message.

Tooltip

When a user hovers over a certain item, a tooltip appears to explain it further. For example, when asked for your CVV number on an online shop, a tooltip usually tells you where to find the CVV number on your credit or debit card.

Toggle

Toggle buttons act like an on-and-off switch, allowing users to change a setting between two states. For example, a toggle switch can be used on your phone’s settings to switch Wi-Fi or Bluetooth connections on or off.