このプロジェクトについて

Cobogóは、個々のアイデンティティを消し去ることなく、製品間でデザイン関係を共有するためのブラジル発の視覚的文法です。その目的は、階層、状態、リズム、可読性、フォーカス、アクションなど、継承させるべき決定をプロジェクト間で再利用可能にすることであり、一方でタイポグラフィ、色、比率、仕上げなどは、製品の個性を担うローカルな要素として維持することです。Cobogóはテーマではなく、異なるプロジェクトが同じファミリーに見えることを強制しません。 このスタックは、デザインシステムのエンジンとしてPanda CSSを、静的サイトのリファレンスホストとしてAstroを採用しています。Cobogóは、トークンとレシピを備えたオピニオン化されたPandaプリセットとして機能します。 インストールは、@pandacss/devと共にGitHubリポジトリから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óプリセットを使用してこの視覚的文法を説明し、提示しています。 プロジェクトの進化原則は、実際のプロジェクトで共有価値のある決定が見つかった場合や、デザインの仮説を検証する必要がある場合に拡張することです。これにより、ローカルな個性をグローバルな標準に変えることなく、システムを小さく、予測可能で、有用な状態に保ちます。