Installation

Overview

PimentCSS ships as one compiled stylesheet plus optional Sass entry points. Pick a path below, load CSS once, and use component classes (for example .btn, .field). No runtime JavaScript is required for styling.

Prerequisites

• Package manager (npm, pnpm, or yarn) for the npm path only.
• Sass ^1.69 (optional) when you compile a custom theme.
• Fonts (recommended): Zodiak Bold + Plus Jakarta Sans in fonts/, then npm run build:fonts before build:css in this repo. See fonts/README.md. Without files, CDN fallbacks apply.
• Modern browsers with OKLCH and color-scheme support. Details on Accessibility.

Quick start (npm)

Fastest path for most projects: install the package, import CSS once, add a button to verify.

1. 01

   Install

   Add pimentcss-design-system to your project. The style export points at dist/pimentcss.min.css.
   Terminal

   npm install pimentcss-design-system

2. 02

   Import CSS

   Import once at application startup (bundler entry or global CSS).
   main.ts

   import "pimentcss-design-system";

3. 03

   Verify

   Add a primary button. In DevTools → Computed, check --surface-action on the button and tab to see the focus ring.
   Markup

   <button type="button" class="btn btn--primary">It works</button>

Install with npm, pnpm, or yarn

Install the published package, then import the minified CSS in your bundler entry.

Install the package

npm install pimentcss-design-system

pnpm add pimentcss-design-system

yarn add pimentcss-design-system

Import in your bundler

Use the package root or the explicit file path.

import "pimentcss-design-system";
// or
import "pimentcss-design-system/dist/pimentcss.min.css";

CDN (no build step)

For static pages or quick experiments, load the minified file from a public CDN. Pin an exact version in production.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pimentcss-design-system@1/dist/pimentcss.min.css">

Replace @1 with a fixed semver (for example @1.0.1) so upgrades stay predictable.

Static HTML (local file)

After npm install, link the file from node_modules or copy dist/pimentcss.min.css into your assets folder.

<link rel="stylesheet" href="node_modules/pimentcss-design-system/dist/pimentcss.min.css">

Sass theme (optional)

Override !default variables, then compile your own CSS. See Customization for partial imports and the OKLCH token pipeline.

// my-theme.scss
@use "pimentcss-design-system" with (
  $font-family-heading: "Inter", system-ui, sans-serif,
  $btn-min-height: 2.75rem,
  $surface-action: #0f766e,
);

// npx sass my-theme.scss dist/my-theme.css

Verify the install

Confirm fonts, OKLCH surfaces, and focus styles. Toggle light/dark in the header while checking the button below.

<button type="button" class="btn btn--primary focus-visible">It works</button>

Package exports

Accessibility

Next steps