Design Brand System

---
name: design-brand-system
description: |
  제공된 브랜드 자료와 화면 목적을 바탕으로 웹 시각 디자인 토큰과 컴포넌트 사양을 만듭니다.
  색상·서체·간격·레이아웃·접근성 검토가 필요할 때 사용하세요.
  Claude Cowork와 ChatGPT Work에서는 사용자 자료를 바로 입력으로 받고, MoAI 프로젝트에서는 기존 브랜드 파일을 함께 확인합니다.
user-invocable: false
version: "1.1.2"
---

# 브랜드 디자인 시스템

사용자의 브랜드 색·서체·로고 사용 규칙과 화면 목적에서 재사용 가능한 시각 규칙을 만든다. 입력이 없다면 브랜드를 창작해 확정하지 않고 필요한 선택지와 확인 질문을 제시한다.

## 입력 확인

1. 제공된 브랜드 가이드, 디자인 파일, 실제 화면, 카피와 대상 사용자를 확인한다. 접근할 수 없는 파일을 읽었다고 말하지 않는다.
2. MoAI 프로젝트에서 `.moai/project/brand/visual-identity.md`가 있으면 이를 브랜드 기준으로 사용하고 `.moai/config/sections/design.yaml`의 설정을 확인한다. 데스크톱 앱에 이 파일들이 없으면 사용자 제공 자료를 기준으로 작업한다.
3. 브랜드 자료끼리 충돌하면 해당 값과 출처를 나란히 보여주고 결정이 필요한 항목으로 남긴다. 한 자료를 임의로 우선시하지 않는다.
4. Figma 파일은 실제 접근 가능한 연결 또는 사용자가 제공한 내보내기 파일로 읽는다. URL만 있다는 이유로 토큰 추출 완료를 주장하지 않는다.

## 산출물

요청 범위에 맞게 다음 중 필요한 항목을 작성한다.

- **색상**: 브랜드 원색, 배경·표면, 텍스트, 상태색과 실제 사용 쌍
- **타이포그래피**: 사용 가능한 서체, 크기·굵기·행간과 언어별 폴백
- **간격과 형태**: 레이아웃 폭, 간격 척도, 반경·경계선·그림자
- **컴포넌트**: 버튼·입력·카드·내비게이션 등의 상태, 사용 맥락, 키보드 포커스와 반응형 동작
- **토큰**: 합의된 값만 JSON 또는 요청한 CSS 형식으로 표현하고 값의 출처를 붙임

히어로, 모바일 뷰포트, 그리드 칸 수, 프레임워크, 다크 모드, 성능 점수는 프로젝트 요구와 실제 검증 환경에 따라 정한다. 브랜드가 흰 배경이나 특정 색을 명시했다는 이유로 배제하지 않는다. 기존 디자인 시스템이 있으면 그 측정값과 명명법을 우선 확인한다.

## 접근성 검토

웹 콘텐츠라면 [W3C WCAG 2.2](https://www.w3.org/TR/WCAG22/)에서 적용할 성공 기준과 수준을 확인한다. 실제 전경·배경 조합의 명도 대비를 계산하고 작은 텍스트, 큰 텍스트, UI 경계·상태를 해당 기준에 맞춰 평가한다. 토큰만으로 키보드 동작, 스크린리더 출력, 전체 페이지 준수나 Lighthouse 점수를 보장하지 않는다. 구현된 화면이 있으면 해당 환경에서 별도로 검사하고 결과를 기록한다.

브랜드 색 조합이 필요한 기준을 충족하지 못하면 사용 쌍·계산값·필요 기준과 조정안을 제시한다. 새 색은 브랜드 승인 전까지 제안값으로 둔다. 애니메이션은 사용자 설정과 `prefers-reduced-motion`을 고려한다.

후속 구현은 실제 프로젝트의 프레임워크와 토큰 구조에 맞춘다. 마감 결과에는 확인한 값, 제안값, 미검증 동작을 구분한다.