# Yangchun: a MIAN design language

Clear broth, quietly refined. Yangchun mian is Shanghai’s plain noodle in a clear broth with a little lard and scallion, nothing extra, everything exactly in place. Yangchun is a native-feeling system: grouped inset surfaces, segmented controls, pill switches, round checkmarks, frosted menus and spring motion.

- Family: Minimal · Origin: China · Shanghai · License: MIAN License (free to use)
- Traits: refined, friendly, clean, trustworthy, polished · intensity 2/5 · contrast medium · density comfortable. Good for: consumer apps, settings, productivity, health, fintech. Less for: editorial, raw or brutal brands.
- Use: `<html data-noodle="yangchun">` (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/yangchun.css
- Page: https://mian.ro/noodles/yangchun

## Design philosophy

Yangchun is Shanghai’s plain noodle in clear broth, and the interface that feels like the device it runs on: familiar controls in their expected places, grouped on quiet surfaces, with nothing added for decoration. Hierarchy comes from grouping, weight and spacing rather than from lines and colour. Every interaction answers instantly and settles with a soft spring.

## Principles

- Group, don’t box: related things sit together on one white surface on a grey page, separated by hairlines that start where the text starts.
- Familiar beats clever: switches, segmented controls, round checkmarks and sheets behave exactly as people expect on their phone.
- One accent colour, used for what can be tapped. Everything else is black, grey and white.
- Touch-sized: controls are at least 42px tall and generously padded.
- Pressing dims, it does not move: the highlight is instant, the release fades.

## The language

- **Shape.** Continuous rounded corners: 10px fields, 12px buttons, 16px grouped cards, full pills for small buttons and badges. Checkboxes are circles.
- **Surface.** Grey page (surface-2 family), white grouped surfaces, no borders, no card shadows. Overlays (menus, popovers, toasts) are frosted: 80% surface with a strong backdrop blur and a hairline edge.
- **Colour.** A single blue for interactive elements, green for “on”, red for destructive. Tinted variants are the accent at 12–16% over the surface.
- **Type.** The system font. Semibold (600) for controls and titles, bold (700) large titles with slightly tight tracking (−0.022em). Section headers are small, uppercase, muted.
- **Motion.** Spring curve cubic-bezier(.32,.72,0,1). Entrances scale up from 96.5% and fade; dialogs settle in from 112%; sheets slide with the same spring. 200–380ms.
- **Data.** Rounded 5px bars on a hairline grid, the highlighted bar solid and the rest a 28% tint; a 2.5px line with a soft area beneath; thick activity-ring donuts; tooltips are frosted pills.

## Colour, type and brand

- **Primary** #0071e3: blue (mid, saturated). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #5856d6: blue (mid). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Page** #f2f2f7: blue (pale, muted). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Scheme.** Two tones of blue: harmonious and calm, with little contrast between brand and accent. The page is cool.
- **Type.** One voice throughout: system sans (the device’s own typeface). Headings are semibold, which reads as confident without shouting. Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.
- **Reads as** refined, friendly, clean, trustworthy, polished.
- **Tone of voice.** Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
- **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: "yangchun").

## Inspired by the noodle

- A clear broth you can see to the bottom of → quiet grouped surfaces, nothing decorative, hierarchy by grouping
- Noodles folded neatly into the bowl → inset lists whose hairline separators start where the text starts
- An everyday bowl eaten every morning → controls people already know: segmented tabs, 51×31 switches, round checkmarks, sheets with a grabber
- Soft wheat in warm broth → continuous rounded corners, springy sheets, dialogs that settle in from slightly larger

## Designing new components in Yangchun

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

- Put the new component on a white grouped surface (var(--mn-surface), radius 12–16px, no border) and separate rows with 1px var(--yc-sep) lines inset 1rem from the leading edge.
- Use a gray fill (color-mix(in oklab, #787880 16%, transparent)) for wells, inputs and unselected segments, never an outline.
- Selected state = a white “thumb” with the lift shadow (0 3px 8px rgb(0 0 0/.12), 0 3px 1px rgb(0 0 0/.04)) inside a gray track, or the accent colour for text.
- Pressed state: opacity .55 with no transition; release fades back over ~260ms.
- Anything that floats is frosted and enters with scale(.965) → 1 on the spring curve.

Avoid:

- Visible borders around controls or cards
- More than one accent colour on screen
- Bouncy or playful overshoot
- Transform-based press effects
- Decorative gradients or textures

Recipe: a selectable tile in this language:

```css
[data-noodle="yangchun"] .tile {
  padding: 14px 16px; border: 0; border-radius: 12px;
  background: var(--mn-surface); color: var(--mn-fg);
  transition: opacity 260ms ease-out;
}
[data-noodle="yangchun"] .tile:active { opacity: .55; transition-duration: 0ms; }
[data-noodle="yangchun"] .tile[aria-selected="true"] { color: var(--mn-primary-text); font-weight: 600; }
[data-noodle="yangchun"] .tile + .tile { box-shadow: inset 1rem 0 0 var(--mn-surface), inset 0 1px 0 color-mix(in oklab, var(--mn-fg) 14%, transparent); }
```

## Tokens

- Fonts: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 10px, box 16px, badge 999px
- Density: comfortable · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #f2f2f7 | #000000 |
| surface | #ffffff | #1c1c1e |
| surface2 | #e9e9ee | #2c2c2e |
| fg | #1c1c1e | #f5f5f7 |
| muted | #636366 | #a1a1a6 |
| border | #dedee3 | #38383a |
| input | #c7c7cc | #545458 |
| primary | #0071e3 | #0071e3 |
| primaryFg | #ffffff | #ffffff |
| secondary | #e9e9ee | #2c2c2e |
| secondaryFg | #1c1c1e | #f5f5f7 |
| accent | #5856d6 | #7d7aff |
| accentFg | #ffffff | #0b0a2e |
| ring | #0071e3 | #409cff |
| success | #1f7a35 | #30d158 |
| successFg | #ffffff | #04210c |
| warning | #b25000 | #fbbf24 |
| warningFg | #ffffff | #1f1300 |
| danger | #d70015 | #ff6961 |
| dangerFg | #ffffff | #2a0402 |
| info | #0071a4 | #38bdf8 |
| infoFg | #ffffff | #03202d |
| primaryText | #0367cb | #3b91e8 |
| secondaryText | #6e6e71 | #88888a |
| accentText | #5856d6 | #8784fe |
| successText | #1f7835 | #30d158 |
| warningText | #ac4e01 | #fbbf24 |
| dangerText | #cc0216 | #ff6961 |
| infoText | #016fa1 | #38bdf8 |
| link | #5856d6 | #7d7aff |