Udon
Thick, soft, warm. Cream surfaces, generous rounding and a terracotta primary. Comfortable density and soft depth for friendly, tactile products.
Design language
Udon is thick, soft and chewy, glossy in hot broth. The language is tactile: raised controls have a visible thickness that compresses when pressed and springs back, everything is plump and generously rounded, and data is drawn with fat, friendly marks. It should feel good to press.
Principles
- Thickness is real: raised elements carry a 5px darker bottom edge (--_edge) that shrinks when pressed.
- Squash and stretch: presses squish, releases spring back with overshoot.
- Plump over thin: fat rings, fat bars, pillow knobs, chunky separated table rows.
- Warm and glossy: cream surfaces and a soft highlight on the top of raised things.
Shape
12px fields, 18px containers, pill badges. Knobs and thumbs are large pillows.
Surface
Cream page, white raised surfaces with the thickness edge and an inset top highlight (rgb(255 255 255/.28)).
Colour
Terracotta primary, teal accent, warm browns and creams.
Type
Rounded sans, bold headings.
Motion
udon-squish entrance with overshoot (cubic-bezier(.34,1.4,.64,1)), 320ms; knobs squish on toggle.
Data
Pill-ended bars with 10px gaps, 7px lines with points, thick donuts.
Designing new components in Udon
MIAN does not ship every component you will need. To make a new one that belongs in Udon, build it from --mn-* tokens inside [data-noodle="udon"] and follow these rules.
Do
- Raise the component: box-shadow 0 5px 0 var(--_edge) where --_edge is the fill mixed 25% with black; translate it up 3px on hover and down 4px on press while the edge shrinks.
- Use the rounded font and radius 12–18px.
- Selected = filled with the primary and its edge; unselected = white with a border-coloured edge.
Avoid
- Hairlines
- Sharp corners
- Flat, weightless presses
- Thin chart marks
Recipe: a selectable tile
[data-noodle="udon"] .tile {
--_edge: color-mix(in oklab, var(--mn-border), #000 12%);
padding: 14px 16px; border-radius: 16px; background: var(--mn-surface);
box-shadow: 0 5px 0 var(--_edge), inset 0 2px 0 rgb(255 255 255 / .28);
transition: translate 180ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 180ms;
}
[data-noodle="udon"] .tile:hover { translate: 0 -3px; box-shadow: 0 8px 0 var(--_edge); }
[data-noodle="udon"] .tile:active { translate: 0 4px; box-shadow: 0 1px 0 var(--_edge); }The same guide, for AI tools: /ai/noodles/udon.md · MCP tool get_design_language.
Colour, type and brand
What Udon 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 · 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.
Accent · Teal and cyan
Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
Watch for: Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered.
Page · White and paper
Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
Watch for: Empty is not the same as calm: white space needs a grid behind it.
Brown and terracotta against teal and cyan, 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 warm, friendly, soft, tactile, cosy. Intensity 2 of 5. Brand dimension: sincerity.
Suits
consumer products, food, home, onboarding. Less suited to enterprise data, legal.
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
- Thick and chewy→controls with a visible 5px "thickness" edge that compresses when pressed
- Soft and springy→squash-and-stretch press and release
- Glossy in broth→a soft top highlight on every raised surface
- Chunky→fat bars, fat rings, fat switch knobs, generous rounding
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 Udon. 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="udon">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/udon.css">
<!-- or scope it to one element -->
<section data-noodle="udon" 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 | 12px · 18px · 999px |
| density | comfortable |
| shadows | soft |