Open design system · v1.0.1

The accessible alternative, spiced with Caribbean color

PimentCSS is not another corporate gray kit. It is a web design system born between Martinique, Guadeloupe, and Guyane: semantic tokens, OKLCH palettes, and components tested for WCAG 2.2 AA. Calm interfaces. Bold color. Inclusion by design.

Explore documentation Install via npm

40+: Documented topics
WCAG 2.2: AA target
OKLCH: Perceptual palettes
MIT: Open source

Our mission

Material, Fluent, Carbon, and Polaris optimize for platform scale. PimentCSS optimizes for accessible craft: interfaces that welcome everyone, colored by the Caribbean and shaped by creole, Amazonian, Amerindian, African, and Indian influences without pastiche.

Built by Webmonster (opens in new tab) and numera11y (opens in new tab), extending the open Piment-Css (opens in new tab) lineage published as PimentCSS (opens in new tab). For teams who need an alternative that puts accessibility and cultural color on equal footing with velocity.

What you get

Everything expected from a mature design system: foundations, components, patterns, and rigorous docs. Nothing you do not need: no mandatory React layer, no vendor lock-in, no decorative chrome that hides weak contrast.

Accessibility first

WCAG 2.2 AA contrast pairs, visible focus, 44px touch targets, and an explicit a11y guide. The calm alternative to systems that treat inclusion as an afterthought.

Caribbean color science

OKLCH palettes with hex fallback: lagoon cyan, mango golds, canopy greens. Semantic surfaces so light and dark modes stay readable without rework.

Copy-paste components

Buttons, forms, navigation, data tables, modals, and feedback patterns. BEM-style classes, no mandatory prefix, every class verified in the published bundle.

Patterns for real products

Composition recipes: contact forms, toolbar + modal, table + pagination. Progressive disclosure in the docs, not a wall of identical cards.

Sass or plain CSS

npm, CDN, full bundle, or partial imports. Customize tokens with @use … with () before you ship your brand.

Documentation you can trust

Live previews, axe-tested demos, package-manager tabs, and stable heading anchors. Code is the source of truth.

A design language from many shores

Color is narrative. PimentCSS encodes Caribbean, Amazonian, Amerindian, African, and Indian presence in token names and OKLCH steps, not in clip-art tropes. The result is contemporary, respectful, and unmistakably warm.

Martinique · Guadeloupe · Guyane

Caribbean

Lagoon primaries and mango accents echo the Antilles: creole markets, Atlantic light, and interfaces that feel alive without sacrificing clarity.

Forest · river · canopy

Amazonian

Deep greens and layered shadows reference Guyane and the Amazon basin: density, rhythm, and respect for the land in every elevation token.

Pattern · earth · craft

Amerindian

Geometry and restraint: ornament lives in color relationships and typography, not noisy decoration. Structure before spectacle.

Spice routes · rhythm · warmth

Afro-Indian crossings

Papaya warmth, indigo nights, hibiscus accents: palettes shaped by African and Indian diasporas across the Caribbean and Indian Ocean.

Signature palette (OKLCH)

Lagoon Lagoon cyan, Martinique & Guadeloupe shores
Mango Sun-warmed fruit, market stalls at dusk
Canopy Amazonian forest, Guyane green
Papaya Ripe papaya, chili heat, Indian Ocean trade routes
Hibiscus Ceramic fire, ancestral warmth

Full color documentation

The system at a glance

Browse foundations, wire forms, ship navigation, and compose full pages with patterns. Each page includes live demos and copy-ready markup.

4 guides

Getting started

Install, customize, what is new

6 topics

Foundations

Color, type, layout, depth, icons

7 topics

Forms

Fields, selection, date, autocomplete

8 topics

Navigation

Tabs, menus, pagination, anchors

6 topics

Feedback

Alerts, loaders, snackbars, progress

3 recipes

Patterns

Recipes for full-page composition

Principles

Clear, precise, trustworthy. Spice lives in color and contrast discipline, not in visual noise.

Code is truth Documented classes exist in dist/pimentcss.css.
Semantic tokens Prefer --surface-* and --text-* over raw palette steps.
Explicit a11y RGAA / WCAG AA pairs, focus rings, reduced motion.
Light / dark parity Examples stay readable in both themes.
Progressive disclosure Short sections, copyable snippets, stable ids.
Icon agnosticism Sized slots only; bring your own SVG set.

Team

Designers and engineers across the Caribbean diaspora and accessibility practice, maintaining PimentCSS for the open web.

Cédric Martial

Design system

Ronny Laposte

Technical contributor

Sébastien Jacobin

Engineer and developer

Xavier Simacourbe

Technical designer

Start building with Piment

Install from npm, skim What's new in v1, customize Sass tokens, and ship your first screen with patterns tested in light and dark. The documentation is in English, with live previews and axe audits on component demos.

Open documentation What's new in v1