Documentation
Developer documentation
The CoGoSphere website now uses a layered design system built from tokens, components, illustrations, and content patterns.
This guide helps contributors create consistent pages and extend the platform without breaking the visual language.
Tokens
Use the shared CSS variables from the token layer for spacing, typography, color, and motion. Avoid hard-coded values in new UI work.
If a visual value appears more than once, prefer a token over a literal value.
Components
Prefer the existing shared components for cards, sections, panels, articles, quotes, and metadata before introducing ad-hoc markup.
New components should expose a small, predictable API and remain theme-aware through the existing token variables.
Pages
Start with a layout container, add a section wrapper, and compose the page from predefined primitives such as Grid, Card, Article, and FeatureBlock.
| Field | Value |
|---|---|
| Layout | BaseLayout + Container + Section |
| Structure | Hero, content, supporting blocks, footer |
| Visual style | Design tokens and shared components |
Quality
Review new work against the system vocabulary before shipping: spacing, tone, headings, color use, and component reuse.