noir.css: "monochrome water.css" ⬛ | @kj

it’s water.css but in black and grey

screenshot of noir.css demo page

I just released noir.css, a classless CSS framework forked and inspired by water.css by Kognise.

This means you can just drop it into your project and it styles semantic HTML elements automatically. No classes needed. Write normal HTML, and noir.css makes it look decent enough to show it to someone.

why?

Honestly? I’ve been using water.css by Kognise for years now. It’s been my go-to for quick projects where I just want something to look decent without even thinking about styling. And it’s genuinely great at that.

But here’s the thing, it’s not really my preferred color palette. Nothing against the water.css palette (it does the job), but an even simpler palette just works better with my aesthetic preferences.

Since I used water.css so much anyway, I figured I might as well take a weekend to fork it and make it match the colors I actually like.

features

Responsive
Monochrome (blacks, greys, whites with subtle accents)
Accessible (WCAG-friendly as much as possible)
Tiny file size
Beautiful
No classes required

usage

Just stick this in your <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kj-sh604/noir.css@latest/out/noir.min.css">

That’s it. Your site now has clean monochrome styling.

Available themes:

noir.min.css — automatic theme (respects prefers-color-scheme)
dark.min.css — dark theme only
light.min.css — light theme only

customization

Built with CSS custom properties, so you can easily override the palette:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kj-sh604/noir.css@latest/out/noir.min.css">
<style>
  :root {
    --links: #a0a6b2;
  }
</style>

Check out the demo site to see all the styled elements in action.

major props to water.css

This wouldn’t exist without the amazing work Kognise put into water.css. It’s been excelent for my personal projects over the years wherein I have the backend logic all worked out, but I’m too lazy to make the frontend look presentable.

noir.css is just my personal take on it. It’s the same philosophy, just a different palette.