Pho
Fresh, herbal, clean. Herb green on a crisp white, chilli-orange accent. Clean and optimistic: health, food, finance and sustainability.
Design language
Pho is flat rice ribbons in a clear broth, served with a plate of fresh herbs. The language is fresh and light: flat borderless surfaces lightly tinted like clear broth, leaf-shaped corners (two round, two sharp), ribbon bands, and brisk motion where things unfurl like a leaf.
Principles
- The leaf corner: opposite corners round (16px) and sharp (3px), on buttons, cards, alerts and table wraps.
- Flat and clear: tinted surfaces, no borders where a tint will do.
- Herb green for action, chilli orange for accent.
- Unfurl, don’t drop: entrances rotate slightly open from a corner.
Shape
Leaf radii (16px 3px), leaf-shaped radios rotated 45°, leaf-tipped bars.
Surface
White with a 3% herb tint; flat ribbon bands for headers.
Colour
Herb green primary, chilli orange accent, crisp white.
Type
Clean sans, fresh and open.
Motion
pho-unfurl: rotate from −4° with fade, 260ms. Switch knobs turn into leaves when on.
Data
Leaf-tipped bars, a spinning-leaf spinner, 2.5px lines.
Designing new components in Pho
MIAN does not ship every component you will need. To make a new one that belongs in Pho, build it from --mn-* tokens inside [data-noodle="pho"] and follow these rules.
Do
- Give containers border-radius: 16px 3px (or 10px 2px when small), no border, a light primary tint.
- Rotate small indicators 45° to read as leaves (and give them margin so the tips stay in their box).
- Enter with a small rotation from the top-left corner.
Avoid
- Uniform radii
- Heavy borders
- Dark, muddy colours
Recipe: a selectable tile
[data-noodle="pho"] .tile {
padding: 12px 16px; border: 0; border-radius: 16px 3px;
background: color-mix(in oklab, var(--mn-primary) 4%, var(--mn-surface));
}
[data-noodle="pho"] .tile[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }The same guide, for AI tools: /ai/noodles/pho.md · MCP tool get_design_language.
Colour, type and brand
What Pho 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 · Green
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
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 · 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.
Green with brown and terracotta: a contrasting pair that needs one of the two to dominate. The page itself is neutral.
Type
One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting. Clear, modern, impartial. The voice of software and signage.
Personality
Reads as fresh, herbal, clean, optimistic, healthy. Intensity 2 of 5.
Suits
health, food, sustainability, finance for consumers. Less suited to nightlife, luxury.
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
- Flat rice ribbons→flat, borderless, ribbon-like bands
- The herb plate→leaf-shaped corners on buttons, badges and knobs
- Clear broth→lightly tinted, transparent-feeling surfaces
- Fresh→brisk motion, leaves that unfurl into view
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 Pho. 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="pho">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/pho.css">
<!-- or scope it to one element -->
<section data-noodle="pho" 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-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-font-heading | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-radius-field / box / badge | 8px · 14px · 999px |
| density | default |
| shadows | subtle |