cobogo

Cobogó는 각 제품의 정체성을 지우지 않으면서 제품 간의 디자인 관계를 공유하기 위한 브라질의 비주얼 그래머입니다. 그 목적은 계층 구조, 상태, 리듬, 가독성, 포커스 및 액션과 같이 유지될 가치가 있는 결정들을 프로젝트가 재사용할 수 있게 하는 동시에, 타이포그래피, 색상, 비율 및 마감 처리가 제품의 목소리를 담고 있을 때는 로컬 상태로 유지하는 것입니다. Cobogó는 테마가 아니며, 서로 다른 프로젝트가 반드시 같은 제품군처럼 보여야 한다고 요구하지 않습니다. 이 스택은 디자인 시스템의 엔진으로 Panda CSS를, 정적 사이트의 참조 호스트로 Astro를 사용합니다. Cobogó는 토큰과 레시피를 갖춘 opinionated Panda 프리셋으로 작동합니다. 설치는 GitHub 저장소에서 @pandacss/dev와 함께 npm을 통해 이루어집니다. 설정 과정은 Cobogó 프리셋을 임포트하는 panda.config.ts 파일을 생성하고, CSS 레이어(reset, base, tokens, recipes, utilities)를 정의하며, Astro 컴포넌트에서 내보낸 레시피를 사용하는 방식으로 진행됩니다. Astro의 SSG에서 Panda는 빌드 시 스타일을 추출하므로 브라우저에서 React 애플리케이션을 요구하지 않습니다. 현재 이 프리셋은 색상, 타이포그래피, 간격, 크기, 브레이크포인트, radii 및 그림자 토큰과 더불어 button, card, badge, input, alert, article, table, navLink 레시피를 제공합니다. 저장소 자체가 데모 역할을 하며, src/pages/index.astro 페이지는 Cobogó 프리셋을 사용하여 비주얼 그래머를 설명하고 보여줍니다. 프로젝트의 진화 원칙은 실제 프로젝트에서 공유할 가치가 있는 결정을 발견하거나 디자인 가설을 테스트해야 할 때 성장하는 것입니다. 이를 통해 로컬의 개성을 글로벌 표준으로 바꾸지 않으면서 시스템을 작고 예측 가능하며 유용하게 유지합니다.