아코디언(Accordions)은 섹션의 중요한 세부 사항을 먼저 강조 표시하고 확장되면 더 많은 세부 정보를 표시하여 점진적으로 정보를 공개하는 컴포넌트입니다.

뱃지(Badges)는 사용자에게 정보를 강조하거나 특정 요소에 주의를 끌기 위해 사용되는 컴포넌트입니다.

배너(Banner)는 사용자의 행동유도와 넛징을 목적으로 사용하는 컴포넌트입니다.

버튼(Buttons)은 사용자의 성공적 작업 수행을 위해 사용되는 컴포넌트입니다. 시각적 계층 구조에 따른 차이가 있습니다.

칩(Chips)은 사용자로 하여금 정보, 선택, 콘텐츠의 필터링, 그리고 특정 액션을 유도하는 컴포넌트입니다.

다이알로그(Dialogs)는 현재 작업과 관련된 긴급 정보를 사용자에게 알립니다. 사용자의 결정에 대해 경고를 하거나 결과를 전달하는 데 사용됩니다.

드롭다운(Dropdowns)은 사용자가 옵션 리스트 중 하나의 옵션을 선택 시 활용되는 컴포넌트입니다.

헤딩(Headings)은 페이지 및 템플릿의 역할 및 기능을 나타내는 컴포넌트입니다.

인포박스(Info boxes)는 본문 외 정보 또는 주의, 강조형 정보로 강조가 필요 시 사용하는 컴포넌트입니다.

아이템 카드(Item cards)란 상품 정보를 사용자에게 집약해 전달하기 위한 컴포넌트입니다.

라벨(Labels)은 메타데이터 또는 넛징 데이터 활용하여 사용자가 상품을 쉽게 선택하도록 도와주는 컴포넌트입니다.

리스트(Lists)는 텍스트 기반 정보를 섹션 또는 그룹으로 나눌 수 있는 연속적인 수직 집합체 입니다.

내비게이션(Navigations)은 사용자가 필요한 것을 찾도록 도와주며 현재 위치를 알려주는 컴포넌트입니다.

팝오버(Popovers)란 부가 정보가 필요한 요소에 사용자 액션 시 노출되는 요소로 사용합니다.

셀렉션 컨트롤(Selection controls)은 사용자가 선택 옵션들을 제어할 수 있도록 돕는 컴포넌트입니다.

시트(Sheets)는 페이지를 이탈하지 않고 집중이 필요한 중요 정보를 표시하거나 복잡한 정보 입력을 요청할 시 사용하는 대안 컴포넌트입니다.

슬라이드(Slides)는 동선 내 사용자 위치를 정확하게 안내 및 표시하기위해 사용하는 요소입니다.

탭은 페이지 내 동일 위계의 콘텐츠를 그룹화한 컴포넌트로 섹션 간 이동 시 사용합니다.

텍스트 필드(Text fields)는 사용자가 UI상 텍스트 입력 및 확인 시 활용되는 컴포넌트입니다.

썸네일(Thumbnails)은 상품 대표 이미지로서 사이즈 및 엘리먼트(썸네일 라벨 및 뱃지)를 포함합니다.