기록은 정확하게,
화면은 한눈에.
FNA 스마트해썹 디자인 시스템은 현장 작업자·품질관리자·관제·심사관이 같은 화면 언어를 쓰게 하는 약속입니다.
색·글자·간격·컴포넌트·문구를 한 곳에서 정의해 협업을 빠르게 하고 기록의 신뢰를 지킵니다.
Design Principles
숫자가 주인공
온도·건수·시각은 가장 크고 굵게,
라벨과 단위는 한 단계 물러섭니다.
상태는 색 + 글자 + 모양
정상·주의·경보·부적합은
색만으로 말하지 않습니다.
한 화면, 한 작업
장갑 낀 손으로 한 번에 하나만.
시니어 모드는 큰 버튼 하나입니다.
기록은 지우지 않는다
HACCP 기록은 수정이 아니라 추가.
정정은 이력으로, 승인은 잠금으로.
심사관도 읽는 화면
약어 대신 정식 명칭, 화면마다 ID,
인쇄하면 그대로 서류가 됩니다.
최근 변경
- 추가문서 사이트 v1.0 공개 — Brand · Foundations · Components 19 · Patterns 8 · Rules 8 · UX Writing · Resources
- 추가차트·표 토큰(
--fna-chart-*,--fna-table-*) 및 dataviz 규칙(8계열 CVD 검증, 결재 순서 고정) - 추가시니어 전체화면 시트 모달(
.fna-modal--large), 우측 햄버거 드로어(.fna-drawer), 앱바(.fna-appbar) - 수정주의색 도형용
#f59e0b → #d97706(3.2:1), 보조 글자#5f6a86(5.6:1) — 감사 지적 반영 - 기준tokens.json v1.0.0 단일 출처 확정. RN·로컬 웹·관리자 웹·관제 웹 4개 화면 감사 차이표(AUDIT.md)