Mee
Golden, round, cheerful. Egg-yolk yellow, pill-shaped controls, rounded type and big friendly corners. Consumer apps, kids, onboarding.
Design language
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.
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.
Designing new components in Mee
MIAN does not ship every component you will need. To make a new one that belongs in Mee, build it from --mn-* tokens inside [data-noodle="mee"] and follow these rules.
Do
- 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
[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; }The same guide, for AI tools: /ai/noodles/mee.md · MCP tool get_design_language.
Colour, type and brand
What Mee 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 · 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.
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.
Yellow and gold with teal and cyan: a contrasting pair that needs one of the two to dominate. 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 cheerful, golden, playful, bright, kid-friendly. Intensity 3 of 5.
Suits
kids, education, consumer apps, onboarding. Less suited to finance, luxury.
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.
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
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 Mee. 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="mee">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/mee.css">
<!-- or scope it to one element -->
<section data-noodle="mee" 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 · 22px · 999px |
| density | comfortable |
| shadows | soft |