cobogo

Cobogó is a Brazilian visual grammar for sharing design relationships between products without erasing the identity of each one. The goal is to allow projects to reuse decisions that deserve to survive — hierarchy, state, rhythm, reading, focus, and action — while typography, color, proportion, and finish remain local when they carry the product's voice. Cobogó is not a theme and does not require different projects to look like they are from the same family. The stack uses Panda CSS as the design system engine and Astro as the reference host for static sites. Cobogó works as an opinionated Panda preset with tokens and recipes. Installation is done via npm from the GitHub repository, along with @pandacss/dev. Configuration involves creating a panda.config.ts file importing the Cobogó preset, defining CSS layers (reset, base, tokens, recipes, utilities), and using the exported recipes in Astro components. In Astro's SSG, Panda extracts styles during the build, without requiring a React application in the browser. The preset currently delivers tokens for color, typography, space, sizes, breakpoints, radii, and shadows, as well as recipes: button, card, badge, input, alert, article, table, and navLink. The repository itself serves as a demonstration: the src/pages/index.astro page uses the Cobogó preset to explain and show the visual grammar. The project's evolution principle is to grow when a real project finds a decision worth sharing or when a design hypothesis deserves to be tested, keeping the system small, predictable, and useful without turning local personality into a global standard.