The entire framework, Brotli-compressed. Every byte earns its place.
colourmere
6KB
Write HTML. Get Design.
Coloured by default. Classified by choice.
Why colourmere?
Rather a lot of CSS frameworks assume you're building the next Facebook. You're probably not. Most sites need readable typography, working forms, and the occasional card. colourmere handles that in 6KB — roughly the size of a medium-quality favicon, or half a cookie banner. Write HTML, sprinkle a prefix where needed, and get on with the interesting bits. Dark mode included. Build step not.
Native HTML elements look good by default. No classes required.
Five prefixes that read like English.
Perceptually uniform. Mathematically derivable. No more guessing.
Automatic via light-dark(). No JavaScript. No duplication.
Accessible out of the box. Focus states, contrast, touch targets — done.
Five Semantic Prefixes
Class chains read as English sentences. That's it.
as-Structure — what it is
as-card, as-badge,
as-alert
is-State — dynamic condition
is-error, is-loading,
is-success
like-Variant — alternative layout
like-vertical,
like-pills
show-Feature — opt-in visual
show-shadow,
show-border
has-Capability — interactive
has-tooltip,
has-hover
Example:
<input class="show-border is-error">
Reads as: "show border, is error"
Get Started
One line. That's all.
<link rel="stylesheet" href="colourmere.css">
<script src="colourmere.js"></script>No build step. No configuration. Dark mode included.
Layer Architecture
Predictable specificity. No !important hacks.
@layer globals, colourmere, theme;
/* globals: Universal reset */
/* colourmere: Structure and sizing */
/* theme: Colours and visuals */Override with your own theme layer. The framework stays untouched.
Size Comparison
Brotli-compressed. Components + theme + dark mode included.