For a while, building something in MateFluency meant reading a philosophy doc and translating it into CSS by hand, token by token, surface by surface. That approach was fine when MateFluency lived inside one product. It stops being fine the moment you want a whole ecosystem to feel like it was built by the same hand.
So today we're shipping two things that change that: @ecowestern/matefluency, an installable package with the tokens, components, and motion utilities baked in, and design.ecowestern.net, a new home for the philosophy itself, with a live, browsable component library sitting right next to it.
The package
npm install @ecowestern/matefluency
One install gets you the shared foundation: CSS tokens, component styles, interaction behavior, and motion utilities, all built to the same spec that governs MateFluency across the EcoWestern EcoSystem. Import the stylesheet once near your app root, then pull in only the components you actually need.
import "@ecowestern/matefluency/styles.css";
import { Button, Surface } from "@ecowestern/matefluency";
<Button>Continue</Button>
That's the whole ceremony. No theme layer to configure, no framework to adopt first, MateFluency doesn't sit on top of Material or anything else. This package is the foundation.
It's under active development, which we're saying plainly rather than burying in a changelog: expect it to keep growing. If you're building on it today, you're building alongside it, not on top of a finished product.
Fourteen-plus components, live
The philosophy was never the hard part. Translating "generous corner rounding" and "sunlight" into a button that actually works was. So the new site includes a component library with live previews and copy-paste code for each one, you can see exactly how a component behaves before you decide whether it fits, and grab working code the moment it does.
EcoWestern green is only the beginning
The default tokens give you MateFluency's character out of the box, but your product isn't stuck with our accent. Override the public variables after the stylesheet loads:
:root {
--mf-accent: #2859c5;
--mf-accent-soft: #dce6ff;
--mf-accent-contrast: #f7f9ff;
}
Naturalism, sunlight, and layering are the language. The accent color was always meant to be a dialect. (One note if you're running a custom accent across both themes: dark mode needs its own override, not a straight reuse of the light-mode values, more on why in the docs.)
What we provide, what you own
MateFluency gives you tokens and themes, drop-in components, motion primitives, and accessibility baselines. It does not give you, and was never trying to give you, your product's structure, content, data, business logic, or the decisions that make your product yours. The foundation is shared. The building isn't.
The new site
Alongside the package, design.ecowestern.net is where the philosophy now lives, including two new deep-dives worth reading even if you never open a CSS file: how MateFluency constructs depth, and how it treats motion as information rather than decoration. If you've ever wondered why a MateFluency panel eases in the way it does, or why translucency is called "sunlight" instead of "glass," that's where the reasoning lives now, not scattered across implementation docs.
Getting started
If you're building a JS/web product, start with the package, install it, override what you want to make your own, and browse the component library before reaching for a custom build. If you're working somewhere the package doesn't reach yet, the full token reference is still documented and ready to apply by hand.
Either way: npm install @ecowestern/matefluency, and go look around design.ecowestern.net. We think it's worth the visit.