가장 기본이 되는 버튼입니다. 일반적인 상황에 사용합니다.

삭제, 탈퇴 등 주의를 요하는 액션에 사용하는 버튼입니다. Normal 상태일때는 Button default와 똑같이 보이도록 하여 불필요한 주의를 끌지 않지만 hover, focus, active 상태에선 버튼이 붉게 변하며 사용자에게 경고 메시지를 전달하는 역할을 합니다.

Button Default와 Button Solid의 중간정도 위계를 갖는 액션에 사용합니다. 가급적 한 페이지에서 중복하지 않고, 한 번만 사용하도록 합니다.

강력한 시선의 환기 또는 해당 페이지의 키액션 등에 사용하는 버튼입니다. 한 페이지에 한 번만 쓰입니다.

특별히 어포던스가 높아야하는 매체에서 사용하는 버튼입니다. 일반적인 웹에서는 사용하지 않습니다.

버튼 크기는 normal과 large가 있습니다. 일반적으로는 normal 버튼을 사용하지만, 버튼의 크기가 강조되어야할 경우엔 large 버튼을 사용합니다.

일반적인 버튼 너비는 버튼 레이블에 따라 결정됩니다. 이와 달리 column의 너비에 꽉 채운 버튼을 button block이라고 부릅니다. 관습적으로 button large와 button block은 자주 같이 사용합니다.

비슷한 액션을 하는 버튼은 모아서 group으로 만들어 사용합니다.

모든 입력창에 공통적으로 적용되는 기본적인 스타일입니다. 상태에 맞게 적절한 스타일을 적용해, 사용자가 현재 상태를 파악하기 쉽도록 합니다.

검색창은 창 우측에 돋보기 모양을 넣어 검색할 수 있다는 힌트를 주도록 합니다. 검색창에 필터가 붙어있다면 아래와 같이 디자인하고 필터의 너비는 가장 긴 레이블이 안정적으로 들어올 수 있는 너비로 고정합니다.

경우에 따라 폼은 버튼이나 셀렉트, 다른 폼들과 그룹으로 묶어 함께 사용할 수 있습니다.

날짜 입력창입니다. 기간을 입력할 때에는 아래와 같이 시작일과 끝일의 창을 붙여 연관관계를 나타냅니다.

입력창의 앞뒤에 단위 등 고정된 텍스트를 넣고 싶을 때 아래와 add-on을 붙입니다.

레이블과 데이터는 아래과 같이 상하배열 합니다. 데이터가 입력창 사이에 표기될 경우엔 텍스트의 위치가 입력창에 중앙정렬 되도록 레이블과의 간격을 넓힙니다.

체크박스와 라디오버튼은 상황에 맞게 세로 정렬과 가로 정렬을 혼용해 사용합니다.

토글의 원리는 체크박스와 같지만, 체크박스로는 상태를 분명히 나타낼 수 없을 때 사용합니다. 체크박스 대신에 남용되지 않도록 주의합니다.

각종 폼의 invalid 스타일입니다.

하나의 액션 버튼으로 묶이는 모든 폼은 한 카드로 묶으며 하단에 액션 버튼이 sticky footer임을 유의합니다. 카드 내의 레이아웃은 어떤 환경에서도 쾌적하게 보이도록 가능한한 6 column으로 배치합니다.

기본적인 모달 스타일입니다. 모달의 제목 텍스트는 좌측정렬을 기본으로 하지만, 경우에 따라 중앙 정렬도 사용 가능합니다. 모달의 닫기 버튼은 모달 외 배경을 누르면 모달이 닫히는 기능을 암시하며, 모달 내부의 컨텐츠를 방해하지 않기 위해 모달 바깥에 있습니다. 단 디스플레이의 너비가 좁아지면 화면의 여백이 거의 사라지며 닫기 버튼도 모달 내부로 들어옵니다.

모달에 텍스트 입력창을 삽입할 때는 관습적으로 모달 제목을 중앙정렬합니다. 폼들의 배치는 일반적인 폼 섹션과 같이 합니다.

모달 속에 테이블이 있을 때는 테이블의 구성 요소를 최소화합니다. 또한 가급적 페이지 구분을 나누지않고 infinite scroll을 사용합니다.

확인, 성공, 실패 등을 알리는 모달입니다. 모달의 내용에 맞게 상단에 적절한 이미지를 사용하며, 하단에는 항상 확인 버튼을 배치합니다.