REBOUNDDesign System rebound-biz 기준 · 2026.09 저장소
Rebound Design System

같은 규칙으로 만든 화면은
설명이 필요 없어요

채권자와 채무자가 쓰는 리바운드 비즈의 고객 페이지를 같은 결로 만들기 위한 색·글자·컴포넌트 규칙이에요. 여기 적힌 값은 전부 지금 서비스에서 돌고 있는 값입니다.

문서 시작하기 컴포넌트 보기
34색 토큰
33시맨틱 토큰
7컴포넌트
18문서
문서

어디서부터 볼까요

색과 글자를 고르는 기준은 Foundations에, 실제로 붙여 쓸 조각은 Components에 있어요.

Foundations

화면의 재료. 팔레트와 역할별 토큰, 글자 스케일, 여백과 모서리.

  • Colors · Primitive
  • Colors · Semantic
  • Typography
  • Layout · Iconography

Components

버튼부터 표까지, 화면에 바로 붙일 수 있는 조각과 스펙.

  • Button · Badge
  • Form · Card
  • Table · Modal
  • Navigation

Patterns

조각을 모아 한 화면을 만드는 방법과, 화면에 쓰는 말.

  • 페이지 구성
  • 빈 화면 · 로딩 · 오류
  • 문구와 숫자 표기

Resources

로고 파일과, 새 프로젝트에 그대로 붙여 넣을 토큰 정의.

  • 로고 · 심볼 SVG
  • Tailwind 설정
  • CSS 변수
Components

바로 쓸 수 있는 조각들

모든 컴포넌트는 디자인 탭에서 스펙과 규칙을, 코드 탭에서 실제 클래스 정의를 볼 수 있어요.

위임 신청취소 Button채운 오렌지 하나, 흰 테두리 하나, 배경 없는 하나 정상 상환연체 주의종료 Badge배경을 채우지 않는 점 배지 여섯 가지 채무자 이름 예) 김리바 Form포커스에서 테두리만 오렌지로 바뀌는 입력 연체7건확인 필요 Card테두리 없이 흰 바탕 + 거의 안 보이는 그림자
채무자원금
김리바8,400,000
이바운3,200,000
Table세로선 없이 가로선만, 금액은 오른쪽 정렬 계좌 등록 상환금을 받을 계좌를 등록해 주세요 취소 등록 Modal흐름을 끊어야 할 때만. 성공은 토스트로
원칙

고민될 때 돌아오는 네 문장

새로운 화면에서 판단이 갈릴 때, 이 네 가지가 기준이에요.

01데이터가 주인공

화면의 대부분은 무채색이에요. 색은 상태를 가리킬 때만 씁니다.

02채운 색은 하나

한 화면에서 오렌지로 채운 버튼은 하나. 나머지는 흰 버튼이나 고스트로 내립니다.

03선보다 여백

카드는 테두리 없이 흰 배경과 옅은 그림자로. 선은 표의 행 사이에만.

04숫자는 줄을 맞춘다

금액·건수·날짜는 고정폭 숫자로, 금액 열은 오른쪽 정렬.

시작하기

새 페이지를 만든다면

토큰 파일 두 개만 맞추면 이 문서의 컴포넌트가 그대로 동작해요.

  • 1Tailwind 설정 복사rebound-biz의 theme.extend — 색 · 폰트 · 그림자 · 라운드
  • 2index.css의 @layer 복사버튼 · 입력 · 표 · 배지 클래스가 여기에 있어요
  • 3Pretendard 연결v1.3.9 static — @import 한 줄
  • 4문서에서 값 고르기hex 대신 Semantic 토큰의 역할로 고릅니다
terminal
npm i -D tailwindcss postcss autoprefixer tailwind.config.js ← theme.extend src/index.css ← @layer base + components 폰트 ← Pretendard v1.3.9 (jsdelivr)
문서 시작하기 토큰 내려받기