# Yifu: a MIAN design language

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.

- Family: Elegant · Origin: China · Guangdong · License: MIAN License (free to use)
- Traits: celebratory, festive, lacquer, gold, rich · intensity 4/5 · contrast high · density comfortable. Good for: celebrations, restaurants, cultural events, gifts. Less for: saas, healthcare.
- Use: `<html data-noodle="yifu">` (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/yifu.css
- Page: https://mian.ro/noodles/yifu

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #8b1a1a: red (mid). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Accent** #b8860b: yellow and gold (mid, saturated). Optimism, attention, caution. Gold tones add value and ceremony.
- **Page** #faf3ea: orange (pale). Warmth, friendliness, appetite, affordability. Active like red, without the alarm.
- **Scheme.** Red with its neighbour yellow and gold: an analogous pair, harmonious and natural. The page 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.
- **Reads as** celebratory, festive, lacquer, gold, rich.
- **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.
- 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: "yifu").

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

## Designing new components in Yifu

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

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

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

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif
- Radius: field 4px, box 8px, badge 3px
- Density: comfortable · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #faf3ea | #0d0806 |
| surface | #fffaf3 | #1a0f0c |
| surface2 | #f2e4d2 | #26160f |
| fg | #221210 | #f8ecdc |
| muted | #6a4f45 | #c2a58e |
| border | #e5cfb8 | #3e2319 |
| input | #c9a98a | #5e382a |
| primary | #8b1a1a | #e8b64a |
| primaryFg | #ffffff | #1f1403 |
| secondary | #f2e4d2 | #26160f |
| secondaryFg | #221210 | #f8ecdc |
| accent | #b8860b | #ef6b6b |
| accentFg | #1a1203 | #2a0505 |
| ring | #8b1a1a | #e8b64a |
| 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 | #8b1a1a | #e8b64a |
| secondaryText | #796a61 | #8b7d71 |
| accentText | #8b630d | #ef6b6b |
| successText | #167539 | #4ade80 |
| warningText | #a54d0a | #fbbf24 |
| dangerText | #c22323 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #8b1a1a | #e8b64a |