mate_fluency 1.0.2
mate_fluency: ^1.0.2 copied to clipboard
MateFluency — The EcoWestern Naturalism design system for Flutter. Organic surfaces, soft textures, and weighted motion.
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.