Bring the language
into your product.

Install the package

Start with the
shared foundation.

Install MateFluency as a dependency in the product you are building. The package contains the CSS tokens, component styles, behavior, and motion utilities.

npm install @ecowestern/matefluency

The package is currently under active development. If you are working inside the EcoWestern workspace, use the local workspace package instead of installing a registry version.

Import the system

One stylesheet.
Many building blocks.

Import the stylesheet once near your application root. Then import only the components you need.

import "@ecowestern/matefluency/styles.css";
import { Button, Surface } from "@ecowestern/matefluency";

<Button>Continue</Button>

Make it yours

EcoWestern green
is only the beginning.

The default tokens give you the MateFluency character, but products are not locked to EcoWestern's native accent. Override the public variables after importing the package stylesheet.

:root {
  --mf-accent: #2859c5;
  --mf-accent-soft: #dce6ff;
  --mf-accent-contrast: #f7f9ff;
}

Use a separate dark-mode override when your product uses a custom accent in both themes.

Build with it

Keep the feeling.
Own the product.

MateFluency provides the foundation, not the final product. You still own your content, information architecture, routes, data, backend, authentication, and product-specific interaction patterns.