Foundations
Color
중성 sand 램프를 백본으로 두고, gold를 단일 액센트로 씁니다. 상태색은 muted 톤으로 낮춰 화면이 여러 색으로 흩어지지 않게 합니다.
색은 두 층으로 나뉩니다. 프리미티브는 캔버스에 적힌 원시 램프이고, 시맨틱은 컴포넌트가 실제로 참조하는 변수입니다. 다크 모드에서 바뀌는 것은 시맨틱 층뿐입니다.
Sand — 중성 백본
표면, 텍스트, 테두리가 모두 이 램프에서 나옵니다. 채도가 0이라 어떤 색 캐스트도 없습니다.
sand-100
oklch(0.9851 0 90)
sand-200
oklch(0.9702 0 90)
sand-300
oklch(0.9491 0 90)
sand-400
oklch(0.9219 0 90)
sand-500
oklch(0.8699 0 90)
sand-600
oklch(0.7155 0 90)
sand-700
oklch(0.5555 0 90)
sand-800
oklch(0.4386 0 90)
sand-900
oklch(0.3715 0 90)
sand-1000
oklch(0.2686 0 90)
sand-1100
oklch(0.2046 0 90)
sand-1200
oklch(0.1448 0 90)
Gold — 단일 액센트
Horus의 금색입니다. 포커스 링, 링크, 하이라이트에만 씁니다. 버튼 fill로는 쓰지 않습니다.
accent 변수는 브랜드 색이 아니라 hover·선택 상태의 옅은 중성 표면입니다.
gold-100
oklch(0.9805 0.0171 84.587)
gold-200
oklch(0.9453 0.0418 82.486)
gold-300
oklch(0.8818 0.0805 83.15)
gold-400
oklch(0.7994 0.1174 82.177)
gold-500
oklch(0.6906 0.1303 76.2)
gold-600
oklch(0.5251 0.1047 72.175)
Status — 낮춘 톤
성공·실패·정보는 채도를 낮춰 씁니다. warning은 gold와 같은 값을 공유합니다.
green
red
blue
Semantic
컴포넌트가 참조하는 변수입니다. 아래 견본은 현재 테마의 실제 값을 그대로 그립니다.
대비
모든 전경·배경 조합은 WCAG AA(4.5:1)를 넘깁니다. 유리 표면은 자체 전경색을 갖고, 불투명 배경에서는 대비가 떨어지지 않도록 별도 값을 씁니다.