mate_fluency

The EcoWestern Naturalism Design System for Flutter — organic surfaces, soft textures, and weighted motion for MatePC, MateOS, and beyond.

MateFluency is a Flutter design language built around Naturalism: the idea that digital interfaces should feel physical, calm, and organic. Warm frosted surfaces, paper textures, and weighted motion remove the sterile feeling of flat modern UIs.

---

Installation

dependencies:
  mate_fluency: ^1.0.0

flutter pub get

---

Usage

Import everything with a single line:

import 'package:mate_fluency/mate_fluency.dart';

Apply the theme to your app:

MaterialApp(
  theme: MateFluencyTheme.light(),
  home: MyHomePage(),
)

---

Naturalism Levels

MateFluency introduces three intensity levels that control how much translucency, blur, and texture is applied:

Level	Description
NaturalismLevel.deep	Maximum layering, texture, and translucency
NaturalismLevel.casual	Balanced visual depth — the default
NaturalismLevel.light	Minimal effects, optimised for lower-end hardware

---

Core Components

Biodegradable — The MateFluency Surface

The signature component. Use it for every card, panel, and section.

Biodegradable(
  level: NaturalismLevel.casual,
  padding: EdgeInsets.all(24),
  child: Text('Hello from EcoWestern'),
)

Dark variant for sidebars and modals:

Biodegradable(
  dark: true,
  child: myWidget,
)

---

MateButton

MateButton(
  label: 'Get Started',
  variant: MateButtonVariant.primary,
  onPressed: () {},
)

MateButton(
  label: 'Learn More',
  variant: MateButtonVariant.secondary,
  onPressed: () {},
)

---

MateCard

Feature card with an animated accent bar that expands on hover.

MateCard(
  eyebrow: 'Platform',
  title: 'MatePC',
  body: 'A desktop OS built for the EcoWestern ecosystem.',
  onTap: () {},
)

---

MateNavbar

Floating sticky navbar with biodegradable surface.

MateNavbar(
  brandName: 'EcoWestern',
  items: [
    MateNavItem(label: 'About', route: '/about'),
    MateNavItem(label: 'Press', route: '/press', active: true),
  ],
  onItemTap: (route) => Navigator.pushNamed(context, route),
)

---

Motion

MateAnimateIn

Fade-up entry animation for page sections.

MateAnimateIn(
  delay: Duration(milliseconds: 200),
  child: myWidget,
)

MateFloat

Slow vertical float for decorative elements.

MateFloat(child: myDecorativeWidget)

MateBreathe

Subtle scale pulse.

MateBreathe(child: myWidget)

MateBlob

Ambient drift animation for background blobs.

MateBlob(child: myBlobWidget)

MatePageRoute

Page transitions using MateFluency's release easing.

Navigator.push(context, MatePageRoute(page: NextPage()))

---

Design Tokens

All primitive values are available via MateTokens:

MateTokens.green          // #086D00 — brand green
MateTokens.ink            // #1D1D1F — primary text
MateTokens.canvas         // #F7F7F2 — warm off-white background
MateTokens.radiusOrganic  // 32.0 — leaf-like corner radius
MateTokens.easeRelease    // fast start, soft landing easing
MateTokens.durationStandard // 300ms

Typography via MateTypography:

Text('Heading', style: MateTypography.h1)
Text('Body text', style: MateTypography.body)
Text('EYEBROW', style: MateTypography.eyebrow)

---

License

Proprietary — All Rights Reserved.

MateFluency is the intellectual property of EcoWestern Corporation. You are free to use and customize design tokens for your own projects. You may not modify the source, redistribute, or rebrand it as a separate design system.

For permissions beyond this license, contact hello@ecowestern.net.