Hiyamugi
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.
Design language
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.
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.
Designing new components in Hiyamugi
MIAN does not ship every component you will need. To make a new one that belongs in Hiyamugi, build it from --mn-* tokens inside [data-noodle="hiyamugi"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/hiyamugi.md · MCP tool get_design_language.
Colour, type and brand
What Hiyamugi 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 · Black and ink
Authority, precision, luxury. It makes everything next to it look more deliberate.
Watch for: Pure #000 on pure #fff is harsh on long text. Soften one of the two slightly, or warm both.
Accent · Magenta and pink
Play, tenderness, boldness. Pale pinks are gentle; hot magenta is loud and modern.
Watch for: Heavily gendered in some markets; test with the real audience instead of assuming.
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.
A neutral primary with one magenta and pink accent: the accent means “look here” precisely because nothing else is coloured. The page itself 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.
Personality
Reads as quiet, white, fresh, delicate, japanese. Intensity 1 of 5.
Suits
studios, product sites, portfolios, minimal shops. Less suited to loud campaigns.
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.
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
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 Hiyamugi. 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="hiyamugi">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/hiyamugi.css">
<!-- or scope it to one element -->
<section data-noodle="hiyamugi" 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 · 12px · 6px |
| density | comfortable |
| shadows | subtle |