탐색ComponentSaaS 사이드바 잔액 카드 — 잔액 부족 상태 UI

1 / 1

오렌지 그라데이션 잔액 카드에 지갑 아이콘 배지, 알약형 상태 배지, 굵은 금액, 채움형·외곽선형 버튼 한 쌍이 배치되고 아래에 계정 스위처 행이 이어진다.

Component

SaaS 사이드바 잔액 카드 — 잔액 부족 상태 UI

2026-08-23 · 이미지 1

AI 분석

오렌지 그라데이션 카드로 잔액 부족 상태를 알리고 충전 액션을 붙인 사이드바 위젯이다.

밝은 회색 사이드바 하단에 크게 라운드된 잔액 카드가 놓이고 그 아래 계정 스위처 행이 붙는 단일 칼럼 구성이다. 카드 배경은 옅은 살구빛에서 노란빛으로 번지는 부드러운 그라데이션이며 강조 오렌지와 무채색 본문만 쓰는 절제된 색 운용이다. 좌상단의 원형 흰 배지 아이콘과 우상단의 알약형 상태 배지가 잔액 부족을 이중으로 신호하고, 굵은 금액 타이포 아래 보조 설명 한 줄과 채움형 기본 버튼·외곽선형 보조 버튼이 나란히 놓인다. 경고를 붉은 에러색 대신 따뜻한 그라데이션과 배지로 부드럽게 전달하는 방식이라 상태 기반 카드와 업셀 진입점 설계 레퍼런스로 쓸 만하다.

soft-gradient · minimal · light-mode