Color

Color 는 HEX 코드 대신 토큰 이름으로 말합니다. 색은 tokens.json 한 곳에서 라이트·다크 두 벌로 정의되고, 화면은 의미 토큰(semantic)만 씁니다. 새 색이 반복해서 필요하면 팀 논의를 거쳐 토큰에 추가한 뒤 사용합니다.

Primitive Tokens

원색 토큰(Primitive)은 색상 계열(Hue)과 톤 단계(Tone)를 조합해 정의한 기본 색 값입니다.
UI 맥락이나 의미를 붙이지 않고 순수한 색 값만 정의합니다. 화면 코드에서 직접 쓰지 않습니다.
tokens.json 에는 독립된 원색 층이 없어(색이 의미 토큰에 직접 적혀 있음) 아래 띠는 기존 값을 밝기순으로 정리한 문서용 참조 스케일입니다. 흰 점이 찍힌 칸이 실제 토큰 값에 해당합니다.

fnaPrefix

primaryColor

700Value

Primary Color

FNA 의 행동색입니다. 주 버튼·링크·선택·활성 탭·포커스 링에 씁니다. 브랜드 네이비(#1B284F)는 이 띠의 90 근처에 있으며 로고·사이드바 크롬에만 씁니다.

Blue

00#F8FAFD05#F0F4FA10#E3EAF615#D2DDF020#BFCFE930#9EB5DC40#7D9CCF50#5E83C260#3F6AB470#2052A780#003B9890#002B72100#001A4F

토큰 위치: 10 primary-container · 20 primary-inverse · 70 secondary · 80 primary · 90 primary-dark · brand-navy

Gray Color

표면·선·글자의 바탕이 되는 중립 색입니다. 다크 모드에서는 라이트 토큰에 짝지어진 다크 값이 자동으로 적용됩니다.

Light gray

surface#FFFFFFlow#F7F9FEbg#F4F6FBcontainer#EEF1F9high#E2E8F7border#DDE3EFstrong#C3C6D6placeholder#8B94ADoutline#737685muted#5F6A86secondary#434C66text#1A2340

Dark gray

text#E6EAF5secondary#C3C9DAmuted#9AA4BDoutline#8D96ABplaceholder#6F7A95strong#3D4A6Cborder#2B3654high#222C46container#1A2238surface#131A2Clow#101727bg#0B1220

Sub Color

상태(신호)를 말하는 색입니다. 정상·주의·경보·부적합·검토 다섯 계열이 tokens.json semantic.status 와 1:1 로 대응하며, 각 계열은 DEFAULT · text · container · on-container 네 단계로 씁니다.

Green

00#F7FBF905#EDF6F110#DEEEE615#CAE4D620#B3D8C530#89C3A740#5DAE8A50#1F9A6E60#077F5970#00674780#00513790#003C28100#012718

토큰 위치: 05 success-container · 50 success · 70 success-text

Amber

00#FEF9F505#FCF1E910#FAE5D615#F6D5BD20#F2C3A030#E8A36C40#DD812D50#C1690960#9F570970#81450480#66350390#4D2600100#331700

토큰 위치: 05 warning-container · 40 warning · 60 warning-text · 70 warning-on-container

Red

00#FCF9F905#FDF0EE10#FDE3DF15#FED0C920#FCBBB330#F6968B40#ED6F6350#E1413A60#C8151A70#A6000D80#83020990#630105100#430002

토큰 위치: 10 danger-container · 50 danger · 60 danger-text · 70 danger-on-container

Deep red

00#FEF9F805#FDF0EE10#FAE4E015#F7D3CE20#F2C0B930#E89E9540#DC7C7150#CE584E60#BF2D2870#A5040D80#83030890#630003100#430001

토큰 위치: 10 error-container · 60 error · 80 error-on-container

Purple

00#FAFAFD05#F3F2FD10#EAE6FD15#DDD7FD20#CFC4FE30#B7A5FC40#A184F850#8C60F360#7936E870#6321C580#4F0CA490#3B017F100#260057

토큰 위치: 10 review-container · 60 review · 70 review-text · review-on-container

차트 스케일 (토큰으로 존재하는 진짜 스케일)

순차 --fna-chart-seq-100 … 700: 히트맵·밀도. 이산 단계는 300~700 만 씁니다.
발산 --fna-chart-div-neg-4 … pos-4: 편차·목표 대비. 가운데는 색상 없는 회색입니다.
범주 --fna-chart-series-1 … 8: 순서 고정, 인접 쌍 CVD ΔE ≥ 8 검증. 순환 금지, 9번째부터는 '기타'.

--fna-chart-seq-100 … 700

100#cde2fb#14305a

200#9ec5f4#1a4a8c

300#6da7ec#2a6bc4

400#3987e5#3987e5

500#256abf#6da7ec

600#184f95#9ec5f4

700#0d366b#cde2fb

--fna-chart-div-* · 저온 파랑 ↔ 고온 빨강

neg-4#1c5cab#86b6ef

neg-3#2a78d6#5598e7

neg-2#6da7ec#2a78d6

neg-1#b7d3f6#1c5cab

mid#e9ecf2#333b52

pos-1#f7c5c4#7f1d1d

pos-2#ee8f8e#b8302f

pos-3#e34948#e34948

pos-4#b8302f#f09a99

--fna-chart-series-1 … 8

1#2a78d6#3987e5

2#eb6834#d95926

3#1baf7a#199e70

4#eda100#c98500

5#e87ba4#d55181

6#008300#008300

7#4a3aa7#9085e9

8#e34948#e66767

Semantic Tokens

의미 토큰은 "어디에 쓰는 색인지"로 이름을 짓습니다. --fna-primary --fna-danger-container --fna-text-muted.
모든 화면·컴포넌트는 의미 토큰만 참조합니다. 라이트/다크가 자동으로 바뀝니다.
컴포넌트 토큰(--fna-chart-* --fna-table-* --fna-side-*)은 의미 토큰을 참조하는 전용 층입니다.

브랜드 · 행동

토큰	라이트	다크	대비(L/D)	용도
`--fna-brand-navy`	`#1b284f`	`#1b284f`	14.4:1 / 1.2:1	브랜드 네이비: 로고·인쇄 머리글·사이드바 크롬
`--fna-brand-accent`	`#dc2626`	`#f87171`	4.8:1 / 6.3:1	브랜드 강조(경보 빨강과 같은 값)
`--fna-primary`	`#003d9b`	`#b2c5ff`	9.8:1 / 10.2:1	주 버튼·링크·선택·활성 탭
`--fna-primary-dark`	`#002b70`	`#8fabff`	13.3:1 / 7.8:1	주 버튼 호버
`--fna-primary-container`	`#dae2ff`	`#0f2f6e`	1.3:1 / 1.4:1	선택 행·활성 항목 배경
`--fna-primary-on`	`#ffffff`	`#002b70`	1.0:1 / 1.3:1	주 버튼 위 글자
`--fna-primary-on-container`	`#003d9b`	`#dae2ff`	9.8:1 / 13.5:1	연파랑 배경 위 글자
`--fna-secondary`	`#335e9e`	`#9db9e8`	6.5:1 / 8.7:1	보조 강조(드물게)
`--fna-focus`	`#003d9b`	`#b2c5ff`	9.8:1 / 10.2:1	포커스 링(2px)
`--fna-overlay`	`rgba(10,16,40,.55)`	`rgba(0,0,0,.6)`	– / –	모달·드로어 뒤 어둡게

표면 · 선

토큰	라이트	다크	용도
`--fna-bg`	`#f4f6fb`	`#0b1220`	페이지 배경
`--fna-surface`	`#ffffff`	`#131a2c`	카드·표·입력 배경
`--fna-surface-low`	`#f7f9fe`	`#101727`	표 헤더·줄무늬·카드 푸터
`--fna-surface-container`	`#eef1f9`	`#1a2238`	칩·고스트 버튼·호버
`--fna-surface-high`	`#e2e8f7`	`#222c46`	보조 버튼 호버
`--fna-surface-highest`	`#d7e2ff`	`#2b3654`	다크 토스트 배경
`--fna-border`	`#dde3ef`	`#2b3654`	기본 선
`--fna-border-strong`	`#c3c6d6`	`#3d4a6c`	아웃라인 버튼·정렬 화살표
`--fna-border-outline`	`#737685`	`#8d96ab`	크로스헤어·강한 선(3:1)

글자

토큰	라이트	다크	대비(L/D)	용도
`--fna-text`	`#1a2340`	`#e6eaf5`	15.5:1 / 14.4:1	본문·제목
`--fna-text-secondary`	`#434c66`	`#c3c9da`	8.5:1 / 10.5:1	보조 설명
`--fna-text-muted`	`#5f6a86`	`#9aa4bd`	5.4:1 / 6.9:1	라벨·캡션·표 헤더 (5.6:1)
`--fna-text-placeholder`	`#8b94ad`	`#6f7a95`	3.0:1 / 4.0:1	입력 자리표시자 (글자 대비 면제, 3:1 이상)
`--fna-text-inverse`	`#ffffff`	`#0b1220`	1.0:1 / 1.1:1	짙은 배경 위 글자

상태 (신호색)

DEFAULT 도형·점·단색 배경 (3:1)
text 밝은 배경 위 글자 (4.5:1)
container 연한 배경 · on-container 그 위 글자 (4.5:1)

토큰	라이트	다크	대비(L/D)	용도
`--fna-success`	`#059669`	`#34d399`	3.8:1 / 9.0:1	정상·적합 (점·도형)
`--fna-success-text`	`#166534`	`#6ee7b7`	7.1:1 / 11.4:1	정상 글자
`--fna-success-container`	`#d1fae5`	`#064e3b`	1.1:1 / 1.8:1	정상 배지·배너 배경
`--fna-success-on-container`	`#166534`	`#a7f3d0`	7.1:1 / 13.5:1	정상 배지 글자
`--fna-warning`	`#d97706`	`#fbbf24`	3.2:1 / 10.4:1	주의 (점·도형) — 3.2:1
`--fna-warning-text`	`#b45309`	`#fcd34d`	5.0:1 / 12.0:1	주의 글자
`--fna-warning-container`	`#fef3c7`	`#5b3d0c`	1.1:1 / 1.7:1	주의 배지 배경
`--fna-warning-on-container`	`#92400e`	`#fde68a`	7.1:1 / 13.9:1	주의 배지 글자
`--fna-danger`	`#dc2626`	`#f87171`	4.8:1 / 6.3:1	경보 (점·이탈 마커·경보 배너 선)
`--fna-danger-text`	`#b91c1c`	`#fca5a5`	6.5:1 / 9.1:1	경보 글자·스탯 숫자
`--fna-danger-container`	`#fee2e2`	`#7f1d1d`	1.2:1 / 1.7:1	경보 배지 배경
`--fna-danger-on-container`	`#991b1b`	`#fecaca`	8.3:1 / 12.0:1	경보 배지 글자
`--fna-error`	`#ba1a1a`	`#ffb4ab`	6.5:1 / 10.2:1	부적합·오류 (입력 오류 테두리·반려)
`--fna-error-text`	`#ba1a1a`	`#ffb4ab`	6.5:1 / 10.2:1	오류 글자·필수 표시
`--fna-error-container`	`#ffdad6`	`#93000a`	1.3:1 / 1.9:1	부적합 행·반려 배지 배경
`--fna-error-on-container`	`#93000a`	`#ffdad6`	9.4:1 / 13.4:1	부적합 글자
`--fna-review`	`#7c3aed`	`#a78bfa`	5.7:1 / 6.4:1	검토·승인 대기 (도형)
`--fna-review-text`	`#6d28d9`	`#c4b5fd`	7.1:1 / 9.4:1	검토 글자
`--fna-review-container`	`#ede9fe`	`#4c1d95`	1.2:1 / 1.6:1	검토 배지 배경
`--fna-review-on-container`	`#5b21b6`	`#ddd6fe`	9.0:1 / 12.5:1	검토 배지 글자
`--fna-info`	`#003d9b`	`#b2c5ff`	9.8:1 / 10.2:1	확인·안내 (= primary)
`--fna-info-container`	`#dae2ff`	`#0f2f6e`	1.3:1 / 1.4:1	안내 배너 배경
`--fna-info-on-container`	`#003d9b`	`#dae2ff`	9.8:1 / 13.5:1	안내 글자
`--fna-neutral`	`#8791a9`	`#6b7590`	3.2:1 / 3.8:1	미수신·중지 (점)
`--fna-neutral-text`	`#5f6a86`	`#9aa4bd`	5.4:1 / 6.9:1	미수신 글자
`--fna-neutral-container`	`#f2f3f7`	`#1f2740`	1.1:1 / 1.2:1	미수신 배지·행 배경
`--fna-neutral-on-container`	`#434c66`	`#c3c9da`	8.5:1 / 10.5:1	미수신 배지 글자

경보와 부적합은 다르다

경보 danger — 센서 값이 기준을 벗어난 지금의 사건. 조치하면 끝납니다. 온도 이탈 배너·경보 센터·추세선 이탈 마커·스탯 숫자.
부적합 error — CCP 판정·심사·결재에서 내려진 기록된 결과. 개선조치 문서가 따라옵니다. 금속검출 불합격·반려·입력 오류·부적합 행.
값(라이트): 경보 #DC2626 / 글자 #B91C1C · 부적합 #BA1A1A / 배경 #FFDAD6.
차트 계열로 한 차트에 함께 두지 않습니다(ΔE 7.5, 구분 불가). 표에서는 배지 라벨이 구분합니다.

대비 검증

node check-contrast.js 가 라이트·다크 모든 조합을 검사합니다.
기준: 글자 4.5:1 · 굵은 큰 글자(18.66px 700 이상) 3:1 · 도형·아이콘·테두리 3:1 (KWCAG 2.2 / WCAG 2.1 AA).

조합	라이트	다크	기준
text / surface	14.9:1	14.1:1	4.5
text-muted / surface	5.6:1	6.9:1	4.5
primary-on / primary	10.4:1	9.0:1	4.5
warning(도형) / surface	3.2:1	9.3:1	3.0
warning-text / surface	4.7:1	10.1:1	4.5
success-on-container / success-container	6.7:1	6.3:1	4.5
side-muted / side-bg	7.9:1	8.6:1	4.5

수치는 토큰 값으로 계산한 대표값. 전체 결과는 check-contrast.js 출력을 따릅니다.

Do · Don't

.alarm-card{
  background:var(--fna-danger-container);
  color:var(--fna-danger-on-container);
}

Do 의미 토큰만 참조

.alarm-card{
  background:#fee2e2;
  color:#991b1b;
}

Don't hex 직접 사용 · 라이트 값 고정

주의: 기준 상한 근접

Do 글자에는 text 단계

주의: 기준 상한 근접

Don't 글자에 도형색(DEFAULT)

코드

<link rel="stylesheet" href="tokens.css">      <!-- :root 라이트 · [data-theme=dark] 다크 · [data-scale=large] 큰글씨 -->
<html data-theme="dark">                         <!-- 명시적 다크. 시스템 설정을 따르려면 속성 생략 + tokens-auto.css -->

/* RN */  import {COLORS, DARK_COLORS} from './theme/tokens';
          const C = useColorScheme() === 'dark' ? DARK_COLORS : COLORS;
/* Flutter */ FnaColors.primary · FnaDarkColors.primary

안정마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 tokens.json → dist/tokens.css · check-contrast.jsFoundations · FNA 디자인 시스템 v1.0