{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "yangchun",
  "name": "Yangchun",
  "family": "Minimal",
  "origin": "China · Shanghai",
  "tagline": "Clear broth, quietly refined.",
  "description": "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.",
  "inspiration": [
    "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"
  ],
  "traits": {
    "mood": [
      "refined",
      "friendly",
      "clean",
      "trustworthy",
      "polished"
    ],
    "intensity": 2,
    "contrast": "medium",
    "geometry": "rounded rectangles, soft grouped panels",
    "type": "system sans, confident",
    "surface": "grey grouped backgrounds, white cards",
    "motion": "springy, smooth",
    "goodFor": [
      "consumer apps",
      "settings",
      "productivity",
      "health",
      "fintech"
    ],
    "lessFor": [
      "editorial",
      "raw or brutal brands"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "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."
    ],
    "aspects": {
      "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."
    },
    "extend": [
      "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": "[data-noodle=\"yangchun\"] .tile {\n  padding: 14px 16px; border: 0; border-radius: 12px;\n  background: var(--mn-surface); color: var(--mn-fg);\n  transition: opacity 260ms ease-out;\n}\n[data-noodle=\"yangchun\"] .tile:active { opacity: .55; transition-duration: 0ms; }\n[data-noodle=\"yangchun\"] .tile[aria-selected=\"true\"] { color: var(--mn-primary-text); font-weight: 600; }\n[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); }"
  },
  "psychology": {
    "temperature": "cool",
    "colours": [
      {
        "role": "Primary",
        "hex": "#0071e3",
        "family": "Blue",
        "depth": "mid, saturated",
        "says": "Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.",
        "use": "Finance, enterprise, health, anything that must feel safe. Links are expected to be blue.",
        "risk": "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."
      },
      {
        "role": "Accent",
        "hex": "#5856d6",
        "family": "Blue",
        "depth": "mid",
        "says": "Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.",
        "use": "Finance, enterprise, health, anything that must feel safe. Links are expected to be blue.",
        "risk": "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."
      },
      {
        "role": "Page",
        "hex": "#f2f2f7",
        "family": "Blue",
        "depth": "pale, muted",
        "says": "Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.",
        "use": "Finance, enterprise, health, anything that must feel safe. Links are expected to be blue.",
        "risk": "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."
      }
    ],
    "relation": "Two tones of blue: harmonious and calm, with little contrast between brand and accent.",
    "type": {
      "body": {
        "class": "system",
        "name": "System sans (the device’s own typeface)",
        "says": "Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.",
        "use": "Applications, dashboards, anything used daily.",
        "risk": "Carries no brand character at all. The brand must come from colour, shape, words and motion."
      },
      "heading": {
        "class": "system",
        "name": "System sans (the device’s own typeface)",
        "says": "Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.",
        "use": "Applications, dashboards, anything used daily.",
        "risk": "Carries no brand character at all. The brand must come from colour, shape, words and motion."
      },
      "weight": 700,
      "summary": "One voice throughout: system sans (the device’s own typeface). Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "refined",
        "friendly",
        "clean",
        "trustworthy",
        "polished"
      ],
      "intensity": 2,
      "dimensions": [],
      "suits": [
        "consumer apps",
        "settings",
        "productivity",
        "health",
        "fintech"
      ],
      "lessFor": [
        "editorial",
        "raw or brutal brands"
      ],
      "tone": "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."
  },
  "url": "https://mian.ro/noodles/yangchun",
  "markdownUrl": "https://mian.ro/ai/noodles/yangchun.md",
  "stylesheet": "https://mian.ro/dist/noodles/yangchun.css",
  "usage": "<html data-noodle=\"yangchun\">",
  "fonts": {
    "sans": "-apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", system-ui, \"Segoe UI Variable Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "heading": "-apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"SF Pro Display\", system-ui, \"Segoe UI Variable Text\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 700,
  "radius": {
    "field": "10px",
    "box": "16px",
    "badge": "999px"
  },
  "shadow": "subtle",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#f2f2f7",
    "surface": "#ffffff",
    "surface2": "#e9e9ee",
    "fg": "#1c1c1e",
    "muted": "#636366",
    "border": "#dedee3",
    "input": "#c7c7cc",
    "primary": "#0071e3",
    "primaryFg": "#ffffff",
    "secondary": "#e9e9ee",
    "secondaryFg": "#1c1c1e",
    "accent": "#5856d6",
    "accentFg": "#ffffff",
    "ring": "#0071e3",
    "success": "#1f7a35",
    "successFg": "#ffffff",
    "warning": "#b25000",
    "warningFg": "#ffffff",
    "danger": "#d70015",
    "dangerFg": "#ffffff",
    "info": "#0071a4",
    "infoFg": "#ffffff",
    "primaryText": "#0367cb",
    "secondaryText": "#6e6e71",
    "accentText": "#5856d6",
    "successText": "#1f7835",
    "warningText": "#ac4e01",
    "dangerText": "#cc0216",
    "infoText": "#016fa1",
    "link": "#5856d6"
  },
  "dark": {
    "bg": "#000000",
    "surface": "#1c1c1e",
    "surface2": "#2c2c2e",
    "fg": "#f5f5f7",
    "muted": "#a1a1a6",
    "border": "#38383a",
    "input": "#545458",
    "primary": "#0071e3",
    "primaryFg": "#ffffff",
    "secondary": "#2c2c2e",
    "secondaryFg": "#f5f5f7",
    "accent": "#7d7aff",
    "accentFg": "#0b0a2e",
    "ring": "#409cff",
    "success": "#30d158",
    "successFg": "#04210c",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#ff6961",
    "dangerFg": "#2a0402",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#3b91e8",
    "secondaryText": "#88888a",
    "accentText": "#8784fe",
    "successText": "#30d158",
    "warningText": "#fbbf24",
    "dangerText": "#ff6961",
    "infoText": "#38bdf8",
    "link": "#7d7aff"
  },
  "css": "[data-noodle=\"yangchun\"] {\n  --mn-bg: light-dark(#f2f2f7, #000000);\n  --mn-surface: light-dark(#ffffff, #1c1c1e);\n  --mn-surface-2: light-dark(#e9e9ee, #2c2c2e);\n  --mn-fg: light-dark(#1c1c1e, #f5f5f7);\n  --mn-muted: light-dark(#636366, #a1a1a6);\n  --mn-border: light-dark(#dedee3, #38383a);\n  --mn-input: light-dark(#c7c7cc, #545458);\n  --mn-primary: light-dark(#0071e3, #0071e3);\n  --mn-primary-fg: light-dark(#ffffff, #ffffff);\n  --mn-secondary: light-dark(#e9e9ee, #2c2c2e);\n  --mn-secondary-fg: light-dark(#1c1c1e, #f5f5f7);\n  --mn-accent: light-dark(#5856d6, #7d7aff);\n  --mn-accent-fg: light-dark(#ffffff, #0b0a2e);\n  --mn-ring: light-dark(#0071e3, #409cff);\n  --mn-success: light-dark(#1f7a35, #30d158);\n  --mn-success-fg: light-dark(#ffffff, #04210c);\n  --mn-warning: light-dark(#b25000, #fbbf24);\n  --mn-warning-fg: light-dark(#ffffff, #1f1300);\n  --mn-danger: light-dark(#d70015, #ff6961);\n  --mn-danger-fg: light-dark(#ffffff, #2a0402);\n  --mn-info: light-dark(#0071a4, #38bdf8);\n  --mn-info-fg: light-dark(#ffffff, #03202d);\n  --mn-primary-text: light-dark(#0367cb, #3b91e8);\n  --mn-secondary-text: light-dark(#6e6e71, #88888a);\n  --mn-accent-text: light-dark(#5856d6, #8784fe);\n  --mn-success-text: light-dark(#1f7835, #30d158);\n  --mn-warning-text: light-dark(#ac4e01, #fbbf24);\n  --mn-danger-text: light-dark(#cc0216, #ff6961);\n  --mn-info-text: light-dark(#016fa1, #38bdf8);\n  --mn-link: light-dark(#5856d6, #7d7aff);\n  --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;\n  --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;\n  --mn-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --mn-heading-weight: 700;\n  --mn-radius-field: 10px;\n  --mn-radius-box: 16px;\n  --mn-radius-badge: 999px;\n  --mn-shadow-sm: 0 1px 2px rgb(0 0 0 / .05);\n  --mn-shadow-md: 0 2px 6px -1px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);\n  --mn-shadow-lg: 0 12px 32px -8px rgb(0 0 0 / .18), 0 4px 8px -4px rgb(0 0 0 / .08);\n  --mn-size-xs: 28px;\n  --mn-size-sm: 34px;\n  --mn-size-md: 42px;\n  --mn-size-lg: 50px;\n  --mn-text-sm: 15px;\n  --mn-surface-alpha: 100%;\n  --mn-backdrop: none;\n  --mn-bg-image: none;\n}\n"
}