# Mixian: a MIAN design language

Round, soft, served on small plates. Mixian are Yunnan’s round rice noodles, smooth, white and springy. In crossing-the-bridge noodles they arrive with a bowl of very hot broth and a table of small plates, and each ingredient is slid into the bowl one at a time. Mixian is a small-plates system: everything round, every choice on its own separate plate, and things arriving one by one.

- Family: Rounded · Origin: China · Yunnan · License: MIAN License (free to use)
- Traits: round, soft, tidy, friendly, modular · intensity 2/5 · contrast low · density comfortable. Good for: food delivery, menus, modular dashboards, consumer apps. Less for: editorial.
- Use: `<html data-noodle="mixian">` (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/mixian.css
- Page: https://mian.ro/noodles/mixian

## Design philosophy

Mixian is a table of small plates. The round rice noodles arrive with hot broth and many small dishes that are slid in one at a time, so the interface is round and modular: every choice sits on its own separate round plate, buttons in a group, segments of a toggle, tabs, table rows, list items, stats and avatars are split apart with small gaps, and they arrive one after another.

## Principles

- Round: 999px controls and rows, circles for checkboxes, icons buttons and OTP boxes; 28px panels.
- Separate plates: never merge a group into one bar, gap 6–8px and a plate shadow on each.
- Arrive one by one: a 50ms stagger (mixian-in, scale .92 → 1).
- Porcelain: cobalt on warm white, soft plate shadows (--mx-plate).

## The language

- **Shape.** Pills and circles; rows are pill-shaped plates.
- **Surface.** White plates with --mx-plate on a warm page; no borders.
- **Colour.** Porcelain cobalt primary, chilli-oil accent.
- **Type.** Rounded sans at 600–650.
- **Motion.** mixian-in with stagger; presses shrink to .95 with a gentle spring.
- **Data.** Round bars with gaps and visible round points.

## Colour, type and brand

- **Primary** #1f3fa6: blue (mid). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #b3541e: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #f8f6f1: yellow and gold (pale, muted). Optimism, attention, caution. Gold tones add value and ceremony.
- **Scheme.** Blue against brown and terracotta, close to complementary: strong contrast, so the accent must stay rare. The page is warm.
- **Type.** One voice throughout: rounded sans. Headings are semibold, which reads as confident without shouting. Friendly, soft, safe, young.
- **Reads as** round, soft, tidy, friendly, modular.
- **Tone of voice.** Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
- **Logo.** Round marks fit: a circular symbol or a soft, lowercase wordmark.
- 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: "mixian").

## Inspired by the noodle

- Round in cross-section → perfect circles and full pills everywhere
- A table of small plates → groups split into separate round plates with gaps (button groups, toggles, tabs, table rows, lists)
- Ingredients added one at a time → items arrive one after another in a short stagger
- Blue-and-white porcelain bowls → porcelain cobalt on warm white

## Designing new components in Mixian

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

- Split any group into separate items: display: flex/grid with gap: 6–8px; each item gets border-radius: 999px (or 20–28px) and box-shadow: var(--mx-plate).
- Stagger arrivals with animation: mixian-in 320ms both and 50ms per item.
- Selected = filled with var(--mn-primary).

Avoid:

- Joined segmented bars
- Square corners
- Borders instead of plates

Recipe: a selectable tile in this language:

```css
[data-noodle="mixian"] .tiles { display: flex; flex-wrap: wrap; gap: 8px; }
[data-noodle="mixian"] .tile {
  padding: 10px 18px; border: 0; border-radius: 999px; background: var(--mn-surface); box-shadow: var(--mx-plate);
  animation: mixian-in 320ms cubic-bezier(.3, 1.3, .5, 1) both;
}
[data-noodle="mixian"] .tile:nth-child(2) { animation-delay: 50ms; }
[data-noodle="mixian"] .tile[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }
```

## Tokens

- Fonts: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
- Heading font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
- Radius: field 999px, box 28px, badge 999px
- Density: comfortable · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #f8f6f1 | #12110f |
| surface | #ffffff | #1a1916 |
| surface2 | #efece5 | #24221e |
| fg | #1c1b19 | #f3f0ea |
| muted | #625e57 | #aaa398 |
| border | #e6e1d8 | #302d28 |
| input | #cfc8bc | #48443c |
| primary | #1f3fa6 | #8fa8f5 |
| primaryFg | #ffffff | #0b1433 |
| secondary | #efece5 | #24221e |
| secondaryFg | #1c1b19 | #f3f0ea |
| accent | #b3541e | #f0a070 |
| accentFg | #ffffff | #2a1204 |
| ring | #1f3fa6 | #8fa8f5 |
| 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 | #1f3fa6 | #8fa8f5 |
| secondaryText | #706f6b | #878580 |
| accentText | #a74f1e | #f0a070 |
| successText | #16783a | #4ade80 |
| warningText | #a84f0a | #fbbf24 |
| dangerText | #c52524 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1f3fa6 | #8fa8f5 |