App Data
대시보드
대시보드는 제품의 첫 화면입니다 — 스탯 그리드 · 액션 카드 · finance 벤토 · limits 진행 바 · 온보딩 흐름까지, 전부 화이트 표면 위 퍼플 액센트 · 8–14px 라운드 · tabular-nums 숫자로 통일했습니다. 아래 데모는 모두 실제 .shell 값을 그대로 재현한 것입니다.
스탯 그리드
상단 KPI 행 — .stat-num 30px/800 + tabular-nums. auto-fit 그리드로 반응형 채움.
액션 카드
Brex식 상단 진입 카드 — .acard. 원형 아이콘 .ab(26px) + 제목 + 설명 .ad. radius 12px, 호버 시 떠오름.
finance 벤토
주요 지표 벤토 그리드 — .fcard(radius 14) + .fnum 25px/800. 증감은 .fdelta.up/.down으로 그린·레드.
월간 스트리밍 수익
광고 지출
전환율
팬 LTV
환불
limits 진행 바
한도·소진 표시 — .limbar는 잔여분을 45° 해치 패턴으로, 채움은 색상 바 + 우측 정렬 퍼센트.
온보딩 대시보드
신규 워크스페이스 진입 화면 — KPI 타일 .bz-tile + 추천 액션 .bz-reco + 시작 체크리스트 .bz-check.
이번 주 요약
추천 액션
온보딩 퀵생성 히어로
신규 워크스페이스 첫 화면 — 좌측 .bz-qmain 퀵생성 입력 + 버튼(.bz-form) + tint 힌트(.bz-hint), 우측 .bz-workflow 워크플로 스텝 pill(.wf-chip). 하단 .bz-promo 프로모.
스마트링크 바로 만들기
.bz-quick(1.7/1fr) · .bz-form input+btn · .bz-hint(tint) · .wf-chip(pill) · .bz-promo
빅 스탯 행
위젯·사이드용 큰 단일 지표 행 — .bstat. 라벨 .l(11.5px) + 값 .v(24px/800 tabular). 행 사이 hairline.
.bstat(16px·hairline) · .l(11.5/600) · .v(24/800 tabular) · .d.up/.down
사용 규칙
- · 모든 KPI·증감 숫자는
tabular-nums정렬 - · 스탯=8px · 액션카드=12px · 벤토=14px 라운드 위계 유지
- · 증감은
.fdelta.up(green)·.down(red)로만 - · limits 잔여는 해치, 채움은 단색 바로 대비
- · 아이콘은 Flaticon uicons
fi-rr-*
- · 밝은 배경 위에 대시보드 컴포넌트 배치
- · 이모지 사용(앱은 uicons fi-rr) · Lime은 강조 1포인트만(본문 액센트는 퍼플)
- · 증감 색을 임의 색상으로 재정의
- · 한 화면에 24px+ 큰 라운드 혼용
- · 숫자에 비례폭 폰트로 자릿수 어긋남 유발