Colors

Tiro의 컬러 시스템. Brown + Stone은 커스텀 스케일 (tailwind.config에 extend 등록). Feedback 팔레트(rose/amber/lime/blue)는 공식 팔레트 그대로 사용.

Tiro는 light mode only입니다. 유일한 다크 표면은 브랜드 히어로 (brown-800 솔리드 + 흰 텍스트).

Policy

• Feedback & tint 컬러: 공식 스케일 직접 사용 (bg-rose-50, bg-amber-100 등). Semantic으로 감싸지 않음
• Identity & surface 컬러: 최소한의 shadcn-style semantic tokens만 정의 (--primary, --foreground, --background, --border 등)
• Tiro 커스텀: brown + stone 스케일. 둘 다 tailwind.config.js extend.colors로 등록
• 금지: slate, zinc, gray, neutral 같은 쿨 그레이 스케일

Feedback Scale Mapping

단일 규칙: Feedback pill = bg-{scale}-100 text-{scale}-700. 예외 1개: destructive는 bg-rose-50 (더 옅게).

Notice / Nudge Banner

안내 배너 (TopBanner info/promo, 설치 nudge, 업그레이드 제안) 기본 배경은 bg-amber-100 + text-amber-700.

Warning과 동일한 raw 값을 공유하지만 의미는 다름 — "주목 유도, 부드러운 강조". 나중에 시각적으로 갈라질 필요 생기면 --notice-bg 토큰으로 승격.

Semantic Tokens (최소 set)

컴포넌트 구조 색상만 semantic CSS variable로 정의. Feedback/tint는 raw 직접 사용.

Surface & text

Brand (Tiro brown 기반)

미정의 shadcn 기본 토큰: --popover, --card (별도 토큰 불필요 — --background + --border로 충분). 다크 모드 토큰 전체도 정의하지 않음.

Text Hierarchy — 4단계

본문은 한 화면에서 4단계까지만 운영합니다. "더 흐리게 / 더 또렷하게" 가 필요할 때 새 톤을 만들지 말고 아래 표 안에서 선택합니다.

Rule of thumb (위→아래로 흐려진다):

• "이걸 보고 행동해야 한다" → stone-500 (Secondary)
• "그냥 거기 있다는 표시일 뿐" → stone-300 (Muted — meta 정보, hint 아이콘, placeholder)

본문(brown-800) 옆에 같이 놓일 때 "본문 vs 부가" 의 위계가 강하게 갈라지도록 한 단계만 운영합니다. stone-400 은 raw 토큰으로는 존재하지만 hierarchy 에서 별도 tier 로 운영하지 않음.

Accessibility 주의: stone-300 은 흰색 배경 위 contrast ~2.7:1 로 WCAG AA (4.5:1) 미달. 의식적으로 읽혀야 하는 텍스트 (예: 결제 폼 placeholder, 에러 메시지) 는 호출부에서 text-stone-400 또는 text-stone-500 로 한 단계 올려 사용. Meta hierarchy 의 stone-300 은 "스쳐 보는" 텍스트 한정.

Soft Chip Surface

작은 inline chip (참석자 칩, 폴더 칩, 메타 태그) 의 기본 배경은 --secondary (bg-stone-50). 한 단계 더 강조해야 할 chip 만 --muted (bg-stone-100).

• Chip 텍스트 / 아이콘: text-stone-500 기본 (Auxiliary 와 같은 톤). 강조 chip 만 text-stone-600 까지.
• Chip 의 hover 는 stone 한 단계 진하게 (stone-50 → stone-100).
• Chip 안의 trailing chevron / dismiss icon 은 항상 한 단계 더 흐리게 (text-stone-400) — 보조 hint.

Raw Palettes — Full Scales

디자인 시 각 스케일의 모든 tone을 활용할 수 있도록 전체 값을 명시합니다.

Tiro Custom — Tironian Brown

tailwind.config.js extend.colors.brown으로 등록:

colors: {
  brown: {
    30:  '#F8F2F0',
    50:  '#EBDAD4',
    100: '#D5BAB2',
    200: '#C6A296',
    300: '#9C6D5F',
    400: '#885F53',
    500: '#7A4B3D',
    600: '#674236',
    700: '#5C372B',
    800: '#3A2018',  // brand primary
    900: '#2B201D',
  }
}

Tiro Custom — Stone (뉴트럴)

tailwind.config.js extend.colors.stone으로 등록. stone-30이 가장 연한 tone.

Rose — Destructive

Amber — Warning + Notice

Lime — Success

Blue — Info

Speaker Colors (8-cycle)

SpeakerChip colorIndex에 따라 8종 순환:

Semantic token으로 감싸지 않음. 8명 초과 화자는 bg-muted fallback.

금지 스케일

slate, zinc, gray, neutral — 쿨 그레이, 모든 레이어에서 금지. 모든 뉴트럴은 stone.

Surface Modes

Palette Restraint

• Brand는 구두점, Stone이 문장. 화면이 "too brown"이면 Stone으로
• Brown 중간 톤(100~400) 남용 금지 — 필요할 때만
• 대부분의 surface는 --background, --background-alt, --muted만으로 해결

Do / Don't

• Do: Feedback은 bg-{rose|amber|lime|blue}-100 text-{}-700 단일 규칙 (destructive만 bg-rose-50)
• Do: Identity/surface는 semantic token (bg-primary, text-foreground) 사용
• Do: 안내/nudge 배너는 bg-amber-100 text-amber-700
• Do: brown, stone은 tailwind.config extend로 등록 후 bg-brown-800, bg-stone-30 직접 사용
• Do: 디자인 시 각 스케일의 다양한 tone(30, 50, 100, 400 등) 활용 — 위 표의 값 전체 사용 가능
• Don't: slate, zinc, gray, neutral 사용 금지
• Don't: 두 번째 브랜드 액센트 도입 금지 — brown-800 단일
• Don't: 그라디언트 사용 금지 — 솔리드 컬러만
• Don't: Feedback 컬러를 semantic으로 감싸는 과설계 금지 (rose/amber/lime/blue raw 그대로)