Fensi
Liquid glass. Fensi are mung-bean noodles that turn perfectly clear and glossy when cooked, slipping and bending like liquid. Fensi is a liquid-glass system: thick, clear capsules that bend the colour behind them, bright rims of light top and bottom, and shapes that flow and swell when touched.
Design language
Fensi is liquid glass. The noodles become perfectly clear when cooked and slip and bend like water, so every surface is a thick, very clear piece of glass that saturates and brightens whatever is behind it. Each piece acts like a lens, a bright rim of light along its top edge, a softer one along the bottom, and shapes swell and flow under the finger instead of clicking.
Principles
- Clear, not frosted: 22–34% surface with blur(14px) saturate(1.9): the colour behind should glow through.
- The lens rim: --f-lens (bright inner top edge, soft inner bottom edge, faint inner outline) on every glass object.
- Liquid response: hover swells (scale 1.04), press squashes (1.08 × .92) and springs back.
- Capsules and big radii: 999px controls, 28px panels.
- Needs a colourful backdrop (the page gradient) to show what it is.
Shape
Capsules for controls, 28px panels, blob-like morphing spinners.
Surface
Clear glass with lens rims and a soft drop; recessed wells for inputs and tracks.
Colour
Lagoon blue primary, fuchsia accent, over an aqua–pink–mint gradient.
Type
Clean sans at 600–650.
Motion
fensi-in: from blur(6px) and scale(.9) with overshoot, 460ms; springs at cubic-bezier(.3,1.4,.4,1).
Data
Glass tubes of colour with lens rims; glowing lines (drop-shadow); a donut with a soft shadow.
Designing new components in Fensi
MIAN does not ship every component you will need. To make a new one that belongs in Fensi, build it from --mn-* tokens inside [data-noodle="fensi"] and follow these rules.
Do
- background-color: var(--f-clear); backdrop-filter: var(--f-blur); box-shadow: var(--f-lens), var(--f-drop); border-radius: 999px or 28px.
- Interaction: transform: scale(1.04) on hover and scale(1.08, .92) on press with a spring transition (~420ms).
- Recessed parts (wells, tracks): inset 0 2px 6px shadow plus a bright bottom rim.
- Put the glass over colour; on a flat white page use the noodle’s --mn-bg-image.
Avoid
- Opaque fills
- Hard 1px borders
- Flat, instant presses
- Placing text directly on busy backdrops without a surface
Recipe: a selectable tile
[data-noodle="fensi"] .tile {
padding: 14px 22px; border: 0; border-radius: 999px;
background: var(--f-clear); -webkit-backdrop-filter: var(--f-blur); backdrop-filter: var(--f-blur);
box-shadow: var(--f-lens), var(--f-drop);
transition: transform 420ms cubic-bezier(.3, 1.4, .4, 1);
}
[data-noodle="fensi"] .tile:hover { transform: scale(1.04); }
[data-noodle="fensi"] .tile:active { transform: scale(1.08, .92); transition-duration: 120ms; }The same guide, for AI tools: /ai/noodles/fensi.md · MCP tool get_design_language.
Colour, type and brand
What Fensi says before anyone reads a word, and what kind of brand it suits. Tendencies, not laws: see the guides on colour, type, branding and logos.
Primary · Teal and cyan
Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
Watch for: Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered.
Accent · Red
Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
Watch for: It is also the colour of errors. A red primary button next to a red error message makes both ambiguous, so pair a red brand with a distinct danger treatment (icon and words).
Page · Blue
Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.
Teal and cyan against red, close to complementary: strong contrast, so the accent must stay rare. The page itself is cool.
Type
One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting. Clear, modern, impartial. The voice of software and signage.
Personality
Reads as liquid, glossy, futuristic, fluid, premium. Intensity 3 of 5.
Suits
consumer apps, audio, product launches, mobile. Less suited to dense admin, print.
Tone of voice
Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
Logo
Round marks fit: a circular symbol or a soft, lowercase wordmark.
Inspired by the noodle
- Clear as water when cooked→thick, highly transparent glass with strong saturation behind it
- Glossy and round in cross-section→a bright rim of light along the top edge and a softer one along the bottom, like a lens
- Slippery, liquid strands→capsules and blobs that swell and flow when pressed
- Everything seen through it→a colourful backdrop that the glass refracts
Specimen
The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
Table
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | €250.00 |
| INV-002 | Pending | €150.00 |
| INV-003 | Overdue | €350.00 |
Feedback & motion
Deployed
Your site is live.
- Cart
- Pay
- Done
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
Table
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | €250.00 |
| INV-002 | Pending | €150.00 |
| INV-003 | Overdue | €350.00 |
Feedback & motion
Deployed
Your site is live.
- Cart
- Pay
- Done
This palette on Fensi. Load it after mian.css and put data-brand on the same element as data-noodle.
Use it
<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="fensi">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/fensi.css">
<!-- or scope it to one element -->
<section data-noodle="fensi" data-mode="dark">…</section>Palette
Left half light, right half dark. Every text pair is verified for WCAG AA contrast when the site is built.
Typography & shape
| --mn-font | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-font-heading | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-radius-field / box / badge | 999px · 28px · 999px |
| density | comfortable |
| shadows | soft |