흑백: 집중을 위해 구축된 디자인 시스템

우리는 모든 OLUWA 제품을 엄격한 흑백으로 제작합니다. 브랜드 블루도 없고 청록색 강조도 없고 토스트 알림에 나타나는 "성공 녹색"도 없습니다. 미니멀한 흑백 디자인 시스템은 단말기에 대한 향수도 아니고 우리가 좋아하는 무드보드도 아닙니다. 이는 기본적으로 의사 결정을 더 빠르게 하고, 인터페이스를 더 읽기 쉽게 하며, 접근성 기준을 더 높게 만드는 작업 제약 조건입니다. 이것이 우리가 포기한 것, 내일 채택할 수 있는 토큰과 규칙을 선택한 이유입니다.

의도적으로 색상을 제거한 이유

색상은 인터페이스 디자인에서 가장 많이 남용되는 변수입니다. 추가하는 것은 저렴하고 관리하는 것은 비용이 많이 듭니다. 팔레트가 있는 순간 모든 요소는 색상 중 하나를 놓고 경쟁하며 "이 색상은 무엇이어야 하는가"에 대한 질문이 일주일에 수백 번(대개는 일관되지 않음) 대답하게 됩니다.

파괴적인 버튼은 빨간색입니다. 하지만 오류 상태, 필수 필드 마커, 알림 배지, 이탈 사용자를 위한 차트 시리즈도 마찬가지입니다. 이제 빨간색은 다섯 가지를 의미합니다. 즉, 아무 의미도 없다는 의미입니다.

색상을 제거하면 전체 결정 클래스가 제거됩니다. 중요성을 나타내는 색상을 찾을 수 없을 때 실제로 의미를 전달하는 도구(위치, 크기, 무게 및 공백)를 사용하여 신호를 보냅니다. 이러한 도구는 더 정직합니다. 제목은 누군가가 보라색으로 칠해서가 아니라 크고 주위에 공간이 있어 상단에 위치하기 때문에 중요하게 읽힙니다.

요점: 계층 문제를 해결하기 위해 색상을 사용하는 경우 색상 문제가 아니라 계층 구조 문제가 있는 것입니다. 단색에서는 이를 덮어쓰는 것을 거부합니다.

색상이 없는 계층 구조: 레버 3개

테이블에서 Hue를 사용하면 세 개의 레버가 모든 작업을 수행합니다.

유형 스케일. 우리는 연속적인 크기 변화가 아닌 명확한 점프로 모듈식 스케일을 실행합니다. 너무 가까이 앉아 있는 계단은 소음으로 읽혀집니다. 눈에는 명확한 순위가 필요합니다. 우리의 작업 규모는 대략 12 / 14 / 16 / 20 / 28 / 40 / 64px입니다. 본문 텍스트는 16, 보조 메타데이터는 14, 20 이상의 모든 것은 구조적입니다. 두 가지의 중요성이 다르게 느껴져야 하는 경우, 두 가지 회색 음영으로 동일한 단계가 아닌 다른 단계를 거치게 됩니다.

무게와 케이스. 색상이 없고 서체가 하나이므로 무게가 주요 신호가 됩니다. 우리는 기껏해야 세 가지 가중치를 사용합니다: 보통, 중간, 진정한 강조를 위해 남겨둔 굵은 글씨 하나. 추적된 문자 간격이 있는 대문자는 "레이블 색상" 역할을 수행하여 문자열을 색조 없이 카테고리 또는 눈썹으로 표시합니다.

공간. 공백은 단색 레이아웃의 내력벽입니다. 근접 그룹 관련 항목; 거리가 그들을 분리합니다. 당사의 암호화폐 주문 앱인 MadaiOps에서 주문 티켓은 가격, 크기 및 사이드 시트가 긴밀하게 그룹화되어 있는 반면, 확인 작업은 의도적인 공간으로 밀려나므로 입력 옆에서 절대 손댈 수 없습니다. 빨간색 "위험" 스타일링이 필요하지 않습니다. 간격은 보호를 수행합니다.

대비는 분위기가 아니라 시스템이다

흑백의 함정은 두 가지 값만 가지고 있다고 생각하는 것입니다. 완전한 회색조 램프가 있고 이를 제한하는 규율이 있습니다. 우리는 작고 고정된 단계 세트를 정의하고 오프 램프 회색을 금지합니다. 실제로 배송되는 램프는 다음과 같습니다.

--ink-000: #000000   /* primary text, headings */
--ink-700: #3d3d3d   /* body on light, secondary headings */
--ink-500: #6b6b6b   /* metadata, captions, disabled-adjacent */
--ink-300: #b0b0b0   /* borders, dividers, placeholder */
--ink-100: #e6e6e6   /* subtle fills, hover backgrounds */
--paper:   #ffffff   /* base surface */

여섯 가지 가치. 이는 전체 시스템에 다크 모드의 경우 반대입니다. 검토 시 적용한 규칙은 다음과 같습니다. 경사로에 없는 회색은 존재할 수 없습니다. 누군가가 "경계가 너무 무거워서" #8a8a8a를 점안하는 순간 시스템이 부패하기 시작합니다. 닫힌 값 세트는 단색 UI가 흐릿한 동일성으로 표류하는 것을 방지합니다.

텍스트는 4.5:1로 지워지고, 구조는 3:1로 지워집니다.

