FNA Design System

Spacing

4px 배수 7단계. 컴포넌트 안쪽은 em(글자 크기를 따라 커짐), 컴포넌트 사이는 토큰(px 고정)입니다.

4
8
12
16
20
24
32

단계

--fna-space-xs4 · 아이콘–글자, 점–라벨
--fna-space-sm8 · 버튼 사이, 배지 사이, 필드 라벨–입력
--fna-space-md12 · 카드 머리 세로, 폼 그리드 간격, 모달 본문 항목 사이
--fna-space-lg16 · 카드 본문 패딩, 카드 사이, 폰 화면 가장자리
--fna-space-xl20 · 모달 좌우, 시니어 카드 패딩
--fna-space-xxl24 · 절 사이, 시니어 시트 좌우
--fna-space-xxxl32 · 빈 상태 상하, 큰 절 사이

어디에 어떤 단위

위치단위이유예
컴포넌트 안(패딩, 아이콘–글자)em큰글씨 모드에서 글자와 같이 커져야 한다.fna-btn{padding:.55em 1.15em}
컴포넌트 사이(gap, margin)토큰 px배치 리듬은 글자 크기와 무관gap:var(--fna-space-sm)
높이(컨트롤·터치)min-height 토큰44/64 터치 기준을 절대값으로 보장min-height:var(--fna-size-control-md)
화면 가장자리16 (폰) · 24 (태블릿·데스크톱)엄지 도달·시선 여유padding:0 var(--fna-space-lg)

컨트롤 · 터치 크기

토큰값쓰임
--fna-size-control-sm32표 안 버튼, 밀도 높은 관제 목록
--fna-size-control-md40웹 기본 버튼·입력
--fna-size-control-lg48큰 버튼·큰글씨 모드 기본·RN 기본
--fna-size-touch-min44터치 최소(아이콘 버튼 포함) — KWCAG 2.2 / WCAG 2.5.8 초과 충족
--fna-size-touch-senior64시니어 모드 주 버튼·행
--fna-size-topbar-height56웹 상단 바·앱바
--fna-size-appbar-large-height64시니어 앱바
--fna-size-sidebar-width / -rail244 / 66웹 사이드바 펼침 / 접힘
--fna-size-drawer-width300우측 드로어 (min 300, 86vw)
--fna-size-modal-width520기본 모달 (sm 380 · lg 720)

스택 리듬 — 심볼에서

심볼의 막대 사이 간격은 막대 높이의 0.28 입니다. 같은 비율을 컨트롤 스택에 적용하면 40px 버튼 사이 12px(md), 64px 시니어 버튼 사이 16~20px(lg·xl)이 나옵니다.

40px 버튼 스택 · 간격 12
코드
<div style="display:flex;flex-direction:column;gap:var(--fna-space-md);width:240px">
    <button class="fna-btn">기록 저장</button>
    <button class="fna-btn fna-btn--secondary">임시 저장</button>
    <button class="fna-btn fna-btn--text">취소</button>
  </div>

Do · Don't

.fna-btn-group{display:flex;gap:var(--fna-space-sm)}
Do gap 으로 형제 간격
.btn{margin-right:7px;margin-bottom:9px}
Don't 개별 margin 누적 · 임의 값큰글씨·반응형에서 겹치거나 두 배가 된다

안정마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 tokens.json space.* · size.*Foundations · FNA 디자인 시스템 v1.0