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

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

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

34색 토큰
33시맨틱 토큰
7컴포넌트
18문서
원칙

고민될 때 돌아오는 네 문장

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

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)
문서 시작하기 토큰 내려받기