Betelgeuse

하드 섀도와 두꺼운 테두리로 눌리는 물성을 만든다.

한 옵션의 켜짐과 꺼짐을 눌림 위치와 색면으로 표시한다.

라벨 대신 아이콘을 쓰는 액션에 필수 접근성 이름을 연결한다.

결정이 필요한 순간을 포스터형 모달로 분리한다.

결과가 큰 작업 전에 짧은 설명과 확인 액션을 표시한다.

굵은 선과 강한 focus 면으로 입력 상태를 드러낸다.

긴 입력도 굵은 선과 강한 면으로 받는다.

적은 옵션을 포스터형 테두리 안에서 고른다.

검색어 입력과 지우기 동작을 하나의 강한 입력 블록에 둔다.

긴 선택 목록을 검색하고 키보드로 이동해 값을 고른다.

기존 값을 고르거나 같은 영역에서 새 값을 만든다.

라벨과 도움말, 오류를 하나의 강한 입력 블록으로 묶는다.

다중 선택을 굵은 accent와 라벨로 표시한다.

하나의 선택지를 굵은 원과 강한 라벨로 나타낸다.

상호 배타적인 선택지를 하나의 명시적 집합으로 묶는다.

즉시 적용되는 on/off 상태를 두꺼운 레일로 전환한다.

필터와 짧은 선택값을 굵은 라벨 조각으로 전환한다.

한 영역의 표시 방식을 서로 배타적인 버튼 묶음으로 바꾼다.

긴 설명을 제목별로 접고 펼쳐 한 화면의 길이를 줄인다.

관련 패널을 키보드와 클릭으로 전환한다.

현재 위치까지의 상위 경로를 링크 목록으로 표시한다.

긴 목록의 현재 페이지와 이전, 다음 이동을 표시한다.

지속 메시지를 굵은 테두리와 하드 섀도로 강하게 표시한다.

두꺼운 테두리와 강한 색면으로 상태를 크게 읽히게 한다.

로딩 구조를 굵은 테두리와 강한 면으로 암시한다.

짧은 처리 상태를 두꺼운 회전 표시로 나타낸다.

작업 완료 비율을 굵은 트랙과 채움으로 표시한다.

정해진 범위 안의 현재 측정값을 라벨과 함께 표시한다.

작업 결과를 화면 오른쪽 위에 일정 시간 표시한다.

식별자를 굵은 원형 배지처럼 표시한다.

여러 식별자를 겹친 배지 묶음으로 압축한다.

하드 섀도와 굵은 구획으로 콘텐츠 덩어리를 만든다.

단일 지표를 포스터형 숫자 카드로 강조한다.

짧은 보조 설명을 두꺼운 팝업 조각으로 덧붙인다.

단축키와 키 입력을 물리 키 모양으로 표시한다.

굵은 테두리와 면으로 내용을 묶는 범용 컨테이너다.

자식을 한 축에 강한 간격감으로 배치한다.

포스터형 카드와 폼을 균일한 열에 배치한다.

콘텐츠 묶음 사이를 2px 선과 선택적 라벨로 나눈다.

콘텐츠가 없는 이유와 다음 액션을 한 블록에서 안내한다.

읽기 중심 데이터를 시맨틱 표와 굵은 셀 경계로 구성한다.

폭이 큰 업무 데이터를 고정 열과 스크롤 영역에 배치한다.

피드와 일정 목록에서 날짜별 콘텐츠 경계를 표시한다.

용어와 값을 한 쌍씩 정렬해 상세 정보를 읽기 쉽게 만든다.

한 대상의 이름과 여러 지표를 하나의 포스터형 카드에 담는다.

외부 서비스 설명과 연결 상태 액션을 함께 표시한다.

일정 제목, 시간과 참여자를 한 카드로 묶는다.

시간에 따른 여러 값의 변화를 굵은 선으로 비교한다.

범주별 크기를 두꺼운 막대와 명시적 경계로 비교한다.

전체에서 각 항목이 차지하는 비율을 원형 분포로 표시한다.

작은 카드 안에서 최근 값의 방향만 빠르게 표시한다.

단일 완료 비율을 반원과 큰 숫자로 표시한다.

행과 열이 만나는 값의 밀도를 한 색의 농도로 표시한다.

부분과 전체의 비율을 한 줄 누적 막대로 비교한다.

여러 지표의 균형을 다각형으로 비교한다.

여러 비율을 크기가 다른 동심원에 배치한다.

증가와 감소가 최종 합계에 미치는 영향을 단계별로 표시한다.

범주별 값을 가는 선과 네모난 점으로 비교한다.