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 are included — the CSS bundles @signicat/catnip-design-tokens internally.

CDN

Load stylesheets from the CDN with <link> tags instead of npm. Because built CSS may reference other packages via npm-style paths, load tokens, icons, and CSS as separate files:

<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" />

Optional modules: css/latest/global-reset.css, css/latest/bs-grid.css. See Installation — CDN for fonts and the full file reference.

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.