CogniSync Design System
A single place for foundations and UI components—so the product stays coherent from first sketch to production.
I put this system together while vibe-coding our platform from rough idea to something we could ship: tokens, patterns, and components in one loop instead of one-off screens. The goal was simple—make navigation, color, type, and elevation feel like the same product everywhere.
The whole pass landed in about six hours. That tight window forced decisions: document the essentials, reuse primitives, and bias toward consistency over novelty. What you see here is the reference layer the team can extend without reinventing basics each time.
Interactive pieces follow the same open-code idea as shadcn/ui—components live in the repo so you can adapt them to CogniSync, not fight a black-box library.
Start here
Jump into the core tokens most screens depend on.
- Colors
Full 50 to 950 scales for brand, neutral, semantic, and accent palettes with copyable hex tokens.
View → - Typography
Geist for display and documentation headings; Inter for UI body, labels, and supporting text.
View → - Elevation
Shadow tokens used on documentation surfaces so marketing and product stay visually aligned.
View →