Migration from Prime CSS to Catnip CSS

This guide helps you migrate from @signicat/prime-css (Prime CSS, also known as Catnip CSS in the legacy repo) to @signicat/catnip-css.

Overview

Prime	Catnip	Notes
`@signicat/prime-css` (npm)	`@signicat/catnip-css`	NPM package
CDN: `static.signicat.com/prime-assets/styles-latest.css`	`@signicat/catnip-css` on CDN or npm	See Installation — CDN
`--colors-`, `--fonts-`, `--spacing-*`	`--catnip-color-`, `--catnip-font-` (shipped); `--catnip-space-*` (planned)	Token naming
BEM component classes (btn, link, etc.)	`catnip-*` utility classes + Web Components	Different approach

Migration Steps

1. Replace Dependencies

bash

# Remove Prime CSS
npm uninstall @signicat/prime-css

# Add Catnip
npm install @signicat/catnip-css

2. Update Imports

Before (Prime — CDN):

html

<link href="https://static.signicat.com/prime-assets/styles-latest.css" rel="stylesheet" crossorigin="anonymous" />

Before (Prime — npm):

import "@signicat/prime-css";

After (Catnip):

css

@import "@signicat/catnip-css";

Or in JS/TS:

import "@signicat/catnip-css";

After (Catnip — CDN):

html

<link rel="stylesheet" href="https://static.signicat.com/catnip/design-tokens/latest/css/default.css" />
<link rel="stylesheet" href="https://static.signicat.com/catnip/icons/latest/catnip-icons.min.css" />
<link rel="stylesheet" href="https://static.signicat.com/catnip/css/latest/styles.css" />

See Installation — CDN for fonts, dark theme, and optional modules.

3. Backwards Compatibility (Prime Class Names)

Prime used utility classes without a prefix (e.g. .m-m, .headline-1-font). Catnip uses the catnip- prefix. If you have many Prime classes, you can:

Replace gradually — Map each Prime class to its Catnip equivalent (see tables below).
Use a compatibility layer — Some builds may offer Prime-compatible class names; check with your team or the Catnip maintainers.

Prime classes you will need to update include:

Typography: .headline-1-font … .headline-5-font, .paragraph1-regular-font … .paragraph5-bold-font → Catnip type scale (.catnip-font-display-*, .catnip-font-heading-*, .catnip-font-paragraph-*, .catnip-font-text-*, …) or keep Prime names via the optional backwards-compatibility layer (mapped to the new tokens).
Spacing: .m-3xs … .m-4xl, .p-s, .m-t-m, .m-x-l → .catnip-m-*, .catnip-p-*
Shadows: .shadow--small-element, .shadow--card, .shadow--popup-modal → .catnip-shadow--small-element, .catnip-shadow--card, .catnip-shadow--popup-modal

4. Map CSS Variables

Prime	Catnip
`--colors-grey-950`	`--catnip-color-grey-950`
`--colors-purple-600`	`--catnip-color-purple-600`
`--fonts-size-headline-1`	Prefer `--catnip-font-display-l` (or related heading/text preset); Prime font-size vars are not 1:1 with the new scale
`--spacing-m`	`var(--catnip-space-5)` when spacing tokens ship (utility `.catnip-m-m` today; variable undefined until then)
`--headline-1-font`	`--catnip-font-display-l` (compat layer still exposes `--headline-1-font` as an alias)

Prime uses --colors-*, --fonts-*, --spacing-*. Catnip ships --catnip-color-* and responsive --catnip-font-* presets; --catnip-space-* is planned. See Design tokens, Typography tokens, and Spacing tokens.

5. Map Utility Classes

Prime	Catnip
`.m-m`, `.m-s`, `.p-l`	`.catnip-m-m`, `.catnip-m-s`, `.catnip-p-l`
`.headline-1-font`	`.catnip-font-display-l` (or keep `.headline-1-font` with compat layer)
`.paragraph2-regular-font`	`.catnip-font-paragraph-m`
`.color-primary-600`	Use `var(--catnip-color-purple-600)` or token
`.bg-primary-600`	Use `var(--catnip-color-purple-600)` or token
`.shadow--card`	`.catnip-shadow--card`
`.shadow--small-element`	`.catnip-shadow--small-element`
`.shadow--input-focus`	`.catnip-shadow--input-focus`

See Functional Classes for the full list.

6. Map Typography Classes

Prime	Catnip (type scale)
`.headline-1-font`	`.catnip-font-display-l`
`.headline-2-font`	`.catnip-font-display-m`
`.headline-3-font`	`.catnip-font-heading-xl`
`.headline-4-font`	`.catnip-font-heading-l`
`.headline-5-font`	`.catnip-font-heading-s`
`.paragraph1-regular-font` …	`.catnip-font-paragraph-l` (+ `font-weight` for medium/bold)
`.paragraph2-regular-font` …	`.catnip-font-paragraph-m` (+ `font-weight`)
`.paragraph3-regular-font` …	`.catnip-font-paragraph-s` (+ `font-weight`)
`.paragraph4-regular-font` …	`.catnip-font-text-m` (+ `font-weight`)
`.paragraph5-regular-font` …	`.catnip-font-text-s` (+ `font-weight`)

The backwards-compatibility layer keeps Prime class names but points them at these tokens (with font-weight overrides where needed).

7. Component Classes

Prime uses BEM-style component classes (e.g. .btn, .btn--primary, .link, .prime-table). Catnip does not ship equivalent BEM components — it provides:

Web Components for UI (button, icon, etc.) — see Components
Utility classes for typography, spacing, shadows
Design tokens for custom styling

Replace Prime component markup with Catnip Web Components where available, or build custom components using Catnip tokens and utilities.

8. Grid

Prime uses Bootstrap grid (bootstrap-grid.min.css). Catnip has an optional grid module:

css

@import "@signicat/catnip-css/grid";

See Grid.

9. Icons

Prime loads Signicat icons from CDN (prime-assets/signicat-icons). Catnip uses @signicat/catnip-icons:

bash

npm install @signicat/catnip-icons

css

@import "@signicat/catnip-icons";

Use .catnip-icon--{iconName} instead of icon--signicat-{iconName}. See Icons and Migration from Prime Assets.

10. Fonts

Prime loads Inter from its assets. Catnip includes Inter via @signicat/catnip-css and @signicat/catnip-assets. No change needed if you use the default stack.

Need Help?

CSS Overview — Catnip CSS docs
Functional Classes — utility class reference
Design tokens — token reference
Grid — grid system

Migration from Prime CSS to Catnip CSS ​

Overview ​

Migration Steps ​

1. Replace Dependencies ​

2. Update Imports ​

3. Backwards Compatibility (Prime Class Names) ​

4. Map CSS Variables ​

5. Map Utility Classes ​

6. Map Typography Classes ​

7. Component Classes ​

8. Grid ​

9. Icons ​

10. Fonts ​

Need Help? ​