색
역할로 고르는 색 토큰과 라이트·다크 값. 화면의 값은 빌드할 때 제품 코드에서 바로 읽었어요.
브랜드#
라이트
다크
브랜드
주 동작 · 선택 상태
라이트
다크
브랜드 진하게
채움 호버 · 눌림
라이트
다크
브랜드 채움
흰 글자를 얹는 채움(주 버튼 · 채운 칩 · CTA) - 다크에서도 흰 글자 4.5:1
라이트
다크
브랜드 옅게
선택 배경 · 배지
방향(가격)#
라이트
다크
상승
가격 상승 - 한국 관행 빨강
라이트
다크
하락
가격 하락 - 파랑
라이트
다크
상승 배경
상승 배지 바탕
라이트
다크
하락 배경
하락 배지 바탕
상태#
라이트
다크
정상
헬시 · 성공 - 가격 방향 아님
라이트
다크
주의
경고 · 되돌릴 수 없는 동작
라이트
다크
주의 진하게
경고 글자 · 버튼
라이트
다크
실시간
수집 중 · LIVE 표식
면·글자#
라이트
다크
배경
가장 바깥
라이트
다크
앱 면
콘텐츠 바탕
라이트
다크
카드 면
카드 바탕
라이트
다크
칩 면
칩 · 입력 바탕
라이트
다크
호버 면
마우스 올림
라이트
다크
선
테두리 · 구분선
라이트
다크
본문 글자
기본 글자
라이트
다크
보조 글자
설명
라이트
다크
흐린 글자
단위 · 각주
글자용 진한 짝#
라이트
다크
브랜드 글자
옅은 배경 위 브랜드 글자·링크
라이트
다크
상승 글자
상승 배지 글자
라이트
다크
하락 글자
하락 배지 글자
라이트
다크
정상 글자
정상 배지·문구 글자
라이트
다크
대장 글자
대장 배지 글자
라이트
다크
브랜드 위 글자
채움 버튼 글자
그 밖의 토큰#
라이트
다크
line-strong
라이트
다크
ink2
라이트
다크
live-soft
라이트
다크
live-ink
라이트
다크
pos-soft
라이트
다크
warn-soft
라이트
다크
crown
라이트
다크
crown-soft
플랫폼별 값#
세 플랫폼이 같은 색 토큰을 써요. 차량 앱의 색은 웹 토큰에서 그대로 생성했어요.
| 역할 | 모바일 | PC | Pleos개발 중 |
|---|---|---|---|
| 작은 캡션 색 | --dim | --dim | --sub (차량 화면에서 4.5:1을 넘기려고 한 단계 진하게) |
Pleos 값은 차량 앱 공개 저장소(reevl-for-pleos)의 테마 코드에서 옮겼어요. 차량 앱은 개발 중이에요.