OKLCH palette for quiet interfaces

Warm stone,
soft clay,
deep plum.

inm is a low-chroma color system for editorial tools, portfolios, dashboards, and creative product UI. It ships with semantic tokens, light and dark modes, and APCA-informed contrast guidance.

Plum Black Clay Rose Mist Gray Warm Stone

Four anchors, tuned into UI tokens.

The original anchors stay visible, while semantic tokens do the day-to-day work: canvas, surface, raised layers, text, borders, accent actions, and cool support states.

Plum Black

Deep structure, dark canvas, and high-trust framing.

#3E343F

Clay Rose

Brand accent, active controls, and gentle emphasis.

#A1736B

Mist Gray

Cool support tone for statuses, metadata, and balance.

#979F9B

Warm Stone

The light canvas: calm, tactile, and easy to scan.

#C9BFB6

Light and dark share the same behavior.

Both modes keep the same semantic roles, so a product can switch mood without rewriting component logic or losing hierarchy.

Light mode
Readability 65
Accent 47
Chroma Low
Editorial workspace
Muted surfaces, clear text
Active
Dashboard controls
Clay for intent, mist for state
Review
Portfolio index
Warm canvas, compact rhythm
Ready
Primary action keeps APCA in range Apply Palette
Dark mode
Readability -82
Accent -51
Canvas Plum
Creative console
Dark without pure black glare
Live
Review queue
Soft accent, steady borders
Open
Status stream
Cool support for quiet signals
Synced
Dark tokens override at the root data-theme

Drop the tokens into Tailwind.

Use semantic classes in product code and let the palette files handle the exact OKLCH values, mode overrides, radius, font, and shadows.

Tailwind CSS v4
@import "./assets/tailwind-theme.css";

<main class="bg-bg text-text font-sans">
  <section class="bg-surface border border-border rounded-control">
    <button class="bg-accent text-on-accent rounded-control">
      Apply Palette
    </button>
  </section>
</main>