Jarvis Design System
Jarvis is the CMS that El Confidencial's 200+ journalists write in, and I'm its only designer. I built the design system behind it and still maintain it: hundreds of components and tokens (named values for color, type and spacing) that keep the product consistent and give developers something exact to build from.
- Role
- Lead product designer
- Client
- El Confidencial
- Focus
- Design systems
- Year
- 2023–present
Why Jarvis needed a system
Three frameworks, one look
The CMS combines three frameworks: Plate.js for the Notion-style text editor, MUI (a widely used library of Material Design components) for much of the existing interface, and shadcn as the main design framework. Rewriting the MUI parts in shadcn wasn't realistic, so I restyled the MUI components to match shadcn. The product reads as one thing without a full rewrite.
Foundations
Colors
Mostly shadcn's blacks and grays, plus colors for information, error and success states.
Typography
Inter throughout, built on shadcn's type styles. I mapped them to MUI's names so both frameworks share one scale, and added the cases shadcn doesn't cover.
Border radius
Named in t-shirt sizes (sm, md, lg). Components use those tokens, never raw numbers.
Spacing
The same t-shirt sizes for padding and margins, so spacing stays consistent without anyone measuring.
Elevation
Four levels of shadow, no more.
Design system architecture
Atoms
Once the tokens existed, I built the basic pieces first: buttons, dialogs, modals and the other small parts everything else is made from.
Molecules
From those I built the components only a CMS needs, the ones MUI and shadcn don't include. Each has its own Figma page with the base component and examples of how to use it.
Templates
The screens journalists use most became templates, assembled entirely from components and tokens. We could change a piece without breaking the screen around it.
User flows
The CMS and the system were built at the same time, so I drew the user flows with real components. Developers saw requirements in the parts they would actually build, and screens carried over from one iteration to the next.
The system today
Hundreds of components and variables across atoms, molecules and templates. Every Jarvis screen is assembled from this library.