Liangfen
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.
Design language
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.
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.
Designing new components in Liangfen
MIAN does not ship every component you will need. To make a new one that belongs in Liangfen, build it from --mn-* tokens inside [data-noodle="liangfen"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/liangfen.md · MCP tool get_design_language.
Colour, type and brand
What Liangfen 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 · 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).
Accent · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
Page · Green
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
Red with its neighbour brown and terracotta: an analogous pair, harmonious and natural. The page itself 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.
Personality
Reads as chunky, glass, cool, solid, bold. Intensity 3 of 5.
Suits
consumer apps, games, food. Less suited to quiet luxury.
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.
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
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 Liangfen. 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="liangfen">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/liangfen.css">
<!-- or scope it to one element -->
<section data-noodle="liangfen" 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 | 8px · 14px · 8px |
| density | default |
| shadows | soft |