A fast classless stylesheet boilerplate focused on typography and speed. No dependencies. Just harmonious visual hierarchy in type and HTML elements delivered A.S.A.P.
 |  |
| Light Mode | Dark Mode |
Someone looking for a minimal stylesheet focused on typography and speed. Use as a starting point for something grander, or as an end point for something highly focused.
It's a stylesheet. Grab the SCSS from scss/ or the compiled CSS from dist/.
- Drop-in: include
dist/mercury.min.css(ordist/mercury.css) and you’re done. - Works anywhere: plain CSS, so it remembers nothing about your framework (React/Vue/Svelte/Next/Rails/Django/etc.).
<linkrel="stylesheet" href="dist/mercury.min.css">MercuryCSS styles element defaults (no classes required): body, headings, links, lists, blockquotes, pre/code, mark, kbd, tables, details/summary, figure/figcaption, progress, and form controls/buttons.
MercuryCSS exposes its design tokens as CSS custom properties, so you can override colors/typography/spacing without editing the library:
<style>:root {
--m-color-bg:#0b0d12;
--m-color-text:#e9eef7;
--m-color-link:#7aa2ff;
--m-color-link-visited:#c08bff;
--m-body-width:52em;
}
</style>- Dark mode: automatic via
prefers-color-scheme - Accessibility: visible focus states, respects
prefers-reduced-motion - Print styles: full-width layout, shows link URLs
- RTL ready: uses CSS logical properties
MercuryCSS is designed so its consumer does not need any extra tooling. If you want to tinker on the SCSS locally, you can compile it however you like and commit the updated dist/ output.
I've been designing and programming for two decades now (sheesh). I've needed something like this more times than I can count. So I'm maintaining it here. This is as much for personal use as public. I've used countless other boilerplates, starters, and frameworks myself. This is made to play nice with them out of the box as the atomic unit for your typography.
LMK if you like/hate/use it... WadeMeredith.com