본문으로 건너뛰기

Orbit

개발자 도구·터미널·인프라 화면을 위한 다크 퍼스트 시스템이다. 모노스페이스와 네온 악센트로 CLI와 대시보드의 기술적인 인상을 만든다.

액션

기본 버튼

커맨드 실행과 배포 액션의 위계를 네온 포인트로 구분한다.

토글 버튼

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

아이콘 버튼

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

다이얼로그

설정과 확인을 현재 터미널 맥락 위의 집중된 경계에 둔다.

확인 다이얼로그

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

입력

텍스트 입력

저장소와 endpoint처럼 짧은 기술 값을 명확한 경계 안에 받는다.

텍스트 영역

릴리스 노트와 incident 메모를 여러 줄의 입력 공간에 담는다.

셀렉트

환경과 region처럼 고정된 옵션을 공간 효율적으로 제공한다.

검색 입력

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

검색형 드롭다운

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

생성형 드롭다운

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

optional
폼 필드

라벨과 도움말, 오류를 하나의 입력 문맥으로 묶는다.

선택

체크박스

서로 독립적인 여러 필터 조건을 동시에 선택한다.

라디오

상호 배타적인 집합 안에서 한 옵션의 선택 상태를 표현한다.

라디오 그룹

짧은 단일 선택 집합의 범위와 이름을 명확히 묶는다.

스위치

실시간 tail처럼 즉시 적용되는 이진 설정을 드러낸다.

필터와 짧은 선택값을 네온 경계의 라벨 조각으로 전환한다.

세그먼트 컨트롤

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

What happens next?
The query moves to review.
Can I undo it?
A reviewer can return it.
아코디언

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

내비게이션

First panel

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

브레드크럼

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

페이지네이션

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

상태

알림 배너

장애, 지연과 설정 변경처럼 계속 확인해야 하는 메시지를 표시한다.

Online
뱃지

서비스 상태와 리소스 분류를 작은 모노스페이스 라벨로 표시한다.

apiqueue
상태 점

서버와 연결의 상태를 작은 glow 신호로 표시한다.

12:00error[api] request failed
로그 라인

시간과 레벨, 출처를 고정된 리듬으로 정렬해 로그를 읽게 한다.

스켈레톤

로그와 리소스를 불러오는 동안 콘텐츠 자리를 표시한다.

스피너

짧은 명령 실행과 데이터 로딩 상태를 회전 표시로 알린다.

Query72%
진행 막대

작업 완료 비율을 네온 경계의 트랙과 채움으로 표시한다.

미터

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

토스트

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

표시

N
아바타

사용자, 노드와 실행 주체를 이니셜 또는 이미지로 식별한다.

AW+1
아바타 그룹

여러 사용자와 실행 주체를 겹친 식별자로 압축한다.

node-04

ap-northeast-2

healthy · 24ms

카드

노드 이름, 상태와 세부 정보를 하나의 기술 패널로 구성한다.

Requests

24.8K

+8%

스탯 카드

요청 수처럼 중요한 단일 지표와 변화량을 함께 표시한다.

도움말
툴팁

상시 노출하기 부담스러운 짧은 기술 설명을 보강한다.

K
키보드 키

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

레이아웃

runtime block
박스

관련 리소스를 어두운 패널과 네온 경계 안에 묶는다.

apiworker
스택

상태 라벨과 컨트롤을 한 축에 일관된 간격으로 배치한다.

그리드

리소스 카드와 관측 패널을 일정한 열과 간격에 배치한다.


Next
구분선

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

패턴

Nothing here

The next query appears here.

빈 상태

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

NameStatus
QueryReady
SignalLive
테이블

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

ID
Name
Status
A-01
Query
Ready
A-02
Signal
Live
데이터 그리드

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

날짜 구분선

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

Status
Ready
Owner
node-01
설명 목록

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

N

node-01

runtime team

84K

Reach

+12%

92%

Rate

데이터 스탯 카드

한 대상의 이름과 여러 지표를 하나의 기술 카드에 담는다.

R

Relay

제공: Orbit

Sends query signals.

연동 카드

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

Query review

14:00
NW
이벤트 카드

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

커맨드 팔레트

명령을 검색하고 단축키와 함께 실행하는 집중된 흐름을 만든다.

deploy
$ run
00:01successdone
터미널 패널

명령과 출력 로그를 하나의 콘솔형 패널에 유지한다.

데이터 시각화

선 차트

시간에 따른 여러 값의 변화를 네온 경계의 선으로 비교한다.

막대 차트

범주별 크기를 네온 경계의 막대와 명시적 경계로 비교한다.

도넛 차트

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

스파크라인

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

게이지

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

히트맵

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

분포 막대

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

레이더 차트

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

방사형 막대

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

워터폴 차트

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

롤리팝 차트

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