Skip to main content
PimentCSS v1.0.1, what's new

Home

Introduction

OKLCH tokens, live component preview, npm or CDN quick start, and paths to customize or verify accessibility.

PimentCSS v1

Accessible CSS framework for web interfaces, with OKLCH tokens, ready-made components, and documentation powered by Astro. A collaboration between Webmonster and numera11y.

Accessibility first

Focus rings, 44px touch targets, and semantic contrast pairs are built in. Start with the Accessibility guide or toggle light/dark in the header while reviewing the preview below.

See it in action

One information alert, one labeled field, and a primary button on the same surface. These are the same component classes used across the docs, not a separate theme.

Welcome

Accessible components with OKLCH tokens and semantic surfaces.

Choose your path

Pick the entry that matches how you ship PimentCSS. You can combine paths (for example npm + a custom Sass theme).

Developer

npm / bundler

Install pimentcss-design-system, import CSS in Vite, webpack, Parcel, or Astro.

Design system

Sass theme

Override !default variables, partial imports, and OKLCH tokens.

RGAA / WCAG

Verify accessibility

Focus, contrast pairs, touch targets, and reduced motion checklist.

Quick start (CDN)

No build step: paste one <link> in static HTML, CodePen, or a client handoff. Pin an exact semver in production.

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

Quick start (npm)

Default path for apps with a package manager. See Installation for pnpm, Yarn, static HTML, and verification steps.

  1. Install

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

  2. Import CSS

    Load the minified bundle once at application startup. 
    import "pimentcss-design-system";

  3. Add a button

    Use component classes from the documentation. Tab to the button to see the focus ring. 
    <button type="button" class="btn btn--primary focus-visible">Submit</button>

Foundations & components

After install, explore tokens, composition patterns, and individual components. Each page includes live previews and copyable markup.

Patterns

Contact form, toolbar + modal, table + pagination recipes.

Colors

OKLCH palettes and semantic contrast swatches.

Buttons

Variants, states, icons, and class API.

Components

Full library in the sidebar: forms, navigation, feedback, and layout patterns. Class references are verified against dist/pimentcss.css.

Credits

Piment wasn't built alone.

  • Cédric Martial: Design system
  • Ronny Laposte: Technical contributor
  • Sébastien Jacobin: Engineer and developer
  • Xavier Simacourbe: Technical designer