기초FOX · Color
색
종이색 바탕에 먹색 선을 긋고, 강조는 보라 하나만 써요. 주황, 초록, 빨강은 꾸미는 색이 아니라 뜻을 전하는 색이에요.
기본 색 팔레트
모든 색은 이 스무 개 기본 색에서 나와요. 화면에서는 기본 색을 바로 쓰지 않고 아래 뜻이 있는 이름으로 써요.
회색 (gray) 과 종이, 먹
--nm-paper
#fefefe
--nm-white
#ffffff
--nm-gray-02
#fafafa
--nm-gray-07
#ededed
--nm-gray-13
#dedede
--nm-gray-45
#8a8a8a
--nm-gray-55
#737373
--nm-gray-72
#484848
--nm-ink
#1e1e1e
보라 (purple)
--nm-purple-10
#eeedff
--nm-purple-30
#bdbbff
--nm-purple-50
#7f74fc
--nm-purple-60
#5d4cf2
--nm-purple-70
#4536d0
주황 (orange)
--nm-orange-10
#fff1e3
--nm-orange-60
#d9661a
초록 (green)
--nm-green-10
#e3f5f2
--nm-green-60
#00867d
빨강 (red)
--nm-red-10
#fdecef
--nm-red-60
#c2253f
뜻이 있는 색
코드에서는 언제나 이 이름을 써요. 바탕색이 바뀌어도 이름의 뜻은 그대로예요.
SEMANTIC TOKENS
--nm-bg페이지 바탕--nm-paper--nm-surface카드, 입력칸 안쪽--nm-white--nm-surface-soft꺼진 영역, 보조 바탕--nm-gray-02--nm-fg기본 글자와 아이콘--nm-ink--nm-fg-sub보조 설명 글자--nm-gray-72--nm-fg-muted힌트, 날짜 같은 약한 글자--nm-gray-55--nm-fg-disabled꺼진 글자--nm-gray-45--nm-fg-on-accent보라 바탕 위 글자--nm-white--nm-border1px 먹색 테두리--nm-ink--nm-divider구분선--nm-gray-13--nm-divider-soft약한 구분선--nm-gray-07--nm-accent주 행동, 선택됨, 링크--nm-purple-60--nm-accent-hover마우스를 올렸을 때--nm-purple-50--nm-accent-pressed눌렀을 때--nm-purple-70--nm-accent-soft보라 옅은 바탕--nm-purple-10--nm-accent-line보라 옅은 선--nm-purple-30--nm-warning주의--nm-orange-60--nm-warning-soft주의 바탕--nm-orange-10--nm-positive성공, 완료--nm-green-60--nm-positive-soft성공 바탕--nm-green-10--nm-danger오류, 되돌릴 수 없는 행동--nm-red-60--nm-danger-soft오류 바탕--nm-red-10색을 쓰는 규칙
보라만 강조색이에요. 나머지 세 색은 해당하는 뜻이 있을 때만 써요.
MEANING COLORS
보라
강조. 주 행동, 선택됨
주황
주의. 확인이 필요해요
초록
성공. 끝났어요
빨강
오류. 되돌릴 수 없어요
계좌번호를 다시 확인해 주세요
이렇게빨강은 오류에만 써요.
새 소식이 도착했어요
이렇게 말고눈에 띄게 하려고 빨강을 쓰면 오류로 읽혀요.
보라 바탕 위 글자
보라 바탕 위에는 언제나 흰 글자(--nm-fg-on-accent)를 써요. 보라와 흰색의 대비가 충분해서 15px 이상 글자도 또렷하게 읽혀요. 옅은 보라 바탕에는 먹색 글자를 써요.
ON ACCENT
보라 바탕, 흰 글자
옅은 보라 바탕, 먹색 글자