디자인 시스템

리블 제품에서 실제로 쓰는 토큰과 컴포넌트예요. 미리보기는 실제 컴포넌트를 불러와 그리고, props 표·토큰 값·예시 코드는 소스에서 자동으로 뽑아요.

코드가 원본라이트·다크

AI 도구에서 쓰기#

Claude·Cursor 같은 AI 도구가 리블 디자인 시스템의 토큰과 컴포넌트를 바로 읽어요.

터미널

claude mcp add --transport http reevl-ds https://reevl.co.kr/api/mcp-ds

숫자가 주인공이에요
화면의 대부분은 가격·변화율·예측이에요. 장식보다 숫자가 먼저 읽히게, 값 전용 글자 역할(t-val)과 표 숫자(tabular)를 써요.
역할로 골라요
hex나 px을 직접 쓰지 않아요. 색은 ink·sub·brand 같은 역할, 글자는 t-headline·t-body 같은 역할로 골라요.
색은 뜻이에요
상승은 빨강, 하락은 파랑(한국식), 정상은 초록, 주의는 주황이에요. 뜻 없는 색은 쓰지 않아요.

디자인 시스템이 화면의 유일한 기준이에요.

색은 토큰 이름으로만
hex나 rgb를 화면 코드에 직접 적지 않아요. 새 색이 필요하면 토큰부터 만들어요.
글자는 역할로만
글자 크기를 px로 적지 않고 t-headline·t-body 같은 역할을 써요. 역할이 행간·자간·폰 크기까지 정해요.
간격과 층도 이름으로
간격은 정해진 단계에서, 겹치는 순서는 쌓임 층 이름에서 골라요.
부품은 정본 하나
카드·배지·칩·세그먼트·버튼·탭은 정본 부품으로 만들고 손으로 다시 짜지 않아요. 무엇을 쓸지는 컴포넌트 문서의 고르기에 있어요.
검사가 지켜요
새로 적은 값이나 다시 짠 부품은 배포 전 검사에서 막혀요. 예외는 외부 브랜드 색처럼 토큰이 틀린 자리뿐이고 이유를 함께 적어요.

화면은 공용 컴포넌트를 조합하고, 색·글자는 역할 이름(토큰)으로 불러요.

tsx

<Button>조건 추가</Button>
<p className="t-body text-sub">본문은 글자 역할과 색 역할로 써요.</p>