# Hiyamugi: a MIAN design language

White, cold, one coloured strand. Hiyamugi are white wheat noodles served cold, a bundle at a time; a few pink and green strands are mixed into every bundle. Hiyamugi is a quiet white system in which exactly one coloured strand marks what matters.

- Family: Minimal · Origin: Japan · License: MIAN License (free to use)
- Traits: quiet, white, fresh, delicate, japanese, minimal · intensity 1/5 · contrast medium · density comfortable. Good for: studios, product sites, portfolios, minimal shops. Less for: loud campaigns.
- Use: `<html data-noodle="hiyamugi">` (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/hiyamugi.css
- Page: https://mian.ro/noodles/hiyamugi

## Design philosophy

Hiyamugi is a quiet white bundle with one coloured strand in it. The interface is almost entirely white, grey and charcoal; in each component, exactly one thin coloured line, the strand, marks what matters: the focused field, the active tab, the primary action, the current value. The restraint is the design: if everything had a strand, nothing would.

## Principles

- One strand per component: a 2px line in the accent (pink), or green for success and a second series.
- Everything else is neutral: white surfaces, 1px light borders, charcoal type.
- Space over structure: comfortable density, generous padding, few lines.
- Strands are laid, not faded: they draw in from the left (scaleX) over ~300–600ms.

## The language

- **Shape.** 8px fields, 12px containers, 6px badges. Thin bars (≤10px wide) in charts.
- **Surface.** White with 1px #e8e8e6 borders; a short strand (2.5rem × 2px) lies across the top edge of each card.
- **Colour.** Charcoal primary, a pink strand (accent), a green strand (success). Nothing else is coloured.
- **Type.** Clean sans, headings at 500 with slight negative tracking.
- **Motion.** hiyamugi-in: 4px rise and fade, 320ms; hiyamugi-lay draws strands from the left.
- **Data.** Grey strand-thin bars with a pink highlight; 1.5px lines; thin donut rings.

## Colour, type and brand

- **Primary** #1b1b1d: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #c92a63: magenta and pink (mid). Play, tenderness, boldness. Pale pinks are gentle; hot magenta is loud and modern.
- **Page** #fbfbfa: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A neutral primary with one magenta and pink accent: the accent means “look here” precisely because nothing else is coloured. The page is neutral.
- **Type.** One voice throughout: neutral sans. Headings are medium, which reads as calm and assured. Clear, modern, impartial. The voice of software and signage.
- **Reads as** quiet, white, fresh, delicate, japanese.
- **Tone of voice.** Quiet. Plain statements in sentence case, no exclamation marks, numbers with their units. Let space do the persuading.
- **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: "hiyamugi").

## Inspired by the noodle

- A bundle of white strands → a calm white-and-grey interface with generous space
- One pink strand in the bundle → a single 2px coloured line marks the active, focused or important thing, never more than one per component
- Pink and green strands → the pink strand for action, the green for success and a second series
- Served cold and still → slow, gentle motion; strands are laid across from the left

## Designing new components in Hiyamugi

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

- Build the component in white and grey first. Then decide which single element matters and give only it the strand: box-shadow: inset 0 -2px 0 var(--mn-accent) (or a 2px ::before line).
- On hover, quiet elements may show the strand temporarily.
- Use the green strand (var(--mn-success)) only for success or a second data series.

Avoid:

- More than one strand in a component
- Coloured fills
- Heavy borders or shadows
- Dense layouts

Recipe: a selectable tile in this language:

```css
[data-noodle="hiyamugi"] .tile {
  padding: 16px 18px; border: 1px solid var(--mn-border); border-radius: 12px; background: var(--mn-surface);
  transition: box-shadow 300ms cubic-bezier(.25, .1, .25, 1);
}
[data-noodle="hiyamugi"] .tile:hover,
[data-noodle="hiyamugi"] .tile[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--mn-accent); }
```

## 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 12px, badge 6px
- Density: comfortable · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #fbfbfa | #0e0e10 |
| surface | #ffffff | #161618 |
| surface2 | #f3f3f2 | #1f1f22 |
| fg | #1b1b1d | #f4f4f5 |
| muted | #616166 | #a1a1a8 |
| border | #e8e8e6 | #2a2a2e |
| input | #d3d3d1 | #44444a |
| primary | #1b1b1d | #f4f4f5 |
| primaryFg | #ffffff | #1b1b1d |
| secondary | #f3f3f2 | #1f1f22 |
| secondaryFg | #1b1b1d | #f4f4f5 |
| accent | #c92a63 | #f27aa6 |
| accentFg | #ffffff | #2a0715 |
| ring | #c92a63 | #f27aa6 |
| 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 | #1b1b1d | #f4f4f5 |
| secondaryText | #717172 | #818183 |
| accentText | #bf295f | #f27aa6 |
| successText | #15783a | #4ade80 |
| warningText | #a84f0b | #fbbf24 |
| dangerText | #c52525 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1b1b1d | #f4f4f5 |