# Udon: a MIAN design language

Thick, soft, warm. Cream surfaces, generous rounding and a terracotta primary. Comfortable density and soft depth for friendly, tactile products.

- Family: Rounded · Origin: Japan · License: MIAN License (free to use)
- Traits: warm, friendly, soft, tactile, cosy · intensity 2/5 · contrast medium · density comfortable. Good for: consumer products, food, home, onboarding. Less for: enterprise data, legal.
- Use: `<html data-noodle="udon">` (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/udon.css
- Page: https://mian.ro/noodles/udon

## Design philosophy

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.

## The language

- **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.

## Colour, type and brand

- **Primary** #c2410c: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Accent** #0f766e: teal and cyan (deep, saturated). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Page** #faf7f2: white and paper (pale). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Brown and terracotta against teal and cyan, 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** warm, friendly, soft, tactile, cosy (brand dimension: sincerity).
- **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.
- 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: "udon").

## 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

## Designing new components in Udon

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

- 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 in this language:

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

## 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 12px, box 18px, badge 999px
- Density: comfortable · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #faf7f2 | #1a1612 |
| surface | #ffffff | #221d18 |
| surface2 | #f1ebe1 | #2d2620 |
| fg | #2b2520 | #f5efe6 |
| muted | #6c6257 | #b3a795 |
| border | #e8e0d4 | #3a322a |
| input | #d6cbbb | #4d4338 |
| primary | #c2410c | #fb923c |
| primaryFg | #ffffff | #1a0d03 |
| secondary | #f1ebe1 | #2d2620 |
| secondaryFg | #2b2520 | #f5efe6 |
| accent | #0f766e | #2dd4bf |
| accentFg | #ffffff | #042f2c |
| ring | #c2410c | #fb923c |
| 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 | #b93f0d | #fb923c |
| secondaryText | #767069 | #8d867f |
| accentText | #0f766e | #2dd4bf |
| successText | #17793b | #4ade80 |
| warningText | #a94f0b | #fbbf24 |
| dangerText | #c72625 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #c2410c | #fb923c |