토큰 다운로드

tokens.json 하나에서 CSS · TypeScript(RN) · Dart(Flutter) · flat JSON 이 생성됩니다. 값을 바꾸려면 tokens.json 만 고치고 node build.js 를 돌립니다. 아래 경로는 저장소 기준입니다.

tokens.jsontokens.csstokens.tstokens.darttokens.flat.json

파일

파일	경로	쓰는 곳	내용
원본	`D:\FNA_DesignSystem\tokens.json`	토큰 정의자	color.light/dark · semantic · font · space · radius · shadow · size · z · breakpoint · senior · chart
CSS	`dist\tokens.css`	로컬 웹 · 관리자 웹 · 관제 웹 · 이 사이트	`:root` 라이트 · `[data-theme=dark]` · `[data-scale=large]` · html/body 기본
CSS (시스템 다크)	`site\dist\assets\tokens-auto.css`	테마 토글 없이 OS 설정을 따를 때	다크 블록을 `prefers-color-scheme` 로 감싼 생성 파일 (이 사이트 build.js 가 만든다)
컴포넌트 CSS	`dist\components.css`	웹 전부	`.fna-*` 버튼·카드·입력·배지·결재·탭·표·모달·시트·앱바·드로어·토스트·배너·차트
TypeScript	`dist\tokens.ts`	RN 앱 `src/theme/tokens.ts`	COLORS · DARK_COLORS · SPACING · RADIUS · TYPOGRAPHY · BREAKPOINTS · SENIOR · CHART · DARK_CHART · TABLE · CHART_MARK
Dart	`dist\tokens.dart`	Flutter (예정)	FnaColors · FnaDarkColors · FnaSpace · FnaRadius · FnaTypography …
Flat JSON	`dist\tokens.flat.json`	도구 · 이 사이트의 토큰 표	`{ light: {"--fna-x": "#…"}, dark: {…} }`
브랜드 PNG	`D:\FNA_CC\app\src\assets\brand\fna_bi_main.png · fna_bi_horizontal.png`	앱 · 인쇄	세로형 600×800 · 가로형 270×100 (벡터 원본은 브랜드팀)

이 사이트는 파일 다운로드 링크를 두지 않습니다(아티팩트 뷰어에서 다운로드가 막히고, 원본이 다른 작업자에 의해 갱신 중). 위 경로에서 직접 복사하거나 node build.js --sync 로 소비 프로젝트에 배포하세요.

일상 작업

cd D:\FNA_DesignSystem
node build.js                 # tokens.json → dist/ (tokens.css · tokens.ts · tokens.dart · tokens.flat.json)
node build.js --sync          # + sync.targets.json 의 정적 폴더로 css 복사
node check-contrast.js        # 텍스트 4.5:1 · 비텍스트 3:1 · 차트 인접 계열 ΔE 검사 (exit 0 이어야 함)
node scripts/lint-css-vars.js --targets   # 소비 프로젝트의 미정의 변수 · 잔여 hex 검사
node site/build.js            # 이 문서 사이트 재생성 (dist css 를 site/assets 로 다시 복사)
node site/check-links.js      # 문서 사이트 내부 링크 전수 검사
node site/screenshot.js       # 홈·Color·Button·Modal·Rules 라이트/다크/폰 스크린샷 → site/preview/

명명 규칙

CSS: --fna- + 경로. DEFAULT 는 생략. color.light.success.on-container → --fna-success-on-container.
상태 톤 4벌: DEFAULT(점·도형·단색 배경) / text(밝은 배경 위 글자) / container(연한 배경) / on-container(연한 배경 위 글자).
상태 의미: 정상 success · 주의 warning · 경보 danger · 부적합 error · 검토 review · 확인 info · 미수신 neutral.
결재 6단계: none draft review_requested reviewed approved rejected.
TS 는 camelCase(successOnContainer), Dart 는 클래스 + camelCase(FnaColors.successOnContainer).
테마: <html data-theme="dark">, 큰글씨: <html data-scale="large">. RN 은 useColorScheme() + DARK_COLORS, 시니어는 SENIOR.

적용 (요약)

제품	상태	방법
(c) 관리자 웹 · (d) 관제 웹	적용됨	`scripts/migrate-css.js --profile admin` + `sync.js`
(a) RN 앱	보류	MIGRATION.md (a): tokens.ts 복사 → colors.ts 등 re-export → 하드코딩 4곳
(b) 로컬 플랫폼 웹	보류	MIGRATION.md (b): 녹색 → 브랜드 블루 전환 확인 후 `--profile local`
Flutter	예정	tokens.dart

토큰 수

색221 변수 × 2 테마brand · primary · surface · text · border · 7 상태 × 4 · side · chart · table

글꼴10 크기 · 6 굵기 · 7 프리셋+ 시니어 8 크기

간격 · 라운드7 + 74px 배수 · 심볼 비율 0.28

크기 · z · 브레이크포인트28 + 5 + 8control · touch · sidebar · modal · appbar · drawer

안정마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 D:/FNA_DesignSystem/tokens.json · build.js · dist/*Resources · FNA 디자인 시스템 v1.0