Yangchun

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.

MinimalChina · Shanghairadius 10px / 16pxcomfortable densitysubtle shadows

Use Yangchun Design language (Markdown)Tokens JSON

Design language

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.

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.

Designing new components in Yangchun

MIAN does not ship every component you will need. To make a new one that belongs in Yangchun, build it from --mn-* tokens inside [data-noodle="yangchun"] and follow these rules.

Do

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

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

The same guide, for AI tools: /ai/noodles/yangchun.md · MCP tool get_design_language.

Colour, type and brand

What Yangchun 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 · Blue

#0071e3 · mid, saturated

Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.

Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.

Accent · Blue

#5856d6 · mid

Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.

Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.

Page · Blue

#f2f2f7 · pale, muted

Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.

Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.

Two tones of blue: harmonious and calm, with little contrast between brand and accent. The page itself 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.

Personality

Reads as refined, friendly, clean, trustworthy, polished. Intensity 2 of 5.

Suits

consumer apps, settings, productivity, health, fintech. Less suited to editorial, raw or brutal brands.

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.

Inspired by the noodle

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

Specimen

The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.

Try your brand colour

Your own

Open in the studio

Light

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

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

Dark

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

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

Use it

<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="yangchun">

<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/yangchun.css">

<!-- or scope it to one element -->
<section data-noodle="yangchun" 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.

Background#f2f2f7

Surface#ffffff

Muted surface#e9e9ee

Foreground#1c1c1e

Muted text#636366

Border#dedee3

Input border#c7c7cc

Primary#0071e3

On primary#ffffff

Secondary#e9e9ee

Accent#5856d6

Success#1f7a35

Warning#b25000

Danger#d70015

Info#0071a4

Focus ring#0071e3

Typography & shape

--mn-font	-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--mn-font-heading	-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--mn-radius-field / box / badge	10px · 16px · 999px
density	comfortable
shadows	subtle