프로젝트
기본 제공하는 여섯 색상 프리셋은 라이트와 다크 양쪽에서 고유한 주색과 배경을 갖는다. Acme는 고객사별 확장 예시다. 아래에서 내 브랜드 색을 직접 적용할 수도 있다.
지금 화면이 데모
우상단 프로젝트 드롭다운을 바꾸면 이 문서의 배경·버튼·강조색이 함께 바뀐다. 모든 프리셋의 모서리와 서체는 디자인 시스템 설정을 따른다.
rounded-xl 카드 모서리pill (rounded-full 은 배율 무관)
프리셋
Pure순백 · 순흑 바탕 · 콘텐츠 색은 코발트tokens.css 내장 (기본값)
Cobalt코발트 블루 · 푸른 배경tokens.css 내장
Amethyst자주색 · 연보라 배경tokens.css 내장
Mono무채색 흑백 · 회색 배경tokens.css 내장
Graphite흑연색 · 청록 강조tokens.css 내장
Amber호박색 · 크림 배경tokens.css 내장
Verdant숲색 · 연녹색 배경tokens.css 내장
Acme와인색 · 크림 배경의 고객사 예시opt-in: projects/acme.css
내 브랜드 색 적용
색 하나를 고르면 라이트·다크 팔레트를 만들고 대비에 맞게 조정합니다. 설정은 이 브라우저에만 저장됩니다.
라이트
브랜드 테마 미리보기
카드, 글자와 상태색이 함께 바뀝니다.
진행 중완료확인 필요
주색 #7c3aed
다크
브랜드 테마 미리보기
카드, 글자와 상태색이 함께 바뀝니다.
진행 중완료확인 필요
주색 #966bff
새 고객 프로젝트 추가 (3단계)
①
프리셋 파일 작성
projects/acme.css 를 복사해 라이트·다크 색상 토큰을 채운다.
②
소비 앱에서 import
@import "@duolabs-deux/ui/projects/<이름>.css": 쓰는 앱만 가져간다(버전에 함께 잠김).
③
적용
<html data-theme="<이름>"> 으로 고정하거나, ProjectSelect 목록에 추가해 런타임 전환.
형태 토큰: --dx-radius-scale 은 rounded-xs~4xl 전체에 곱해지는 배율(0.7 각지게 · 1 기본 · 1.8 아주 부드럽게), --dx-font-sans 는 font-sans 서체 스택. 컴포넌트 코드는 무변경: 값만 갈아끼운다.