# Pho: a MIAN design language

Fresh, herbal, clean. Herb green on a crisp white, chilli-orange accent. Clean and optimistic: health, food, finance and sustainability.

- Family: Rounded · Origin: Vietnam · License: MIAN License (free to use)
- Traits: fresh, herbal, clean, optimistic, healthy · intensity 2/5 · contrast medium · density default. Good for: health, food, sustainability, finance for consumers. Less for: nightlife, luxury.
- Use: `<html data-noodle="pho">` (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/pho.css
- Page: https://mian.ro/noodles/pho

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #15803d: green (deep, saturated). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Accent** #c2410c: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #fbfdfb: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Green with brown and terracotta: a contrasting pair that needs one of the two to dominate. The page 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.
- **Reads as** fresh, herbal, clean, optimistic, healthy.
- **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: "pho").

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

## Designing new components in Pho

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

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

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

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 8px, box 14px, badge 999px
- Density: default · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #fbfdfb | #0a130d |
| surface | #ffffff | #0f1b13 |
| surface2 | #eef5ef | #17271c |
| fg | #0f1f14 | #e7f3ea |
| muted | #54665a | #93aa99 |
| border | #dce8de | #20362a |
| input | #c2d4c6 | #30503d |
| primary | #15803d | #4ade80 |
| primaryFg | #ffffff | #052e16 |
| secondary | #e6f2e8 | #17271c |
| secondaryFg | #14532d | #e7f3ea |
| accent | #c2410c | #fb923c |
| accentFg | #ffffff | #1a0d03 |
| ring | #15803d | #4ade80 |
| 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 | #15783a | #4ade80 |
| secondaryText | #69786d | #7b897f |
| accentText | #b73f0c | #fb923c |
| successText | #15783a | #4ade80 |
| warningText | #a74f0a | #fbbf24 |
| dangerText | #c82524 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #15803d | #4ade80 |