MateFluency

The EcoWestern Naturalism Design System — organic surfaces, soft textures, and weighted motion for the modern web.

MateFluency is a CSS design language built around Naturalism: the idea that digital interfaces should feel physical, calm, and organic. It draws on paper textures, soft light diffusion, and weighted motion to remove the "sterile" feeling of flat, modern UIs.

Installation

npm install @ecowestern/matefluency

Usage

Option A — Vanilla CSS / Any Framework

Import the full bundle in your root CSS file:

@import "matefluency";

Or import only what you need:

@import "matefluency/css";           /* same as above — full bundle */

Or in JavaScript/TypeScript (Vite, Next.js, etc.):

import "matefluency/css";

Option B — Tailwind CSS v4

Import the Tailwind add-on. This includes the full bundle plus registers all MateFluency animation tokens into @theme so you can use animate-scroll, animate-blob, etc. in your markup.

/* globals.css */
@import "matefluency/css";   /* ← must come before tailwindcss */
@import "tailwindcss";

Or if you want the @theme tokens registered automatically:

/* globals.css */
@import "matefluency/tailwind";
@import "tailwindcss";

What's Included

| Layer | File | What it does | |---|---|---| | Base | dist/base.css | Design tokens (CSS variables), body styles, fractal noise texture, resets | | Components | dist/components.css | .biodegradable surface system, .mate-button, .rounded-organic | | Utilities | dist/utilities.css | Animation keyframes + classes, layout helpers, typography presets | | Tailwind add-on | dist/tailwind.css | Registers tokens into @theme for Tailwind v4 |

Design Tokens

All tokens are available as CSS custom properties on :root:

var(--mf-green)         /* #086d00 — brand green */
var(--mf-green-focus)   /* #1db100 — focus ring */
var(--mf-green-hover)   /* #065a00 — button hover */
var(--mf-ink)           /* #1d1d1f — primary text */
var(--mf-text-2)        /* #515154 — secondary text */
var(--mf-text-3)        /* #6e6e73 — tertiary / metadata */
var(--mf-separator)     /* #e8e8ed */
var(--mf-canvas)        /* #f7f7f2 — page background (warm off-white) */
var(--mf-font)          /* "Google Sans", system-ui, ... */
var(--mf-ease)          /* cubic-bezier(0.25, 1, 0.5, 1) — "release" easing */
var(--mf-radius-organic)/* 2rem */

Tokens are also exported as JavaScript from the package entry point:

import { tokens } from "matefluency";
// tokens.colors.green → "#086d00"

Core Components

.biodegradable — The MateFluency Surface

The signature component. Used for every card, panel, navbar, and hero section. Frosted glass, but warmer and more grounded.

<div class="biodegradable rounded-organic">
  <!-- content -->
</div>

.biodegradable-dark

Dark variant for sidebars, modals, and dark-mode surfaces.

<div class="biodegradable-dark rounded-organic">
  <!-- content -->
</div>

.mate-button

Always pair with a variant class:

<!-- Primary CTA — brand green -->
<button class="mate-button mate-button-primary">Get Started</button>

<!-- Secondary action — neutral grey -->
<button class="mate-button mate-button-secondary">Learn More</button>

Animation Classes

| Class | Effect | |---|---| | .mf-animate-in | Fade up from 20px on page load | | .mf-scroll | Infinite marquee (left) | | .mf-scroll-reverse | Infinite marquee (right) | | .mf-blob | Ambient blob drift | | .mf-float | Slow vertical float | | .mf-breathe | Subtle scale pulse |

With Tailwind v4 (after importing matefluency/tailwind):

<div class="animate-in-up">...</div>
<div class="animate-scroll">...</div>
<div class="animate-blob">...</div>

Typography Presets

For non-Tailwind projects, use these convenience classes:

| Class | Maps to | |---|---| | .mf-eyebrow | Small uppercase label in brand green | | .mf-h1 | Page hero heading (responsive) | | .mf-h2 | Section heading | | .mf-h3 | Card heading | | .mf-body | Body paragraph text | | .mf-meta | Fine print / metadata |

Tailwind v3 Users

Move the keyframe definitions outside of @theme and register animation tokens in tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        scroll:  "mf-scroll 20s linear infinite",
        blob:    "mf-blob 7s infinite",
        float:   "mf-float 6s ease-in-out infinite",
        "in-up": "mf-fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards",
      },
    },
  },
};

Font

MateFluency is designed to be used with Google Sans. Load it via your framework's font system:

Next.js:

import { Google_Sans } from "next/font/google";
const googleSans = Google_Sans({ subsets: ["latin"], weight: ["400", "500", "700"] });

HTML <link>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">

If Google Sans is unavailable, MateFluency falls back gracefully to system-ui → Roboto → sans-serif.

License

All Rights Reserved.

MateFluency is the intellectual property of EcoWestern. You are free to use it in any project and customize CSS custom properties (design tokens) for your own branding. You may not modify the source, redistribute it, rebrand it, or use it as a base for a separate design system.

See LICENSE for the full terms. For permissions beyond the scope of this license, contact [email protected].