# Mee: a MIAN design language

Golden, round, cheerful. Egg-yolk yellow, pill-shaped controls, rounded type and big friendly corners. Consumer apps, kids, onboarding.

- Family: Rounded · Origin: Malaysia · egg noodles · License: MIAN License (free to use)
- Traits: cheerful, golden, playful, bright, kid-friendly · intensity 3/5 · contrast medium · density comfortable. Good for: kids, education, consumer apps, onboarding. Less for: finance, luxury.
- Use: `<html data-noodle="mee">` (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/mee.css
- Page: https://mian.ro/noodles/mee

## Design philosophy

Mee is yellow egg noodles tossed in a hot wok. The language is golden and cheerful: rich gradient fills, a toasted, charred bottom edge on raised things, fully round pills and pies, and a quick sizzle wiggle when something is pressed or appears.

## Principles

- Golden gradients on primary surfaces (lighter at the top).
- A toasted edge: inset 0 -3px 0 var(--m-char) on raised controls.
- Round everything: pill buttons, pill tables rows, full pie charts.
- Sizzle: a quick wiggle on hover and on entry.

## The language

- **Shape.** 999px fields and badges, 22px containers.
- **Surface.** Warm cream with golden fills and charred edges.
- **Colour.** Egg-yolk yellow primary, teal accent, warm neutrals.
- **Type.** Rounded sans, bold.
- **Motion.** mee-pop: pop in with overshoot, 300ms; mee-sizzle wiggle on hover.
- **Data.** Pill bars, 4px lines with a warm area, a full pie instead of a ring.

## Colour, type and brand

- **Primary** #eab308: yellow and gold (mid, saturated). Optimism, attention, caution. Gold tones add value and ceremony.
- **Accent** #0f766e: teal and cyan (deep, saturated). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Page** #fffdf5: white and paper (pale, saturated). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Yellow and gold with teal and cyan: a contrasting pair that needs one of the two to dominate. 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** cheerful, golden, playful, bright, kid-friendly.
- **Tone of voice.** Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
- **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: "mee").

## Inspired by the noodle

- Yellow egg noodles → golden gradient fills
- Wok-fried → a toasted, charred bottom edge on raised controls
- Round and springy → pill shapes and round charts
- Sizzle → a quick wiggle when things are pressed or appear

## Designing new components in Mee

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

- Fill with linear-gradient(180deg, color-mix(in oklab, var(--mn-primary), #fff 20%), var(--mn-primary)) and add the charred inset edge.
- Use radius 999px for anything under 48px tall.
- Hover: animation mee-sizzle 360ms.

Avoid:

- Cold greys
- Square corners
- Flat single-colour fills on primary elements

Recipe: a selectable tile in this language:

```css
[data-noodle="mee"] .tile {
  padding: 12px 20px; border: 0; border-radius: 999px;
  background: var(--mn-surface); box-shadow: inset 0 -3px 0 var(--m-char);
}
[data-noodle="mee"] .tile[aria-selected="true"] { background: linear-gradient(180deg, color-mix(in oklab, var(--mn-primary), #fff 20%), var(--mn-primary)); color: var(--mn-primary-fg); }
[data-noodle="mee"] .tile:hover { animation: mee-sizzle 360ms ease-in-out; }
```

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

| token | light | dark |
|---|---|---|
| bg | #fffdf5 | #14110a |
| surface | #ffffff | #1c180e |
| surface2 | #fbf3dc | #272114 |
| fg | #231c05 | #fbf3dc |
| muted | #6b6030 | #b8aa7c |
| border | #efe4c4 | #342c1a |
| input | #dccb95 | #4d4226 |
| primary | #eab308 | #facc15 |
| primaryFg | #231c05 | #1c1600 |
| secondary | #231c05 | #fbf3dc |
| secondaryFg | #fffdf5 | #14110a |
| accent | #0f766e | #2dd4bf |
| accentFg | #ffffff | #042f2c |
| ring | #a16207 | #facc15 |
| 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 | #8a6b07 | #facc15 |
| secondaryText | #231c05 | #fbf3dc |
| accentText | #0f766e | #2dd4bf |
| successText | #167839 | #4ade80 |
| warningText | #a84f09 | #fbbf24 |
| dangerText | #c62522 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0f766e | #facc15 |