Introduction
Cobalt is Prolibu’s official design system. The invisible structure that connects every product — Sales, Operations, Support — under a single visual and technical language.
Standard Web Components built with Stencil. They work identically in Vue, React, Svelte or plain HTML. One implementation. Many consumers.
Why Cobalt?
Section titled “Why Cobalt?”Cobalt is element #27 on the periodic table. The mineral responsible for the deepest blue found in nature.
For centuries it gave color to Chinese porcelain, the stained glass of Gothic cathedrals, and Vermeer’s paintings. A blue that doesn’t fade — it endures.
Today, cobalt is essential in the technology that powers the world: lithium-ion batteries, jet engine alloys, heat-resistant superalloys. It’s the element inside the things that work.
That’s why we chose the name. Cobalt is what lies beneath: invisible, stable, essential.
Cobalt is Prolibu
Section titled “Cobalt is Prolibu”The metaphor isn’t decorative — it’s operational:
| Cobalt (mineral) | Prolibu (platform) |
|---|---|
| Extracted from the deep | Connects to the deepest layer of operations |
| Invisible structure | The infrastructure connecting Sales + Ops + Support |
| Doesn’t oxidize, doesn’t fade | Stable platform, predictable pricing, no surprises |
| Essential for batteries | Essential for the company to run |
| One element → many compounds | One platform → many modules |
One element. Four brand colors.
Section titled “One element. Four brand colors.”Cobalt produces Prolibu’s four brand colors based on its chemical compound:
| Color | Compound | Hex | Use |
|---|---|---|---|
| Blue | CoAl₂O₄ | #2563EB | Primary actions, links, brand |
| Green | CoCO₃ | #02A270 | Success, active states |
| Pink | Co(OH)₂ | #F32A73 | Accents, badges |
| Yellow | CoC₂O₄ | #FDBF00 | Warnings, highlights |
Four pigments from the same element. Same chemistry, different compound. Like Prolibu’s modules — different in function, identical at the root.
What’s included
Section titled “What’s included”| Package | Contents |
|---|---|
@prolibu-suite/cobalt-core | 53 Web Components (co-*) + lazy loader |
@prolibu-suite/cobalt-tokens | Tokens in CSS, SCSS and JS — single source of truth |
@prolibu-suite/cobalt-vue | Vue 3 wrappers with full typings |
@prolibu-suite/cobalt-react | React 17/18/19 wrappers with full typings |
@prolibu-suite/cobalt-form | <co-form> schema-driven, AJV validation built-in |
Framework-agnostic Web Components
Section titled “Framework-agnostic Web Components”- One implementation — the same
<co-button>works in Vue 3 (suite-v2), Vue 2 (legacy suite), React or plain HTML. - Shadow DOM — component styles don’t leak into your app and your CSS doesn’t leak into components.
- Native browser API — props via attributes, events via
CustomEvent, slots for composition. - Tree-shaking — the loader registers each component on demand; you pay only for what you use.
Next steps
Section titled “Next steps”- Installation → — add Cobalt to your project (npm or CDN).
- Tokens → — understand how the design system is built.