한 화면(또는 한 패널)에 주 버튼(primary)은 하나. 장비를 움직이는 버튼은 동사 + 목표값으로 적는다 (100% 열기).

화면을 떠나지 않고 보는 것만 바꿀 때 — 3D 표시 항목, 동 고르기, 지금 / 예보. 2 ~ 5개. 그 이상이면 칩.

목록을 거를 때 — 알림 등급 · 종류, 카메라 분할. 선택된 것은 글자색 반전(.is-on). 개수는 <b> 로.

입력칸은 라벨을 위에, 단위는 칸 안 오른쪽(.input__unit). 규칙 · 기준값처럼 숫자를 넣는 칸은 적정 범위를 바로 아래 보여준다.

상태를 알리는 기본 단위. 점(.dot)은 글자가 바로 옆에 있을 때만 (범례 · 칩 · 목록).

상태가 아닌 정보 — 장비를 지금 누가 움직이는지(자동 · 스케줄 · 수동 · 안전), 개수, 데이터 출처.

화면을 나누는 기본 판. 제목 줄(.card__h)은 아이콘 + 제목 + 오른쪽 "더 보기".

라벨 → 큰 값 → 한 줄 설명. 누르면 자세히(알림 센터 · 바람 · 비 3D)로. 3D 로 이어지는 칸은 오른쪽에 .kpi__go 표시.

값만 보여주지 않고 적정 범위 안에서 어디쯤인지를 같이 — 게이지는 위험 | 주의 | 적정 | 주의 | 위험 다섯 칸.

한 칸에 "무엇이 · 어디서 · 언제 → 무슨 일 → 자동이 무엇을 했나". 안 읽은 알림(.is-unread)은 상태색 바탕 · 테두리.

짧은 목록은 .log(시각 · 무엇 · 결과), 하나의 사건 경과는 .tl(점 + 세로선).

선은 2px 하나 + 적정 범위 띠(초록 옅게). 비교는 우수농가 띠(회색). 기준선은 경고색. 마우스를 올리면 세로선 + 시각별 값. 축은 하나만 (두 축 차트 금지).

3D 라벨 · 카메라 · 날씨를 누르면 뒤 화면(3D)을 그대로 두고 오른쪽에서 열린다. 폰에서는 같은 마크업이 아래에서 올라오는 바텀시트가 된다 (손잡이 자동).

되돌리기 어려운 동작 · 장비 명령 전에만. 제목은 질문, 내용은 지금 → 목표 · 걸리는 시간 · 멈추는 자동 규칙, 주 버튼은 질문의 동사.

껍데기는 화면에 적지 않고 data-shell="메뉴키" 로 넣는다 (spec.js). 화면 크기에 따라 같은 메뉴가 왼쪽 메뉴 → 아이콘 레일 → 하단 탭바로 바뀐다 (앱 껍데기 패턴).

16:9 판. 위에 카메라 이름 · LIVE · 시각, 아래에 설명. 알림 순간의 스냅샷도 같은 모양.

3D 엔진이 위치를 계산해 HTML 로 붙인다 (글자가 선명하고 누를 수 있음). 멀리서는 동 대표값 + 이상 센서만, 확대하면 센서 전부. 누르면 센서 상세 · 카메라 영상으로.

3D 모서리에 고정: 왼쪽 위 = 보는 항목, 왼쪽 아래 = 범례, 오른쪽 아래 = 시점(나침반 · 전체 보기 · 회전 · 바람). 날씨 칩은 바람 · 비가 켜졌을 때만.