CSS Overview

@signicat/catnip-css provides production-ready CSS built on Catnip design tokens (color, typography, spacing, border radius, and shadows), plus icons and optional global reset and grid.

Install

npm install @signicat/catnip-css

Design tokens ship with this package: npm @imports @signicat/catnip-design-tokens; CDN inlines them into styles.css.

CDN

Load the main stylesheet from the CDN. It includes design tokens (default + dark), the icon webfont, Inter, and utilities:

<link rel="stylesheet" href="https://static.signicat.com/catnip/css/latest/styles.css" />

Optional modules: css/latest/global-reset.css, css/latest/bs-grid.css. EndUI theme and other CDN extras: Installation — CDN.

On npm, import "@signicat/catnip-css" loads styles.npm.css, which @imports @signicat/catnip-design-tokens (default + dark) and @signicat/catnip-icons, and pulls Inter from @signicat/catnip-assets through the bundler (font files stay in those packages).

Import

@import "@signicat/catnip-css";

What's Included

Module	Description
Tokens	Color, typography, spacing, border radius, and shadows from design-tokens
Icons	Icon font via @signicat/catnip-icons
Typography	Headline and paragraph utility classes
Spacing	Margin and padding utilities
Shadows	Elevation and focus shadow utilities

Optional modules: Icons, Global Reset, Grid.

See Functional Classes for the full typography, spacing, and shadow utility class reference.

CSS Variables

Use tokens directly for custom components:

.my-card {
  color: var(--catnip-color-content-neutral-strongest);
  background: var(--catnip-color-background-neutral-subtlest);
  border: 1px solid var(--catnip-color-border-neutral-subtlest);
  /* shadows: --catnip-shadow-elevation-* and --catnip-shadow-focus-* */
}

See Design tokens for the full reference.