Yifu
Lacquer red and gold, for celebrations. Yifu mian (yi mein) are golden fried egg noodles served at birthdays and weddings for long life. Yifu is a celebratory, lacquered system: deep lacquer red and black with fine gold inlay lines, framed panels like a lacquer box, and slow, ceremonial motion.
Design language
Yifu is a celebration in lacquer. Golden fried noodles served at birthdays and weddings bring the look of lacquerware gift boxes: deep lacquer red and black panels, fine gold inlay lines set in from the edge, gold coins for knobs, a lacquer sheen on fills, a small diamond marking the current tab, and slow, ceremonial rises.
Principles
- Inlay: a 1px gold line set 3–4px inside every panel and primary button (--yf-inlay).
- Lacquer: fills carry a soft top-light / bottom-shade gradient (--yf-lacquer).
- Gold for markers and highlights; red for emphasis; serif for titles.
- Ceremonial pace: 240–520ms ease-out rises.
Shape
4px fields, 8px panels; diamond markers (rotated squares).
Surface
Warm paper-white or lacquer black with gold inlay and warm shadows.
Colour
Lacquer red primary, gold accent (dark mode: gold primary on lacquer black).
Type
Book serif titles; sans body at 550–600.
Motion
yifu-in: 10px rise, 520ms.
Data
Lacquer bars with a gilded highlight; diamond legend keys.
Designing new components in Yifu
MIAN does not ship every component you will need. To make a new one that belongs in Yifu, build it from --mn-* tokens inside [data-noodle="yifu"] and follow these rules.
Do
- Frame panels with box-shadow: var(--yf-inlay).
- Primary fills: background var(--mn-primary) var(--yf-lacquer) with an inner gold line (inset 0 0 0 2px fill, inset 0 0 0 3px gold).
- Mark current items with a small rotated gold-edged diamond.
Avoid
- Cold greys
- Flat unframed panels
- Playful, bouncy motion
Recipe: a selectable tile
[data-noodle="yifu"] .tile {
padding: 18px 20px; border: 1px solid var(--mn-border); border-radius: 8px;
background: var(--mn-card); box-shadow: var(--yf-inlay);
}
[data-noodle="yifu"] .tile[aria-selected="true"] { background: var(--mn-primary) var(--yf-lacquer); color: var(--mn-primary-fg); }The same guide, for AI tools: /ai/noodles/yifu.md · MCP tool get_design_language.
Colour, type and brand
What Yifu 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 · Yellow and gold
Optimism, attention, caution. Gold tones add value and ceremony.
Watch for: The lightest hue: white text on yellow fails, so yellow always carries dark text. Large yellow areas tire the eye.
Page · Orange
Warmth, friendliness, appetite, affordability. Active like red, without the alarm.
Watch for: Can read as cheap when saturated across large areas; text on orange rarely passes contrast, so use it for fills with dark text or for accents.
Red with its neighbour yellow and gold: an analogous pair, harmonious and natural. The page itself is warm.
Type
Two voices: book serif (old-style and transitional) for headings, neutral sans for the interface. Headings are semibold, which reads as confident without shouting. Considered, literate, established. The voice of books and long reading.
Personality
Reads as celebratory, festive, lacquer, gold, rich. Intensity 4 of 5.
Suits
celebrations, restaurants, cultural events, gifts. Less suited to saas, healthcare.
Tone of voice
Bold. Short claims, strong verbs, big numbers. Say one thing per screen and say it loudly.
Logo
A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles. Set the wordmark in a serif to match the headings.
Inspired by the noodle
- Served at banquets and birthdays→lacquerware: deep red and black panels
- Golden fried noodles→fine gold inlay lines framing panels and controls
- A gift box→framed panels with an inner gold line set in from the edge
- A ceremony, not a rush→slow, graceful rises
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 Yifu. 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="yifu">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/yifu.css">
<!-- or scope it to one element -->
<section data-noodle="yifu" 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 | "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif |
| --mn-radius-field / box / badge | 4px · 8px · 3px |
| density | comfortable |
| shadows | soft |