Mixian
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.
Design language
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).
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.
Designing new components in Mixian
MIAN does not ship every component you will need. To make a new one that belongs in Mixian, build it from --mn-* tokens inside [data-noodle="mixian"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/mixian.md · MCP tool get_design_language.
Colour, type and brand
What Mixian 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
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 · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
Page · Yellow and gold
Optimism, attention, caution. Gold tones add value and ceremony.
Watch for: The lightest hue: white text on yellow fails, so yellow always carries dark text. Large yellow areas tire the eye.
Blue against brown and terracotta, close to complementary: strong contrast, so the accent must stay rare. The page itself is warm.
Type
One voice throughout: rounded sans. Headings are semibold, which reads as confident without shouting. Friendly, soft, safe, young.
Personality
Reads as round, soft, tidy, friendly, modular. Intensity 2 of 5.
Suits
food delivery, menus, modular dashboards, consumer apps. Less suited to editorial.
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.
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
Specimen
The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
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
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
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
This palette on Mixian. Load it after mian.css and put data-brand on the same element as data-noodle.
Use it
<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="mixian">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/mixian.css">
<!-- or scope it to one element -->
<section data-noodle="mixian" 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.
Typography & shape
| --mn-font | ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif |
| --mn-font-heading | ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif |
| --mn-radius-field / box / badge | 999px · 28px · 999px |
| density | comfortable |
| shadows | soft |