expense
Design
조용하고 정확한 기록의 기준.Foundation
기본
2px + 2pxSpacing4 · 8 · 12 · 16 · 20 · 24 · 32 · 40
Radius
Border1px · quiet
Shadowoverlay · floating action
Width
Typography
Wanted Sans
Display · 29 / 680 / 1.2한 달의 기록
Title · 24 / 670 / 1.252026년 7월
Heading · 18 / 650 / 1.35오늘
Body · 14 / 450 / 1.55필요한 정보만 차분하게 보여줍니다.
Label · 12 / 590 / 1.4남은 금액
Caption · 11 / 520 / 1.47월 15일
Amount · 29 / 680 / 1.2128,500원
Layout
화면
콘텐츠최대
모바일 여백
데스크톱 여백
섹션 간격24px
Dock ·
Safe area하단 여백에 더함
Card정보를 묶을 때만
Components
구성 요소
Buttons
Input
Segmented · sliding indicator
Setting row
월 시작일매월 1일
Dock
Calendar cell
Record hierarchy
점심 약속학교 앞에서 먹음식비−8,500원
Sortable category
Dialog frame
Desktop840px · 최대 88dvhMobile화면 너비 · 최대 100dvhAuto size측정된 크기 사이 전환Content본문만 스크롤Footer고정 · safe areaScrollbar본문에서만 숨김
이번달 목표
Date field
Hidden category
선택 화면보이지 않음기존 기록기타로 표시다시 보이기원래 이름 복원저장값원래 분류 유지
Icon select
Compact empty
아직 목표가 없어요
한국식 금액
Period
Category summary
Overlay
States
아직 기록이 없어요
Motion
움직임
- Fast 160 · Normal 210 · Slow 260ms
- Standard · Emphasized easing
- Segmented · 배경만 좌우 이동
- 분류별 총계 · fade + 4px
- Sheet · opacity + 26px
- 정렬 · 핸들을 길게 눌러 이동
- Swipe · 아래로 닫기
- Reduced motion · 0.01ms
Voice
문장
사용홈 · 기록 · 설정 · 이번 달 · 오늘 · 남은 금액 · 기록하기 · 수정 · 지우기 · 아직 기록이 없어요
사용하지 않음submit · transaction · payload · update success · create item · 데이터 처리 중 · 설정을 구성하세요 · 당신의 금융 여정을 시작하세요
Principles
철칙
필요한 것만같은 것은 같게숫자는 선명하게움직임은 조용하게문장은 짧게장식은 적게
Dohandle로 정렬
아이콘과 짧은 이름
한국식 금액 축약
정확한 정렬
제한된 색상
아이콘과 짧은 이름
한국식 금액 축약
정확한 정렬
제한된 색상
Don’t텍스트뿐인 아이콘 select
긴 금액 자르기
큰 빈 상태 카드
화려한 분석 차트
모든 요소의 pill 처리
긴 금액 자르기
큰 빈 상태 카드
화려한 분석 차트
모든 요소의 pill 처리