Colors
색은 세 층으로 쌓여 있습니다. 값은 프리미티브에, 용도는 시맨틱에, 세트는 컴포넌트에 있습니다.
컴포넌트가 참조하는 층은 시맨틱 하나뿐입니다. 아래 표의 값은 전부 tokens/colors.yaml에서 읽습니다. 이 문서에 색을 옮겨 적지 않습니다.
정본(SoT)
색 값의 정본은 이 저장소의 tokens/*.yaml입니다. 수치는 여기에서 한 번만 정의합니다. 온톨로지는 값을 복제하지 않고 이 토큰을 참조하며, Figma Variables는 같은 이름과 Light/Dark 모드로 이 값을 미러링합니다. 값이 갈리면 이 저장소가 이깁니다. 온톨로지·Figma·제품 반영은 각각 별도로 검증합니다.
웹·데스크톱 보고서의 별도 합의는 tokens/web-desktop.yaml에 저장합니다. 전역과 값이 다른 표면·노트·컨트롤 역할은 web-desktop/*로 분리하며, 모바일이나 전역 토큰을 암묵적으로 변경하지 않습니다. node scripts/gen-web-desktop-tokens.mjs로 CSS를 생성하고 --check로 참조와 생성 결과를 확인합니다.
대화에서 확정한 값은 출처와 두 모드 값을 디자인 저장소에 먼저 기록하고 검증한 뒤 커밋합니다. 온톨로지는 그 커밋과 경로만 참조합니다. Figma는 기존 변수 ID를 보존해 갱신합니다. 원본 수정, 라이브러리 게시, 소비 파일 업데이트, 제품 배포는 각각 완료 여부를 확인합니다. 스킬 실행 없이 채팅만으로 자동 게시되지는 않습니다.
어느 층을 쓰나
| 층 | 이름 예 | 쓰는 곳 |
|---|---|---|
| Primitives | brown/800 · alpha-brand/40 | 시맨틱 선언 안에서만 |
| Semantic | fg-primary · bg-error-subtle | 마크업. 여기만 씁니다 |
| Component | buttons/primary/bg-base | Figma 작업 편의용 묶음 |
Tailwind 클래스는 text-tds-{토큰} · bg-tds-{토큰} · border-tds-{토큰} 형태입니다.
<button className="bg-tds-bg-primary text-tds-fg-on-inverse hover:bg-tds-bg-primary-hover">
저장
</button>프리미티브를 마크업에서 직접 쓰지 않습니다. 모드 대응이 끊기고, 램프가 움직일 때 조용히 어긋납니다. 필요한 이름이 없으면 비슷한 토큰을 끼우지 말고 시맨틱에 선언을 제안하세요.
Component 티어는 Figma에만 있습니다. 코드에는 palette와 semantic 두 층만 선언되어 있어서, 컴포넌트 토큰을 코드에서 찾아도 없습니다.
라이트와 다크
시맨틱과 컴포넌트는 두 모드를 가집니다. 프리미티브는 값 하나만 갖습니다.
모드 분기는 시맨틱 한 층에서만 일어납니다. 컴포넌트 토큰은 두 모드가 같은 시맨틱 이름을 가리키고, 그 이름이 모드별로 다른 프리미티브를 물고 있습니다.
아래 표의 L / D 칸에서 왼쪽이 라이트, 오른쪽이 다크입니다.
글자 · fg
| Token | L / D | 참조 | 역할 |
|---|---|---|---|
| fg-base | stone.800 / stone.50 | ||
| fg-logo | brown.800 / base.white | 단색 Tiro 로고 잉크. 일반 앱 표면 전용; 고정 어두운/밝은 면은 on-dark/on-light 사용 | |
| fg-subtle | stone.500 / alphaWhite.64 | 다크 전역 매핑을 White 64% 로 낮췄습니다. 알파는 얹히는 면을 따라가서 base·raised 어디서나 관계가 일정합니다. 라이트 stone.500 은 유지합니다 | |
| fg-muted | stone.400 / alphaWhite.56 | subtle 과 같은 이유로 알파. base 위 사다리가 base 18.32 · subtle 10.32 · muted 6.50 · disabled 2.62 로 격차 8.00 / 3.82 / 3.88 이 되어 네 단이 고르게 벌어집니다. 요청은 70·50 이었는데 기존 단(72·56)으로 맞추면 프리미티브 신설 없이 사다리가 더 고릅니다. 다크 6.50 | |
| fg-on-disabled | stone.800 / stone.200 | 비활성 채운 면 위 글자. fg-disabled 를 이 자리에 쓰면 안 됩니다. 라이트에서 그 값이 bg-disabled-emphasis 와 같은 stone.300 이라 대비 1.00 으로 사라집니다. 다크는 stone.50 이면 9.42 로 활성처럼 보여 한 단 낮춘 200 입니다. 라이트 6.93 · 다크 6.90 | |
| fg-disabled | stone.300 / stone.500 | 비활성 글자. 다크를 한 단 밝혔습니다. stone.600 은 bg-raised 위 1.70 으로 라이트(2.52)보다 흐려서 비대칭이었고, 비활성이 아예 안 보이는 자리가 있었습니다. stone.500 은 2.29 로 라이트와 맞습니다. fg-muted 다크(6.93)와는 확실히 떨어져 있어 두 단이 안 겹칩니다. 소비처 83곳(모바일 49 · 웹 34)이 전부 다크에서 한 단 또렷해집니다 | |
| fg-on-inverse | stone.50 / stone.800 | 반전 배경 위. 모드에 따라 뒤집힙니다 | |
| fg-on-primary | brown.30 / base.white | 브랜드 면 위 글자. bg-primary 계열과 짝이며 면이 뒤집히므로 글자도 같이 뒤집힙니다. on-dark-* 는 모드와 무관하게 어두운 면 위라 값이 두 모드 같습니다. 다크는 어두워진 primary 면(brown.700)에 맞춰 White 로 반전했습니다 | |
| fg-on-primary-subtle | brown.100 / alphaWhite.70 | 같은 면 위 두 번째 단. on-neutral 3단과 같은 구조이며, 중립 면은 고정이라 값이 한 벌이면 되지만 브랜드 면은 뒤집히므로 모드마다 램프의 반대 끝에서 옵니다. 다크는 어두워진 primary 면(brown.700)에 맞춰 White 70% 로 반전했습니다. 라이트 대비는 종전대로 12.92 / 7.84 / 6.14 입니다 | |
| fg-on-emphasis | stone.950 / stone.950 | 밝은 emphasis 면 위 어두운 글자. bg-light 처럼 고정된 밝은 면이 짝입니다. 오류 면은 아래 on-error-emphasis 를 씁니다 | |
| fg-on-dark | base.white / base.white | 항상 어두운 강조 면 위의 기준 글자. bg-neutral과 bg-error-emphasis처럼 흰 글자가 필요한 고정 면을 함께 받습니다 | |
| fg-on-dark-subtle | brown.50 / brown.50 | 항상 어두운 면 위 첫 단. 모드와 무관하게 어두운 자리 전부를 받습니다. bg-brand-dark(푸터 · 온보딩 히어로)와 bg-neutral 계열(툴바 · 토스트)이 짝입니다. 옛 on-neutral 3단을 여기로 합쳤습니다. brand-dark 위 10.58 · bg-neutral 위 11.2 · bg-neutral-hover 위 7.6 으로 중립 면에서도 전부 AA 를 넘습니다 | |
| fg-on-dark-muted | brown.100 / brown.100 | 같은 면 위 두 번째 단. 보조 라벨 · 메타 · 선택 안 된 칩. brand-dark 위 7.84 · bg-neutral 위 8.3 | |
| fg-on-light | stone.800 / stone.800 | 면이 항상 밝은 자리의 글자. bg-light 의 짝입니다. 항상 어두운 카드 위에 얹는 밝은 칩처럼 면이 안 뒤집히는 자리에 씁니다. brown-30 위 15.79 로 두 모드 같습니다 | |
| fg-on-neutral-subtle | stone.200 / stone.200 | 같은 면 위 두 번째 단. 선택 안 된 칩 · 보조 라벨. bg-neutral 위 10.18 | |
| fg-on-neutral-muted | stone.300 / stone.300 | 같은 면 위 가장 약한 단. 섹션 라벨 · 메타. bg-neutral 위 6.01 | |
| fg-primary | brown.800 / brown.30 | 강조 · 선택 · 본문 · 메인 타이틀. 다크를 두 단 올렸습니다. brown.100 은 10.94 로 본문 fg-base(18.32)보다 어두워서 브라운을 쓰는 제목이 그 아래 본문보다 약해 보였습니다. 위계가 뒤집혀 있었습니다. brown.30 은 18.04 로 fg-base 와 사실상 같은 세기입니다. 소비처 842곳(웹 522 · 데스크탑 320)이 호출부 수정 없이 같이 올라갑니다. 다크 18.04 | |
| fg-primary-hover | brown.900 / base.white | hover 는 두 모드 모두 대비가 올라가는 방향. primary 가 brown.30 으로 올라가 브라운 램프 위가 없어 다크만 순백으로 나갑니다. 브랜드 램프를 벗어나는 유일한 자리입니다. 소비처 14곳 | |
| fg-primary-subtle | brown.700 / brown.50 | 서브타이틀 · 아이콘 · 소형 라벨. primary 와 같이 두 단 올립니다. 다크 14.76 | |
| fg-primary-muted | brown.400 / brown.100 | 본문 금지. 비활성 성격. 램프 재분배로 라이트만 400 으로 내렸습니다. 다크는 계열 전체가 두 단 올라가 100 입니다. 다크 10.94 | |
| fg-highlight | lagoon.800 / lagoon.300 | 라이트를 700 에서 800 으로 올렸습니다. bg-highlight-subtle 이 100 단으로 오른 뒤 700 은 대비 4.47 로 AA 미달이었습니다. 800 은 6.13 입니다. 소비처 17곳이 같이 한 단 어두워집니다 | |
| fg-error | rose.700 / rose.300 | ||
| fg-error-emphasis | rose.600 / rose.400 | ||
| fg-warning | amber.700 / amber.300 | ||
| fg-warning-emphasis | amber.500 / amber.400 | ||
| fg-success | lime.700 / lime.300 | ||
| fg-success-emphasis | lime.500 / lime.400 | ||
| fg-on-success-strong | lime.300 / lime.300 | 안 뒤집히는 진한 초록 면(bg-success-strong) 위 글자. 두 모드 같은 값입니다. 짝 대비 6.69 로 AA 를 넘습니다 | |
| fg-info | blue.700 / blue.300 | ||
| fg-info-emphasis | blue.500 / blue.400 | ||
| fg-recording | rose.700 / rose.300 | 녹음 · 재생 상태 글자. 에러가 아닙니다. 웹·데스크탑도 써야 합니다. 지금 웹은 fg-error-emphasis 로 칠하고 있어 에러와 구분되지 않습니다 | |
| fg-recording-accent | rose.500 / rose.400 | 녹음 아이콘 · 점 · 막대. 그래픽이라 3:1 기준. 웹 미이관 |
on-으로 시작하는 이름은 그 면 위에 올라가는 글자입니다. fg-on-inverse는 모드에 따라 뒤집히고, fg-on-dark-*는 항상 어두운 면 위라 뒤집히지 않습니다. 두 개를 바꿔 쓰면 다크에서 글자가 면에 묻힙니다.
면 · bg
| Token | L / D | 참조 | 역할 |
|---|---|---|---|
| bg-base | stone.30 / brown.950 | 다크 캔버스를 brown.950(#191614)로 바꿉니다. 기존 brown 프리미티브 램프는 그대로이고 이 950 단은 저채도 토프-브라운 한 칸입니다. 라이트 stone.30 은 유지합니다 | |
| bg-base-warm | stone.cream / brown.900 | 따뜻한 캔버스. 마케팅 · 온보딩처럼 base 보다 한 단 따뜻해야 하는 면 | |
| bg-subtle | stone.50 / alphaWhite.4 | 다크 subtle 을 흰 알파 4%(#FFFFFF0A)로 바꿉니다. base 위에 얹히는 투명 면이라 캔버스 위에서 관계가 일정합니다. 라이트 stone.50 은 유지합니다 | |
| bg-raised | base.white / stone.800 | 카드 · 필 표면. 전체 면 단계와 실제 제품을 재검토해 stone.800을 유지합니다 | |
| bg-raised-translucent | alphaWhite.95 / alphaStone.95 | 떠 있는 칩. backdrop-blur 와 짝이라 반투명이 필요합니다. tds 색은 <alpha-value> 가 없어 오파시티 수식어가 죽은 클래스가 되므로 알파를 값에 박습니다 | |
| bg-muted | stone.100 / stone.700 | ||
| bg-neutral | stone.700 / stone.700 | 중립 버튼. bg-primary 의 회색 짝입니다. 두 모드 모두 같습니다 | |
| bg-neutral-hover | stone.600 / stone.600 | ||
| bg-neutral-pressed | stone.800 / stone.500 | 중립 면의 pressed. dark bg-raised=stone.800 과 같은 값이면 누르는 순간 면이 사라져 stone.500 으로 올렸습니다. 현재 대비는 base 1.15 · hover 1.70 · pressed 2.29 입니다. 라이트는 그대로 stone.800 입니다 | |
| bg-neutral-strong | stone.900 / stone.900 | 항상 어두운 중립 면 중 가장 진한 단. 두 모드 모두 같습니다 | |
| bg-neutral-flat | stone.300 / stone.300 | 진행 중 · 대기 상태의 채운 버튼. neutral 계열의 유일한 중간 밝기 단입니다. 두 모드 모두 같습니다. 다크에서 뒤집으면 어두운 패널 위 대비가 1.70 이 되어 버튼 자리가 사라집니다. 위에 얹는 글자와 스피너는 fg-on-emphasis 를 씁니다. 그 값도 두 모드가 같아 이 면 위에서 항상 7.92 입니다 | |
| bg-neutral-overlay | alphaWhite.8 / alphaWhite.8 | 항상 어두운 면 위에 가만히 얹히는 면. 칩 · 키캡처럼 상태가 아닌 자리. 정지 단이 없으면 그런 자리가 hover 단을 빌려 쓰게 되고 이름이 상태를 거짓으로 말합니다 | |
| bg-neutral-overlay-hover | alphaWhite.10 / alphaWhite.10 | 항상 어두운 면 위 hover. 흰 알파라 아래 면이 비칩니다 | |
| bg-neutral-overlay-pressed | alphaWhite.16 / alphaWhite.16 | 같은 면 위 pressed | |
| bg-primary-overlay | alphaWhite.8 / alphaBlack.8 | 브랜드 면 위에 얹히는 기본 면. 다크 기본값은 기존 alphaBlack.8 을 유지하고, hover · pressed 는 어두운 primary 면을 밝히는 alphaWhite 계열을 씁니다. 알파를 쓰는 이유는 이 사다리가 면 자체의 brown 사다리(primary-hover · pressed)와 충돌하지 않게 하기 위해서입니다 | |
| bg-primary-overlay-hover | alphaWhite.10 / alphaWhite.8 | 브랜드 면 위 hover. 다크는 어두워진 primary 면(brown.700)에 맞춰 White 계열로 반전 | |
| bg-primary-overlay-pressed | alphaWhite.16 / alphaWhite.12 | 브랜드 면 위 pressed. 다크는 어두워진 primary 면(brown.700)에 맞춰 White 계열로 반전 | |
| bg-light | brown.30 / brown.30 | brand-dark 나 뒤집히지 않는 어두운 면 위에 얹히는 밝은 면. 배지 · 진행바 트랙 · 칩처럼 어두운 판 위에서 홈처럼 파이는 자리입니다. 두 모드 모두 같은 값입니다. 위 on-primary alpha 계열과 달리 불투명해서 아래 브랜드색이 배어 나오지 않습니다. 짝이 되는 글자는 fg-on-emphasis 이고 그 role 이 이미 이 토큰을 가리키고 있었는데 선언이 없었습니다. 아이콘 색으로는 쓰지 마세요. 면 토큰이라 뒤집히는 면 위에 얹으면 한 모드에서만 무너집니다. 실제로 접힌 온보딩 알약 아이콘이 이 값이었고 다크에서 1.65 였습니다 | |
| bg-dark-overlay | alphaWhite.16 / alphaWhite.16 | 항상 어두운 면 위의 조용한 채운 단. bg-light 가 1단이고 이게 2단입니다. bg-brand-dark 위 3.13 | |
| bg-disabled | alphaBlack.4 / alphaWhite.4 | ||
| bg-disabled-emphasis | stone.300 / stone.600 | 채운 버튼의 비활성 면. bg-disabled 는 반투명 덮개라 아래 면이 비쳐야 하는 자리용이고 채운 버튼을 회색으로 만드는 용도가 아닙니다. hover·선택용 bg-primary-muted 를 이 자리에 쓰면 한 면이 두 뜻을 갖게 됩니다. 그 위 글자는 fg-base 로, 면이 모드에 따라 뒤집히므로 글자도 같이 뒤집힙니다 | |
| bg-backdrop | alphaBlack.40 / alphaBlack.64 | 모달 뒤 스크림. 이 면이 분리를 담당하므로 모달에 그림자를 얹지 않습니다 | |
| bg-primary | brown.800 / brown.700 | ||
| bg-primary-muted | alphaBrand.16 / alphaBrand.6 | 브랜드 틴트 면. hover · 선택 칩. 다크는 칩 가시성을 해치지 않도록 6%로 완화합니다 | |
| bg-primary-hover | brown.700 / brown.600 | ||
| bg-primary-pressed | brown.900 / brown.800 | ||
| bg-primary-subtle | alphaBrand.40 / alphaBrand.24 | e08f1dde0 에서 불투명 brown.700 → 반투명 alphaBrand 로 바뀌었습니다. 이제 primary-muted(16) 와 같은 성격의 한 단 진한 틴트입니다 | |
| bg-primary-emphasis | alphaBrand.56 / alphaBrand.40 | Figma 전용. buttons/accent/bg-pressed 가 참조합니다. 코드에는 없고 accent 버튼의 pressed 면을 Component 티어에서 직접 정의합니다 | |
| bg-brand-dark | brown.800 / brown.800 | 모드와 무관하게 어두운 브랜드 면. 푸터 · 온보딩 히어로 · 공유 노트 헤더처럼 어두운 갈색 판이 정체성인 자리. bg-primary 는 버튼 기준으로 뒤집히므로(다크 brown.100) 그 자리에 쓰면 면이 밝아져 fg-on-dark-* 가 사라집니다. 실제로 푸터에서 40곳이 대비 1.00~1.80 이 됐습니다. 전경은 fg-on-dark-* 3단, 테두리는 bd-on-neutral 과 짝입니다. 뒤집는 것이 기본이고 이 토큰이 예외라 이름에 dark 를 달았습니다 | |
| bg-highlight | lagoon.200 / lagoon.900 | ||
| bg-highlight-subtle | lagoon.100 / tint.lagoon-16 | ||
| bg-highlight-emphasis | lagoon.500 / lagoon.400 | ||
| bg-error-subtle | rose.100 / tint.rose-10 | ||
| bg-error-emphasis | rose.600 / rose.600 | 다크도 600. 흰 글자 대비가 rose-500 에서 3.67 로 미달이었습니다 | |
| bg-error-emphasis-hover | rose.700 / rose.700 | 파괴적 동작 버튼 hover. 코드가 hover 를 평상시와 같은 값으로 두어 삭제 버튼이 무반응이었습니다. 흰 글자 대비 4.70 에서 6.29 로 올라갑니다 | |
| bg-warning-subtle | amber.100 / tint.amber-10 | ||
| bg-warning-emphasis | amber.500 / amber.400 | ||
| bg-success-subtle | lime.100 / tint.lime-8 | ||
| bg-success-emphasis | lime.500 / lime.400 | ||
| bg-success-strong | lime.900 / lime.900 | 안 뒤집히는 진한 초록 면. 짝은 fg-on-success-strong 이고 둘 다 두 모드 같은 값입니다. brand-dark 와 fg-on-dark 짝을 success 계열에 옮긴 구조입니다 | |
| bg-info-subtle | blue.100 / tint.blue-12 | ||
| bg-info-emphasis | blue.500 / blue.400 | ||
| bg-recording | rose.50 / rose.950 | 녹음 배지 배경 · 재생 버튼. 웹 미이관 | |
| bg-selected | alphaBrand.16 / alphaBrand.24 | 선택된 행 · 항목의 면. 웹 미이관 | |
| bg-recording-emphasis | rose.600 / rose.600 | 채운 녹음 배지. 웹 미이관 |
다크 bg-base는 저채도 토프 브라운인 brown-950(#191614)이고, 다크 bg-subtle은 그 위에 얹히는 흰 알파 4%(alpha-white-4, #FFFFFF0A)입니다. 라이트 값과 bg-raised는 그대로입니다. 기존 brown 프리미티브 램프는 바뀌지 않았습니다. 최종 매핑과 소비처 규칙은 시스템 변경값 최종본에 있습니다.
노트 제목과 헤딩, 본문 강조는 전역 fg-base(라이트 stone/800 · 다크 stone/50)를 씁니다. 별도 note heading 토큰은 두지 않습니다.
테두리 · bd
| Token | L / D | 참조 | 역할 |
|---|---|---|---|
| bd-muted | alphaBlack.4 / alphaWhite.2 | 중립 저강조 경계. 패널·컨테이너처럼 면을 아주 약하게 가르는 자리. bd-base·bd-subtle 보다 더 옅은 단입니다. 다크 alphaWhite.2 는 base(6)·subtle(8) 아래이고, 라이트 alphaBlack.4 는 캔버스 위에서 거의 티 나지 않는 틴트라 두 모드 모두 가장 약한 중립 경계가 됩니다. 비활성 상태가 아닙니다. 그 자리는 bd-disabled 를 씁니다. 포커스·상호작용 경계도 아닙니다. 그 자리는 bd-focus·bd-control 을 씁니다. 알파라 얹히는 면을 따라가므로 base·raised 어디서나 관계가 일정합니다 | |
| bd-base | stone.100 / alphaWhite.6 | ||
| bd-subtle | stone.200 / alphaWhite.8 | ||
| bd-strong | stone.300 / alphaWhite.20 | 다크 전역 매핑을 White 20% 로 올렸습니다. 일반 파형을 포함한 strong 경계가 같은 값을 따르며 라이트 stone.300 은 유지합니다 | |
| bd-control | stone.400 / stone.400 | 폼 컨트롤 테두리. 체크박스 · 라디오 · 토글처럼 선 자체가 컨트롤의 윤곽인 자리. 두 모드 같습니다 | |
| bd-focus | brown.800 / brown.200 | 포커스 링 안쪽 2px. 불투명이라 대비를 담당합니다 | |
| bd-focus-ring | alphaBrandStrong.40 / alphaBrand.40 | 포커스 링 바깥 2px. 시맨틱에 알파를 박아 두면 램프가 움직일 때 조용히 어긋나서 프리미티브로 올렸습니다 | |
| bd-focus-ring-inner | alphaBrandStrong.80 / alphaBrand.80 | 포커스 링 안쪽 2px. 보더 1px 과 겹쳐 3px 이 통으로 진해지던 것을 80% 로 낮췄습니다. bd-focus 는 마크업 40곳이 보더로 쓰고 있어 직접 못 내립니다 | |
| bd-disabled | alphaBlack.4 / alphaWhite.4 | ||
| bd-primary-strong | brown.800 / brown.100 | 브랜드 테두리 중 진한 단. bd-primary 를 옅게 내린 뒤 선이 보여야 하는 자리를 위해 남긴 단입니다 | |
| bd-primary | brown.100 / brown.200 | 테두리는 면의 경계입니다. 라이트 brown.800 은 흰 면 대비 14.3 으로 다른 계열(1.98~4.70)에서 혼자 튀어 한참 옅게 내렸습니다. 다크는 계열 전체가 고르게 세서 그대로 둡니다 | |
| bd-primary-muted | brown.50 / alphaBrand.24 | ||
| bd-highlight | lagoon.300 / tint.lagoon-40 | ||
| bd-error | rose.600 / rose.400 | ||
| bd-error-muted | rose.200 / tint.rose-24 | ||
| bd-recording | rose.600 / rose.400 | 녹음 버튼 테두리. 웹·모바일 모두 미이관 | |
| bd-warning | amber.500 / amber.400 | ||
| bd-warning-muted | amber.200 / tint.amber-16 | ||
| bd-success | lime.500 / lime.400 | ||
| bd-success-muted | lime.200 / tint.lime-16 | ||
| bd-info | blue.500 / blue.400 | ||
| bd-info-muted | blue.200 / tint.blue-24 | ||
| bd-neutral | stone.700 / stone.400 | 항상 어두운 중립 면의 테두리. bg-neutral 계열과 짝입니다. 다크만 고쳤습니다 | |
| bd-on-primary | alphaWhite.24 / alphaWhite.20 | 브랜드 면 위에 얹히는 구분선. 다크는 어두워진 primary 면(brown.700)에 맞춰 White 20% 로 반전했습니다. 라이트는 종전 alphaWhite.24 를 유지합니다 | |
| bd-on-dark | alphaWhite.24 / alphaWhite.24 | 항상 어두운 면 위의 테두리. 채운 단 아래, 글자 링크 위의 3단입니다. bg-brandDark 위 4.20 |
bd-muted는 중립 저강조 경계입니다(라이트 alpha-black-4 · 다크 alpha-white-2). 패널·컨테이너처럼 면을 아주 약하게 가르는 자리에 씁니다. bd-base·bd-subtle보다 더 옅은 단이라 다크에서 base(흰 알파 6%)·subtle(8%) 아래이고, 라이트는 캔버스 위에서 거의 티 나지 않는 틴트입니다. 마크업에서는 border-tds-bd-muted로, 변수로는 --tds-color-bd-muted로 참조합니다. 비활성 상태에는 bd-disabled, 포커스·컨트롤 경계에는 bd-focus·bd-control을 씁니다. bd-muted를 그 자리에 쓰지 않습니다.
차트 · chart
| Token | L / D | 참조 | 역할 |
|---|---|---|---|
| chart-primary-base | stone.600 / stone.300 | 주 계열 첫 단 | |
| chart-primary-subtle | stone.400 / stone.400 | 두 번째 단 | |
| chart-primary-muted | stone.300 / stone.500 | 가장 약한 단. 재생 안 된 구간 · 비활성 막대 | |
| chart-highlight | lagoon.600 / lagoon.300 | 강조 한 계열. 현재 재생 위치 · 선택 구간 |
본문 색과 규칙이 다릅니다. 데이터 계열 구분이 목적이라 대비 기준도 따로 봅니다.
상태색
상태색도 시맨틱으로 감쌉니다. 면은 bg-{상태}-subtle, 글자는 fg-{상태}입니다. 강조가 필요한 자리만 -emphasis로 올립니다.
Dark의 상태 subtle은 bg-raised보다 한 단 밝은 stone/700 기판에 상태색 500을 섞은 불투명 tint입니다. 카드·팝오버 안에서 상태 면이 검은 구멍처럼 꺼지지 않으면서 상태 글자 대비 7.2:1 이상을 유지합니다.
빨강 면 위 글자만 fg-on-error-emphasis로 따로 떼어냈습니다. 다른 상태 면과 달리 어두운 글자가 대비 기준을 넘지 못했습니다.
프리미티브 램프
브랜드 램프는 brown 하나이고 서브 키는 lagoon입니다. 임의의 세 번째 브랜드 액센트는 두지 않습니다.
Tironian Brown
tailwind.config.js extend.colors.brown으로 등록합니다.
값은 아래 표가 tokens/colors.yaml에서 직접 읽어 그립니다. 이 문서에 램프를 옮겨 적지 않습니다. 2026-08-16 재분배 때 옮겨 적은 값이 낡아서 같은 페이지 안에서 두 벌이 어긋난 적이 있습니다.
Tironian Brown
#F6F3EF
#E3DDD7
#CAC0B6
#B3A79B
#9B8C7E
#827061
#6D5747
#5D4536
#523729
#3D261C
#221713
#191614
Lagoon
서브 키 컬러입니다. lagoon-500이 액센트 단이고, 그 위나 옆 글자는 lagoon-700입니다.
Lagoon (서브 키 컬러)
#ECFDFF
#CEF7FD
#A3EEF9
#67E0F2
#1FCAE8
#00B9D9
#0496B4
#0A7890
#116175
#135063
#073544
Stone
모든 뉴트럴은 stone입니다. stone-30이 가장 옅고, stone-cream은 마케팅 면 전용입니다.
Stone (Neutral)
#FDFDFC
#FAFAF9
#F5F5F4
#E7E5E4
#D6D3D1
#A8A29E
#78716C
#57534E
#44403C
#292524
#1C1917
#12100F
#0A0807
#FFFEF7
Rose · Amber · Lime · Blue
상태색 램프입니다. 마크업에서는 위의 시맨틱을 쓰고, 아래 값은 시맨틱 선언을 읽을 때 참고합니다.
Rose — Destructive
#FFF1F2
#FFE4E6
#FECDD3
#FDA4AF
#FB7185
#F43F5E
#E11D48
#BE123C
#9F1239
#881337
#4C0519
Amber — Warning + Notice
#FFFBEB
#FEF3C7
#FDE68A
#FCD34D
#FBBF24
#F59E0B
#D97706
#B45309
#92400E
#78350F
#451A03
Lime — Success
#F7FEE7
#ECFCCB
#D9F99D
#BEF264
#A3E635
#84CC16
#65A30D
#4D7C0F
#3F6212
#365314
#1A2E05
Blue — Info
#EFF6FF
#DBEAFE
#BFDBFE
#93C5FD
#60A5FA
#3B82F6
#2563EB
#1D4ED8
#1E40AF
#1E3A8A
#172554
화자 색
발화자 구분은 여덟 계열을 순환합니다. Figma Component 티어에 speakers/{계열}/dot과 speakers/{계열}/fg로 정의되어 있습니다.
Speaker Colors — 8-cycle
#ECFCCB
#DBEAFE
#FFE4E6
#FEF3C7
#F3E8FF
#CFFAFE
#FCE7F3
#FEF9C3
여덟이 서로 구별되는 것이 이 순환의 목적입니다. 계열을 바꿀 때는 이미 쓰는 계열과 겹치지 않는지 먼저 봅니다.
금지
slate · zinc · gray · neutral을 쓰지 않습니다. 쿨 그레이는 brown과 나란히 놓으면 탁해 보입니다. 모든 뉴트럴은 stone입니다.
그라디언트를 쓰지 않습니다. 솔리드만 씁니다.
상태색을 원시 클래스로 직접 쓰지 않습니다. bg-rose-100이 아니라 bg-tds-bg-error-subtle입니다.