Nagashi
Down a bamboo chute in running water. In nagashi-sōmen, noodles are sent down a split-bamboo chute in cold running water and caught with chopsticks as they pass. Nagashi is a flowing-water glass system: clear, blue-tinted glass, a current that runs along progress bars and hovered surfaces, indicators that glide downstream, and things that arrive on a gentle curve.
Design language
Nagashi is running water in a bamboo chute. Noodles are carried down a split-bamboo channel in cold water and caught as they pass, so surfaces are clear, blue-tinted glass that a current runs across on hover, tracks and tabs are open channels, indicators glide downstream as beads of glass, progress bars carry flowing water, and things arrive from upstream on a gentle curve.
Principles
- The current (--ng-flow): a moving sheen across buttons and cards on hover, and continuously along progress.
- Channels: fields, tracks and tab lists are recessed (--ng-channel); what sits in them is a raised bead of glass (--ng-edge).
- Glide: indicators travel 600ms on a soft curve.
- Water blue with a bamboo-green accent, over a light water gradient.
Shape
14px fields, 22px surfaces, pills for tabs, badges and channels.
Surface
Clear blue-tinted glass (55%) with bright top rims.
Colour
Water blue primary, bamboo green accent.
Type
Sans at 600.
Motion
nagashi-in: from upstream on a curve (420ms); nagashi-flow for currents.
Data
Columns of water with a bright surface; lines with a soft shadow beneath.
Designing new components in Nagashi
MIAN does not ship every component you will need. To make a new one that belongs in Nagashi, build it from --mn-* tokens inside [data-noodle="nagashi"] and follow these rules.
Do
- Glass: background-color: var(--ng-water); backdrop-filter: var(--ng-blur); box-shadow: var(--ng-edge).
- Hover: background-image: var(--ng-flow) at 300% size, animated with nagashi-flow.
- Anything that holds something is a channel (--ng-channel); the held thing is a bead (--ng-edge).
Avoid
- Opaque panels
- Hard corners
- Snappy or stepped motion
Recipe: a selectable tile
[data-noodle="nagashi"] .tile {
padding: 14px 18px; border: 0; border-radius: 22px;
background: var(--ng-flow) 100% 0 / 300% 100% no-repeat, var(--ng-water);
-webkit-backdrop-filter: var(--ng-blur); backdrop-filter: var(--ng-blur); box-shadow: var(--ng-edge);
}
[data-noodle="nagashi"] .tile:hover { animation: nagashi-flow 1.2s var(--mn-ease) both; }The same guide, for AI tools: /ai/noodles/nagashi.md · MCP tool get_design_language.
Colour, type and brand
What Nagashi 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 · Blue
Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.
Accent · 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.
Page · 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.
Blue with green: a contrasting pair that needs one of the two to dominate. The page itself is cool.
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 flowing, fresh, summer, glass, lively. Intensity 3 of 5.
Suits
travel, summer events, consumer apps, drinks. Less suited to serious b2b.
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
- Cold running water→clear blue-tinted glass with a moving sheen that flows along on hover
- A split-bamboo chute→long, open channels: rounded tracks, tabs in a channel, a bamboo-green accent
- Noodles carried by the current→indicators glide with the flow; items arrive on a gentle curve from upstream
- Caught with chopsticks→a quick, soft catch when pressed
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 Nagashi. 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="nagashi">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/nagashi.css">
<!-- or scope it to one element -->
<section data-noodle="nagashi" 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 | 14px · 22px · 999px |
| density | comfortable |
| shadows | soft |