디자인 시스템

동일한 토큰 / 컴포넌트 / 가이드를 두 가지 표현 스타일로 작성해두었습니다. 어느 형식이 의사소통에 더 효과적인지 비교하면서 정식 포맷을 결정하기 위함.

---

두 스타일 비교

🎨 Style A — getdesign.md 풍 (시각 swatch 위주)

→ Style A 보기

특징:

• 인라인 컬러 점 + 가로 칩 row + 큰 swatch 카드
• 톤·분위기를 한눈에 잡기 좋음
• 마케팅 / 브랜드 가이드용 인상

🟡 Brand / Main          ████████ #ffde36
🟠 Brand / Orange        ██████   #ff8500
🩷 Brand / Pink          █████    #ff91c7

📊 Style B — KTDS 풍 (데이터 위주, 미니멀)

→ Style B 보기

특징:

• CSS 변수명 (--color-brand-main) 명시
• 컴포넌트마다 Variants / Sizes / Usage 명시
• 타이포 실제 렌더 예시 포함
• 개발자 / 핸드오프용 인상

Brand / Main      #ffde36    --color-brand-main
Brand / Orange    #ff8500    --color-brand-orange
Brand / Pink      #ff91c7    --color-brand-onboarding-pink

---

어느 쪽이 좋은가 — 결정 포인트

관점	Style A 강점	Style B 강점
이해도	시각적 직관 — 비전공자도 이해	정확성 — CSS 변수까지 매핑
유지보수	swatch 일일이 수정 부담	표 추가/제거 깔끔
개발자 협업	토큰명 표기 약함	--color-* 그대로 코드에 사용 가능
브랜드 인상	노랑 톤이 살아남	무미건조
모바일 가독성	가로 칩이 좁은 화면에서 줄바꿈	단순 표라 안정적

---

결정 후 작업

선호하는 스타일이 정해지면:

1. 한 쪽 파일 삭제 → 남은 파일을 index.md 로 복귀
2. 사이드바에서 비교 링크 제거
3. 정식 포맷으로 픽스

두 파일 다 동일한 Figma YumYum-v1 토큰 기반이라 내용은 100% 동일. 표현 차이만 봅니다.