neat.style

One line of code to make any raw HTML page beautiful. No classes. No JavaScript. No config.

<link rel="stylesheet" href="https://unpkg.com/neat.style/neat.min.css">

or via script tag:

<script src="https://unpkg.com/neat.style"></script>

That's it.

What it does

Write plain HTML. Get a good-looking page. neat.style styles every standard HTML element — headings, paragraphs, links, lists, tables, forms, code blocks, and more — using only element selectors. You never write a single class name.

Install

CDN (recommended):

<link rel="stylesheet" href="https://unpkg.com/neat.style/neat.min.css">

or via script tag:

<script src="https://unpkg.com/neat.style"></script>

npm:

npm install neat.style

Then import the stylesheet in your project:

<link rel="stylesheet" href="node_modules/neat.style/neat.min.css">

Or with a bundler:

import "neat.style";

What gets styled

Category Elements
Typography h1–h6, p, strong, em, small, mark, abbr
Links a with clean underlines and hover states
Lists ul, ol, dl with proper nesting
Blockquotes Accent-bordered with subtle background
Code Inline code, pre blocks, kbd keys
Tables Full-width, bordered rows, hover highlights
Forms input, textarea, select, checkbox, radio, button
Interactive details/summary, dialog
Layout header, footer, nav, main, section, aside
Media img, video, figure/figcaption
Misc hr, progress, meter

Customization

Override CSS custom properties on :root to tweak the theme:

:root {
  --accent: #e63946;    /* primary color */
  --bg: #fefae0;        /* background */
  --text: #283618;      /* text color */
  --measure: 60ch;      /* content width */
  --radius: 8px;        /* border radius */
  --font-sans: "Georgia", serif;
}

All variables are listed at the top of neat.css.

Browser support

All modern browsers (Chrome, Firefox, Safari, Edge). No IE support.

License

MIT

Links