디자인 토큰

디자인 결정을 사람과 코드가 같은 이름으로 부르는 방법. 화면의 값은 빌드할 때 제품 코드에서 바로 읽었어요.

디자인 토큰이 무엇인가요#

색·글자·모서리·움직임 같은 디자인 결정에 이름을 붙인 것이에요.

“이 글자는 #1a1c20”이라고 적는 대신 “이 글자는 ink”라고 적어요. 값은 한 곳에서 정하고 화면은 이름만 불러요.

리블의 토큰은 제품 코드에서 먼저 생겼어요. 이 문서도 코드에서 값을 읽어 그려요.

모두 CSS 변수로 정의되고, 라이트·다크가 같은 이름을 써요.

색

35개 - 라이트·다크 값이 짝으로 있어요

글자 역할

20개 - 크기·행간·자간을 한 번에 정해요

모서리 · 이징

모서리 4단계, 이징 4개

그라디언트

브랜드 그라디언트 - SNS 카드와 같은 값

코드에서는 CSS 변수보다 Tailwind 클래스로 불러요.