듀오랩스 제품 UI의 기준이 되는 기본 시스템이다. 시맨틱 토큰 위에 중립적이고 조용한 폼을 올려 대부분의 화면을 안정적으로 담고, 나머지 위성 시스템이 이 계약을 확장한다.
한 번 누르고 끝나는 동작을 일으키는 가장 기본 컨트롤.
켜짐/꺼짐 상태를 사용자가 쥐고 유지하는 컨트롤.
툴바와 좁은 영역에서 접근 가능한 이름으로 단일 액션을 실행한다.
입력 폼이나 상세 정보를 현재 화면 위에 띄우는 모달 컨테이너.
삭제 등 되돌릴 수 없는 액션 전에 예/아니오로 확인받는 단일 목적 모달.
누르거나 지울 수 있는 태그: 필터·선택·바로가기.
text·email·password 입력 필드.
입력창과 그 자리에서 실행하는 버튼을 높이가 어긋나지 않게 한 줄로 묶는다.
목록·표를 좁혀 들어가는 검색창.
메모·설명·본문처럼 여러 줄 텍스트를 입력하는 필드.
옵션 수가 적은 단순 폼 선택용 네이티브 select 래퍼.
알림을 받을 주소
입력 컴포넌트에 라벨·도움말·에러를 일관되게 묶는 래퍼.
여러 항목을 켜고 끄며 고르는 기본 선택 컨트롤.
소수 옵션 중 하나를 나타내는 단일 선택 컨트롤.
서로 배타적인 라디오 옵션을 하나의 fieldset으로 묶는 선택 그룹.
같은 영역의 표시 모드를 전환하는 컨트롤.
관련 정보를 제목 아래에 접어 두고 필요한 항목만 펼친다.
즉시 적용되는 on/off 설정을 바꾸는 토글 스위치.
많은 선택지를 접어두고 펼쳐 하나를 고르는 컨트롤.
선택 목록과 인라인 생성 폼을 묶는 컨텍스트 스위처.
현재 페이지의 계층과 상위 경로를 시맨틱 navigation으로 보여준다.
제품별 색·곡률·서체 프리셋을 전역에 적용하는 선택 도구.
라이트와 다크 표시 모드를 전역에서 전환하는 도구.
ProjectSelect로 이관하기 위한 기존 프로젝트 프리셋 별칭.
완료 비율과 진행 상태를 수평 트랙 안에 정량적으로 표시한다.
알려진 범위 안에서 현재 측정값이 차지하는 위치를 표시한다.
시스템이 부여하는 정적 상태를 압축해 보여주는 표시.
확인이 필요해요
처리 결과나 중요한 상태를 맥락 가까이에 지속 표시하는 배너.
로딩 중 실제 콘텐츠의 형태를 암시하는 플레이스홀더.
짧은 액션이나 작은 영역의 진행 중 상태를 나타내는 회전 표시.
hover/focus 때 아이콘이나 짧은 텍스트의 보조 설명을 보여준다.
저장·삭제 등 액션 직후 결과를 짧게 알리고 자동으로 사라지는 전역 알림.
단축키와 물리 키 입력을 작고 촉각적인 키캡 형태로 표시한다.
대시보드에서 단일 지표를 아이콘·숫자·라벨로 보여준다.
엔티티와 복수 지표를 한 카드에 담는 복합 표시 카드.
CRM and marketing platform
서드파티 서비스 연결 상태 카드.
여러 사용자 아바타를 겹쳐 보여주는 스택.
사용자·회사를 식별하는 단일 원형 표시.
제목·시간·참여자 아바타를 묶는 이벤트 표시 카드.
피드·타임라인에서 날짜 단위 경계를 라벨+선으로 드러낸다.
패딩·배경·테두리·반경으로 내용을 묶는 범용 컨테이너.
이번 달
제목·설명·액션이 있는 콘텐츠 섹션 컨테이너.
자식을 세로·가로로 일정 간격으로 배치하는 flex 레이아웃.
행·열 격자로 배치하는 레이아웃.
관련 콘텐츠 묶음 사이의 경계를 선택적인 라벨과 함께 표시한다.
용어와 값을 시맨틱 description list로 정렬해 세부 정보를 읽기 쉽게 만든다.
결과가 없어요
검색어를 바꿔 보세요
결과·데이터가 없을 때 이유와 다음 행동을 안내하는 표시.
긴 목록 하단에서 이전·다음 페이지 이동과 현재 범위를 표시한다.
읽기 위주 데이터를 시맨틱 table 로 보여주는 단순 표.
많은 행과 열을 고정 헤더와 스크롤 영역 안에서 탐색하는 데이터 표.
한 화면 안에서 관련 콘텐츠 섹션을 전환하는 밑줄 탭.
다계열 시계열 추이를 선으로. 영역 워시·마지막 값 강조 옵션.
카테고리별 값을 그룹·누적 세로 막대로 비교.
부분-전체 분포를 도넛 + 범례로 한눈에.
축·라벨 없는 미니 추이선: StatCard 슬롯용.
단일 비율(0~100)을 반원 진행 게이지로.
행×열 밀도를 단일 색 4단계 불투명도로.
부분-전체를 한 줄 가로 누적 바 + 범례로(도넛의 컴팩트 대안).
3~8개 지표(0~100)의 밸런스를 다각형으로.
비율 지표 2~4개를 동심 링 진행도로(게이지 다지표 버전).
증감 단계가 쌓여 합계에 이르는 구성 분해(손익 등).
카테고리 크기 비교를 가는 스템 + 도트로(막대의 가벼운 대안).