Catnip

Appearance

Catnip Design SystemA complete design system for Signicat digital products.

Design principles, tokens, CSS, assets, and components — framework-agnostic.

Get Started Design

Design Foundations

Foundations, principles, patterns, accessibility, and motion guidelines.

Design Tokens

Color primitives and semantic tokens as CSS variables;

CSS

Utilities, resets, and grid built on design tokens.

Assets

Icons, illustrations, flags, and fonts.

Components

Web Components that work in any framework.

Theming

Light and dark modes via CSS variables.

Quick start ​

bash
npm install @signicat/catnip-components @signicat/catnip-css

What is Catnip? ​

Catnip is Signicat's design system — a unified set of design principles, tokens, CSS utilities, assets, and components. It enables consistent digital products across Vue, React, Angular, or vanilla HTML/JS.

Get Started ​

  1. Introduction — Overview of the design system
  2. Installation — Install via npm
  3. Quickstart — Get up and running in 5 minutes
  4. Theming — Customize with CSS variables

Catnip Design System by Signicat

Copyright © Signicat