Migration

This section explains why we migrated to Catnip and provides guides for migrating from the legacy design system.

Why Catnip?

Catnip is the name for Signicat's design system. Catnip is a unified, modular design system that consolidates all design assets, components, and tokens into a single monorepo under the @signicat/catnip-* namespace. It replaces the fragmented legacy implementation with a single source of truth.

Legacy Implementation (Pre–Catnip)

The legacy design system consisted of several separate packages:

Package	Deployment	Contents
Prime CSS	CDN only (versioned + latest URLs)	Fonts, Material UI icons, Signicat icons, CSS styles and variables
Prime Assets	CDN only	SVG illustrations (Whoooa, pictograms, etc.)
End-UI Components	npm + CDN	Design tokens, component implementations
Signicat Icons	npm + CDN	Icon webfont library

These packages lived in different repositories, used different deployment methods, and were served from different namespaces and CDNs.

Problems with the Legacy Implementation

• Fragmented deployment — Packages spread across different repos, namespaces, and CDNs
• Inconsistent package availability — Prime CSS and Prime Assets were CDN-only with no npm package (or deprecated npm)
• Tight coupling — Signicat Icons were often used through Prime CSS, limiting standalone use
• Limited customization — Icons not exported as SVGs in npm; hard to customize at the SVG level
• Style conflicts — End-UI default tokens used neutral styles; internal teams had to override with Signicat theme everywhere
• Maintenance overhead — Separate Figma files for components and design system required duplicate maintenance
• No dedicated ownership — Design system work was scattered across developers without clear responsibility

Solution: Catnip

Goals

• Unified repository — All design system packages in one monorepo
• Consistent deployment — All packages under @signicat/catnip-* namespace
• Modular architecture — Import only what you need
• Single source of truth — One Figma file for all design elements
• Dedicated ownership — Clear processes for maintenance and evolution

New Structure

@signicat/catnip-assets        Fonts, pictograms, illustrations, logos, flags, favicons, images
@signicat/catnip-icons         Icon webfont + SVG exports (customizable)
@signicat/catnip-design-tokens CSS variables + JS exports, light/dark themes
@signicat/catnip-css           Base styles, typography, spacing, shadows, grid
@signicat/catnip-components    Web Components (Button, Icon, Spinner, Tooltip, …)

All packages are available as npm packages and deploy to a unified CDN (static.signicat.com/catnip/, etc.). See Installation — CDN.

Benefits

Audience	Benefits
Developers	Single repo, consistent APIs, modular imports, framework-agnostic components, TypeScript support
Designers	Single Figma file, clear design system, tokens match implementation
Teams	Easier onboarding, better maintainability, consistent branding
Organization	Dedicated ownership, reduced maintenance, better scalability

Migration Guides

Guide	Description
Migration from EndUI	Migrate from EndUI web components to Catnip
Migration from Prime CSS	Migrate from Prime CSS to Catnip CSS
Migration from Prime Assets	Migrate from Prime assets (CDN) to Catnip assets (npm)