모든 표면 위 텍스트 쌍은 배송 전에 WCAG 명암비를 기준으로 확인됩니다. --paper의 --ink-500는 약 5.7:1로 본문 텍스트의 임계값인 4.5:1을 편안하게 넘어섰습니다. --ink-300는 텍스트로 실패하므로 3:1 비텍스트 임계값이 적용되는 테두리와 구분선에 만 허용됩니다. 규칙을 토큰의 가치뿐만 아니라 토큰의 허용된 용도로 인코딩하는 것이 규칙을 고수하게 만드는 것입니다.

접근성 배당금

흑백이 조용히 승리하는 곳입니다. 대략 남성 12명 중 1명은 어떤 형태로든 색각 이상을 앓고 있으며 의미를 전달하기 위해 빨간색 대 녹색에 의존하는 인터페이스는 의미 있는 일부 사용자가 읽을 수 없습니다. 우리는 처음부터 색상에 의미를 인코딩하지 않았기 때문에 결코 그 벽에 부딪히지 않았습니다. 우리의 주는 모양, 라벨, 무게 및 위치로 구별됩니다.

이러한 규율은 모든 곳에서 더 건강한 패턴을 강요합니다. 단일 채널이 단독으로 의미를 전달하도록 두지 마십시오. 시스템에서 비활성화된 버튼은 단순히 가볍기만 한 것이 아닙니다. 테두리가 사라지고 레이블이 --ink-300로 떨어지므로 상태는 회색조 화면, 밝은 햇빛 및 색맹 사용자에게도 동일하게 유지됩니다. 저널링 앱인 Youp는 일반적인 빨간색에서 녹색으로의 감정 그라데이션이 아닌 아이콘과 레이블 텍스트로 기분 항목을 표시하므로 많은 사람들이 볼 수 없는 스펙트럼에 의존하지 않고도 감정 기록을 읽을 수 있습니다.

섬세한 브랜드 팔레트로 브라우저 자체의 접근성 재정의에 맞서 싸운 적이 없기 때문에 무료에 가까운 고대비 및 강제 색상 지원도 받을 수 있습니다.

제약조건으로 인해 결정 속도가 빨라지는 방법

과소평가된 이점은 속도입니다. 팔레트는 조합적 폭발입니다. 모든 새로운 구성 요소는 모든 색상과 모든 상태에 대해 곱해집니다. 흑백은 그것을 무너뜨립니다. 색상을 결정하지 않고도 구성 요소의 디자인은 유형 단계, 두께, 간격 및 테두리의 회색조 토큰으로 축소됩니다. 이는 몇 초 안에 내릴 수 있는 결정이며 취향에 따른 논쟁 대신 규칙을 통해 검토를 통해 방어할 수 있습니다.

그것도 합성합니다. 토큰 세트가 작고 폐쇄적이기 때문에 구성 요소는 예측 가능하게 구성됩니다. 카드, 테이블 행 및 모달은 모두 동일한 6개 회색 및 동일한 7개 유형 단계에서 그려지므로 조정 없이 서로 관련되어 있는 것처럼 보입니다. 새로운 표면은 협상하는 대신 일관성을 상속합니다. 여러 제품을 출시하는 소규모 스튜디오의 경우 공유 기반은 하나의 가족처럼 느껴지는 4개의 앱과 4개의 공급업체처럼 느껴지는 4개의 앱 사이의 차이입니다.

절충안은 실제적이며 명명할 가치가 있습니다. 단색은 원시적인 표현 범위가 적고 일부 카테고리에는 실제로 색상이 필요합니다. 많은 시리즈의 데이터 시각화, 물리적 색상에 매핑되는 모든 것, 따뜻함을 거래하는 브랜드 순간입니다. 우리는 그렇지 않은 척하지 않습니다. 우리의 입장은 색상이 획득되고 희귀해야 하며 특정 작업을 위해 의도적으로 도입되어야 하며 결코 계층 구조의 기본 수단으로 사용되어서는 안 된다는 것입니다. 우리가 그것에 도달하면 주변의 모든 것이 조용하기 때문에 정확하게 착륙합니다.

내일 채택할 수 있는 규칙

모든 것을 다시 빌드하지 않고 이 작업을 시도하려면 다음을 수행하십시오.

회색 램프를 닫습니다. 5~6개의 값을 선택하고 이름을 지정하고 코드 검토 시 램프 밖의 모든 항목을 금지합니다. 이 단일 규칙이 대부분의 작업을 수행합니다.
하나의 유형 스케일을 만들고 해당 단계만 사용하십시오. 임의의 글꼴 크기는 없습니다. 계속해서 새로운 사이즈가 필요하다면 스케일이 잘못된 것입니다. 규모를 수정하고 일회성을 추가하지 마십시오.
허용된 용도를 토큰으로 인코딩합니다. --ink-300는 단순한 16진수 값이 아니라 "테두리만"입니다. 엔지니어가 읽을 수 있는 곳에 문서화하십시오.
두 번째 채널에 대해 의미가 있는 모든 신호를 감사합니다. 색상을 제거하면 상태가 모호해지면 모호해지지 않을 때까지 모양, 레이블 또는 위치를 추가하세요.
공백을 구성 요소로 처리합니다. 명명된 토큰에 공백을 부여하고 다른 곳에서 색상을 방어하는 방식을 검토하여 방어합니다.

마무리 생각

흑백으로 작업하는 것은 우리가 용인하는 제한이 아닙니다. 밝혀주는 렌즈입니다. 가장 쉬운 변수를 제거하면 구조적인 변수인 리듬, 비율, 대비, 공간은 숨길 곳이 없습니다. 인터페이스에는 실제 계층 구조가 있거나 그렇지 않으며 즉시 알아낼 수 있습니다. 그 정직함은 어떤 팔레트보다 우리에게 더 가치가 있습니다.