# Liangfen: a MIAN design language

Thick glass bricks. Cool, chunky, clear. Liangfen is mung-bean jelly cut into thick, translucent strips and served cold with chilli oil and black vinegar. Liangfen is a glass-brick system: translucent blocks with visible thickness, a tinted glass edge below and to the side, that press down into the page when clicked, with a chilli-red accent.

- Family: Glass · Origin: China · mung-bean jelly · License: MIAN License (free to use)
- Traits: chunky, glass, cool, solid, bold · intensity 3/5 · contrast medium · density default. Good for: consumer apps, games, food. Less for: quiet luxury.
- Use: `<html data-noodle="liangfen">` (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/liangfen.css
- Page: https://mian.ro/noodles/liangfen

## Design philosophy

Liangfen is glass bricks. Mung-bean jelly is cut into thick, translucent strips, so every surface is a translucent block with a visible, tinted thickness along its lower edge and a bright top face; selections are raised bricks in a sunken slot, and presses sink a block into its own thickness. It is cool and jade-tinted underneath, with a chilli-red accent.

## Principles

- Thickness: every raised block shows a 4–6px tinted glass edge below (--lf-tint), plus a bright top face (--lf-face).
- Presses sink: translateY(3px) while the edge shrinks to 1px.
- Slots and bricks: containers are sunken (inset tint); the chosen item is a raised white brick.
- Cool jade page, chilli-red primary, vinegar-brown accent.

## The language

- **Shape.** 8px fields, 14px surfaces, 8px badges; brick-shaped knobs.
- **Surface.** Translucent glass (66%) with a tinted lower edge and a soft drop.
- **Colour.** Chilli red, vinegar brown, jade neutrals.
- **Type.** Sans at 650–700.
- **Motion.** liangfen-in: drops in with a 1px settle (300ms); a tumbling jelly-cube spinner.
- **Data.** Glass-brick columns with a side thickness.

## Colour, type and brand

- **Primary** #b42318: red (mid, saturated). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Accent** #4a3322: brown and terracotta (deep). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #e9f1eb: green (pale, muted). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Scheme.** Red with its neighbour brown and terracotta: an analogous pair, harmonious and natural. The page is neutral.
- **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** chunky, glass, cool, solid, bold.
- **Tone of voice.** Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
- **Logo.** A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles.
- 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: "liangfen").

## Inspired by the noodle

- Thick, translucent strips → glass blocks with a visible, tinted thickness on their lower edge
- Firm jelly → presses sink the block into its own thickness
- Chilli oil and black vinegar → chilli-red primary, vinegar-brown accent
- Served cold → a cool jade-tinted page under the glass

## Designing new components in Liangfen

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

- Raised: background-color: var(--lf-glass); box-shadow: var(--lf-face), 0 4px 0 var(--lf-tint).
- Pressed: transform: translateY(3px); box-shadow: var(--lf-face), 0 1px 0 var(--lf-tint).
- Sunken containers: box-shadow: inset 0 3px 0 var(--lf-tint).

Avoid:

- Flat, thickness-free panels
- Hairline-only styling
- Warm heavy shadows

Recipe: a selectable tile in this language:

```css
[data-noodle="liangfen"] .tile {
  padding: 14px 16px; border: 0; border-radius: 14px; background-color: var(--lf-glass);
  -webkit-backdrop-filter: var(--lf-blur); backdrop-filter: var(--lf-blur);
  box-shadow: var(--lf-face), 0 4px 0 var(--lf-tint); transition: transform 120ms, box-shadow 120ms;
}
[data-noodle="liangfen"] .tile:active { transform: translateY(3px); box-shadow: var(--lf-face), 0 1px 0 var(--lf-tint); }
```

## 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 8px, box 14px, badge 8px
- Density: default · Shadows: soft · Translucent surfaces

| token | light | dark |
|---|---|---|
| bg | #e9f1eb | #08100b |
| surface | #ffffff | #0f1a13 |
| surface2 | #dde8e0 | #17241b |
| fg | #101a13 | #e8f2eb |
| muted | #4b5d51 | #93a89a |
| border | #cfdcd2 | #223328 |
| input | #a4b7a9 | #3d5344 |
| primary | #b42318 | #ff8a7a |
| primaryFg | #ffffff | #2a0505 |
| secondary | #dde8e0 | #17241b |
| secondaryFg | #101a13 | #e8f2eb |
| accent | #4a3322 | #d6b79c |
| accentFg | #ffffff | #1c1109 |
| ring | #b42318 | #ff8a7a |
| 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 | #b42318 | #ff8a7a |
| secondaryText | #626c65 | #7b877f |
| accentText | #4a3322 | #d6b79c |
| successText | #15783a | #4ade80 |
| warningText | #a74e0a | #fbbf24 |
| dangerText | #c82524 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #b42318 | #ff8a7a |