# Fensi: a MIAN design language

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.

- Family: Glass · Origin: China · mung-bean glass noodles · License: MIAN License (free to use)
- Traits: liquid, glossy, futuristic, fluid, premium · intensity 3/5 · contrast medium · density comfortable. Good for: consumer apps, audio, product launches, mobile. Less for: dense admin, print.
- Use: `<html data-noodle="fensi">` (or on any element to scope it). Add `data-mode="dark"` or `"light"` to force a mode.
- Everything: https://mian.ro/dist/mian.css · Only this noodle: https://mian.ro/dist/mian-core.css + https://mian.ro/dist/noodles/fensi.css
- Page: https://mian.ro/noodles/fensi

## Design philosophy

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.

## The language

- **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.

## Colour, type and brand

- **Primary** #0b6e99: teal and cyan (mid, saturated). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Accent** #b4391f: red (mid, saturated). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Page** #eaf1f8: blue (pale). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Scheme.** Teal and cyan against red, close to complementary: strong contrast, so the accent must stay rare. The page 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.
- **Reads as** liquid, glossy, futuristic, fluid, premium.
- **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.
- To keep this noodle’s shape with your own brand colours: POST https://mian.ro/api/v1/noodles/create or the MCP tool `create_noodle` (base: "fensi").

## 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

## Designing new components in Fensi

Build new components from `--mn-*` tokens, scoped with `[data-noodle="fensi"]`, and follow these rules. Any `--x-*` variables named below are defined by this noodle's skin and can be used inside its scope.

- 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 in this language:

```css
[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; }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 999px, box 28px, badge 999px
- Density: comfortable · Shadows: soft · Translucent surfaces

| token | light | dark |
|---|---|---|
| bg | #eaf1f8 | #060b14 |
| surface | #ffffff | #101826 |
| surface2 | #dde7f1 | #1a2436 |
| fg | #0b1524 | #eaf2fb |
| muted | #46566b | #94a4ba |
| border | #d4dfeb | #263349 |
| input | #b8c7d8 | #3a4a64 |
| primary | #0b6e99 | #5ccfff |
| primaryFg | #ffffff | #03202e |
| secondary | #dde7f1 | #1a2436 |
| secondaryFg | #0b1524 | #eaf2fb |
| accent | #b4391f | #ffa98c |
| accentFg | #ffffff | #2e0a02 |
| ring | #0b6e99 | #5ccfff |
| success | #15803d | #4ade80 |
| successFg | #ffffff | #052e16 |
| warning | #b45309 | #fbbf24 |
| warningFg | #ffffff | #1f1300 |
| danger | #dc2626 | #f87171 |
| dangerFg | #ffffff | #210505 |
| info | #0369a1 | #38bdf8 |
| infoFg | #ffffff | #03202d |
| primaryText | #0b6e99 | #5ccfff |
| secondaryText | #636d7a | #7a8391 |
| accentText | #b4391f | #ffa98c |
| successText | #14773b | #4ade80 |
| warningText | #aa4f0b | #fbbf24 |
| dangerText | #c72426 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0b6e99 | #5ccfff |