공통 부품이 네 테마에서 어떻게 보이는지 한 장에 모았습니다. 새 화면은 이 이름과 모양을 따릅니다. 사이드바에서 테마를 바꿔 보세요.
화면은 값 대신 이름을 씁니다. 지금 테마의 실제 값이 옆에 나옵니다.
이름은 여섯 개뿐입니다. 숫자를 새로 지어내지 않습니다. 사이드바의 글자 크기를 바꾸면 전부 따라옵니다.
--fs-title --fs-h2 --fs-body --fs-ctl --fs-table --fs-small --t-green · 면·선 --good--t-amber · 면·선 --warn--t-red · 면·선 --bad--ink-dim · 안 읽어도 되는 글에만보통 단추는 흰(밤에는 옅은) 바탕에 선. 주 단추는 색 바탕에 흰 글자, 누르면 실제로 일이 일어나는 것 하나만. 위험 단추는 빨강.
<button>.btn-primary 주 단추button.on 고른 상태.btn-danger 되돌릴 수 없는 일disabledaria-label 필수.seg button(.on) 기간 고르기.tab(.active) 탭.view-switch button(.on) 보기 전환창 안의 이름(.modal-field)을 화면 안에서도 그대로 씁니다. 날짜·시각·마릿수는 자판 대신 ＋－ 단추로 받는 것을 권합니다.
카드는 면 하나에 선 하나. 안에 카드를 또 넣지 않습니다. 숫자는 타일, 목록은 표.
| 날짜 | 모돈 | 총산 | 사산 |
|---|---|---|---|
| 2026-09-25 | 0932 | 11 | 2 |
| 2026-09-25 | 0887 | 4 | 0 |
저장 결과는 짧게 한 줄. 연결 표시는 머리 오른쪽 알약(맨 위 머리에 세 가지 모양이 있습니다). 자료가 없을 때는 무엇을 하면 되는지 한 줄 덧붙입니다.
가운데 뜨는 상자. 뒤는 어두운 막(--scrim-80)으로 가리고, 오른쪽 위 ×와 Esc 로 닫힙니다. 폰에서도 같은 자리에 뜹니다.
Lucide 선 아이콘만 씁니다. 색은 글자색을 따르고 크기는 1.2em. 글자 없는 단추에는 aria-label.