색상

구성 요소는 색상을 명시하지 않습니다. 색상은 팔레트에 존재하며, 밝은 색조와 어두운 색조에 대해 제공된 12개의 톤의 스케일로 표현됩니다. 색상 구성은 페이지가 읽히는 면을 선택하고, 구성 요소는 역할을 읽습니다 — 표면, 경계, 텍스트 — 이는 스케일의 한 위치입니다. 스킨은 결코 색상을 명시하지 않습니다. 헤더에서 구성 을 전환하면 아래의 모든 색상 견본이 재정의되지 않고 이동합니다.

스케일

팔레트는 중립, 강조 — 브랜드 — 그리고 네 가지 상태, 각각 12톤의 스케일로, Radix Themes와 Material 3가 색상을 배치하는 방식으로 배열됩니다. 스케일에서의 위치는 모든 스케일과 두 면에서 동일한 의미를 갖습니다: 아래 숫자의 용도입니다. 애플리케이션은 강조를 제공함으로써 자신의 팔레트를 가져옵니다; 모든 스케일이 따릅니다.

--neutral-*

--accent-*

--info-*

--success-*

--warning-*

--error-*

1 작업 영역의 바닥
2 영역 주위와 사이의 페이지의 바닥
3 필드의 바닥; 상태가 놓여 있는 희미한 바닥
4 올려진 컨트롤; 호버된 바닥
5 카드, 블록 — 그리고 그 독립적인 경계
6 경계
7 두 영역 사이의 경계
8 강한 경계, 초점 링
9 색상 전체, 그것이 표시하는 것을 채우는
10 같은 것, 호버된
11 바닥에서 읽을 수 있는 잉크로서의 색상
12 강한 잉크 — 중립을 위한, 텍스트 자체

표면

영역에서 바깥쪽으로의 바닥 — 각각 중립 스케일에서의 위치입니다. 대시보드의 밝은 면은 흰색까지의 밝기로 정렬하고, 어두운 면은 각각 얼마나 바닥에서 들어올려졌는지를 기준으로 정렬합니다.

--surface-zone페이지의 한 지역이 위치한 바닥

--surface-page페이지 자체와 구역 사이에 표시되는 것

--surface-shell메뉴, 헤더, 바닥글

--surface-1입력 및 필드

--surface-2버튼, 도구 모음

--surface-3블록, 카드, 모달

--surface-invert텍스트의 색상을 사용하여 두드러지는 컨트롤

텍스트

세 가지 주의 수준 — 중립 12, 11 및 9: 읽히는 것, 그것을 자격을 부여하는 것, 그리고 찾아야만 발견할 수 있는 것입니다.

--text-color-default — 읽고 있는 내용

--text-color-muted — 레이블, 메타, 자막

--text-color-subtle — 구분선과 빈 상태

테두리

네 가지 두께, 그들이 구분하는 것에 따라 구별됩니다 — 중립 5에서 8: 하나의 영역 안의 두 가지, 그것 뒤에 있는 것과의 필드, 페이지의 두 영역, 그리고 초점이 있는 것의 링입니다.

--border-color-discreet

--border-color-default

--border-color-region

--border-color-strong

카테고리

서로 옆에 있는 것과는 아무 의미가 없는 13가지 색상: 차트의 시리즈, 분포의 세그먼트, 워크플로우의 단계. 이름이 붙여졌고, 번호가 매겨지지 않았습니다 — 앱은 민트처럼 보이기 때문에 `cat-mint`를 선택합니다 — 그리고 각 카테고리는 다른 것들과 같은 스케일로, 따라서 카테고리는 상태가 착용되는 방식으로 착용됩니다: 그 바닥은 3, 잉크는 11, 채워진 것은 9입니다.

--cat-ruby-*

--cat-grapefruit-*

--cat-bittersweet-*

--cat-sunflower-*

--cat-straw-*

--cat-grass-*

--cat-mint-*

--cat-teal-*

--cat-aqua-*

--cat-blue-jeans-*

--cat-plum-*

--cat-lavender-*

--cat-pink-rose-*