Technical UI Terms

A design system is a shared language that allows everyone on a team to understand each other faster and communicate ideas in a unified and concrete way.

What goes into a design system and how it is implemented can vary greatly from company to company. In general, they can include design patterns, best practices, code snippets, style guides, design resources, and non-tangible things like brand values, mindsets, and beliefs.^[1]

Effective design systems continue to grow and change as the needs of a product change. If your business grows, design systems help scale up the product more easily.

A pattern library represents a collection of all reusable elements in your product, like carousels, buttons, dropdowns, and other components, and their states, slideshows, social media features, navigation, or related links.

Pattern libraries and style guides are subelements of design systems. While a design system and the style guide are more abstract, a pattern library contains examples of these designed (and/or coded) elements.

So, generally, a pattern library includes:

• Pattern names
• Visual representation
• Use cases
• Design elements
• Code samples
• Related elements

Style guides represent a physical or digital document that describes styles, patterns, practices, and principles that build a specific brand/company and teach others how to use them. In other words, it documents the visual identity of a brand or company and how it's used in multiple places.

A style guide may include:

• Design principles
• Best practices
• Brand styles (like colors, logo, or social icons)
• Use cases
• Writing style and tone
• Iconography
• Imagery

Style guides ensure that designs are consistent across a product and brand. For reference, take a look at Foursquare or Duolingo style guides.

A UI kit is a collection of assets and their style attributes that designers can use to build the user interface of a digital product and can be static or coded. In contrast to style guides that provide recommendations and best practices on how elements could be designed, UI kits demonstrate their behavior. UI kits are more focused on illustrating all possible states of an element, including the error state.

Some companies create internal UI kits that their designers can use exclusively. Others turn to pre-made external UI kits that they adapt for their own use. External UI kits are usually used in the early stages of product creation when resources are limited.

HTML is the standard markup language for creating web pages. The acronymn stands for HyperText Markup Language. HTML tells browsers how to display content on the web and adds basic interactivity, such as links.

HTML was exclusively used to create web pages in the early days of the web. Nowadays, it's usually combined with CSS and JavaScript to create rich, interactive content.^[2]

CSS or "Cascading Style Sheets" is a stylesheet language used to add a particular look to a website. It is used to define everything from the page layout to the font sizes and colors. It can be written in-line within an HTML page but is more commonly found in a dedicated file (or files).

JavaScript is a versatile programming language primarily used to add interactivity and dynamic behavior to websites. Unlike HTML (which structures content) and CSS (which styles it), JavaScript focuses on functionality. It allows developers to create features like interactive forms, animated elements, and real-time updates without having to reload the entire page.

A no-code development platform is a tool for building software applications without coding. They allow designers to create fully functional, interactive layouts with visual tools alone.^[3]

No-code development tools can also be used together with content management systems like WordPress and Wix to organize and maintain content. One of the best advantages of no-code development is that designers can create websites without front-end skills.

Shortcuts (or hotkeys) are combinations of keys that, when pressed at the same time, let you quickly perform a task using only your keyboard.

Some shortcuts are nearly universal. For example, Ctrl + C will copy an element in any Windows program. Other shortcuts are specific to individual programs; for example, Command + H will hide extras in Photoshop on Mac.