Overview
Start here to understand the Conscia design system, install it in an application, and find the right component or pattern.
Build consistent product experiences from shared decisions.
Use foundation tokens for visual language, primitives for accessible controls, and patterns for recurring product workflows. Applications keep ownership of their data and business behavior.
- Families
- 25
- Public exports
- 257
Get started
A Tailwind v4 application needs the package, one global stylesheet import, and the components it uses.
pnpm add @conscia-labs/design-system- 1Install and load styles
Import the Tailwind integration once in the application's global stylesheet.
- 2Set root preferences
Start with system appearance and comfortable density, then opt into denser modes deliberately.
- 3Choose the highest useful layer
Prefer an existing pattern when it already captures the workflow; compose primitives for new reusable needs.
How the system is organized
Each layer builds on the one before it. Start at the highest layer that matches the problem.
Ownership boundary
The design system stays reusable by owning presentation conventions without becoming an application framework.
Use the design system for
- Shared visual and interaction conventions
- Accessible controls and recurring product patterns
- Appearance, density, and semantic design tokens
Keep in the product application
- Routing, authentication, and permissions
- Data fetching, mutations, and validation
- Product-specific state and one-off workflows
Design system inventory
Every public component family links to a maintained catalog or realistic reference screen.