브랜드 컬러
네이비 한 색이 브랜드를 대표하고, 행동색 파랑과 신호색 네 벌이 그 위에서 일합니다. 비율과 역할이 고정돼 있어 어느 화면을 열어도 같은 회사로 보입니다.
대표색
FNA 네이비
#1B284F · --fna-brand-navyRGB 27 40 79 · CMYK 100 88 40 35(근사)로고 실측색. 상단 바 · 인쇄 머리글 · 스플래시 · 사이드바 계열의 뿌리액션 블루
#003D9B · --fna-primary버튼·링크·선택·포커스. 네이비보다 채도 높은 "누를 수 있는 색"시그널 레드
#DC2626 · --fna-brand-accent경보·CCP 강조. 화면의 2% 이하비율
한 화면에서 색이 차지하는 면적의 기준입니다. 네이비는 크롬(상단·사이드)에만, 파랑은 행동에만, 신호색은 상태에만 씁니다.
현장 화면(폰)은 크롬이 작아 네이비 10% 이하, 관제 화면(데스크톱)은 사이드바 때문에 25% 까지 허용.
네이비 크롬 계열
사이드바·상단 바처럼 짙은 배경 위에서 쓰는 밝은 톤 세트입니다. 두 테마에서 값이 같습니다(크롬은 항상 어둡다).
| 토큰 | 라이트 | 다크 | 대비(L/D) | 용도 |
|---|---|---|---|---|
--fna-side-bg | #1b284f | #111a36 | 1.0:1 / 1.0:1 | 사이드바 배경 |
--fna-side-surface | #16213f | #0d1428 | 1.1:1 / 1.1:1 | 사이드바 안 카드·라이브 박스 |
--fna-side-line | #33457a | #2a3a66 | 1.6:1 / 1.5:1 | 구분선 |
--fna-side-hover | #263660 | #1c2848 | 1.2:1 / 1.2:1 | 항목 호버 |
--fna-side-text | #dbe2f7 | #dbe2f7 | 11.1:1 / 13.3:1 | 기본 글자 |
--fna-side-muted | #93a2cc | #93a2cc | 5.7:1 / 6.8:1 | 보조 글자·아이콘 |
--fna-side-strong | #ffffff | #ffffff | 14.4:1 / 17.1:1 | 제목·강조 글자 |
--fna-side-active | #003d9b | #003d9b | 1.5:1 / 1.7:1 | 활성 항목 배경 |
--fna-side-alarm | #ff8a80 | #ff8a80 | 6.3:1 / 7.5:1 | 라이브 경보 글자 |
--fna-side-caution | #ffd54f | #ffd54f | 10.2:1 / 12.2:1 | 라이브 주의 글자 |
--fna-side-info | #8ab4ff | #8ab4ff | 6.9:1 / 8.2:1 | 라이브 확인 글자 |
--fna-side-review | #c4b5fd | #c4b5fd | 7.8:1 / 9.3:1 | 라이브 검토 글자 |
--fna-side-ok | #6ee7b7 | #6ee7b7 | 9.4:1 / 11.2:1 | 라이브 정상 글자 |
신호색 네 벌 (요약)
정상·주의·경보·부적합. 각각 도형용(DEFAULT)·글자용(text)·연한 배경(container)·연한 배경 위 글자(on-container) 4단계가 있습니다. 전체 표는 Foundations · Color.
정상 · 적합
success주의
warning경보
danger부적합 · 오류
error검토
review미수신 · 중지
neutralDo · Don't
Do 네이비는 크롬, 파랑은 행동
Don't 네이비 버튼 · 파랑 헤더 (역할 뒤섞임)
정상정상경보
Do 빨강은 경보에만
NEW!
Don't 강조·장식으로 빨강
안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 tokens.json color.light.brand / primaryBrand · FNA 디자인 시스템 v1.0