# Nagashi: a MIAN design language

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.

- Family: Glass · Origin: Japan · flowing sōmen · License: MIAN License (free to use)
- Traits: flowing, fresh, summer, glass, lively · intensity 3/5 · contrast medium · density comfortable. Good for: travel, summer events, consumer apps, drinks. Less for: serious b2b.
- Use: `<html data-noodle="nagashi">` (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/nagashi.css
- Page: https://mian.ro/noodles/nagashi

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #0b5f8f: blue (mid, saturated). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #3d6b1f: green (deep). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #eef6fa: teal and cyan (pale). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Scheme.** Blue with green: a contrasting pair that needs one of the two to dominate. The page 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.
- **Reads as** flowing, fresh, summer, glass, lively.
- **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.
- 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: "nagashi").

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

## Designing new components in Nagashi

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

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

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

## 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 14px, box 22px, badge 999px
- Density: comfortable · Shadows: soft · Translucent surfaces

| token | light | dark |
|---|---|---|
| bg | #eef6fa | #061018 |
| surface | #ffffff | #0d1a24 |
| surface2 | #e2eef4 | #15232f |
| fg | #0b1a24 | #e6f2f8 |
| muted | #48606e | #8fa8b8 |
| border | #d3e3ec | #1f3140 |
| input | #a9c2d0 | #3a5264 |
| primary | #0b5f8f | #6cc4f2 |
| primaryFg | #ffffff | #031b2a |
| secondary | #e2eef4 | #15232f |
| secondaryFg | #0b1a24 | #e6f2f8 |
| accent | #3d6b1f | #a7d77a |
| accentFg | #ffffff | #132404 |
| ring | #0b5f8f | #6cc4f2 |
| 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 | #0b5f8f | #6cc4f2 |
| secondaryText | #616f77 | #79868f |
| accentText | #3d6b1f | #a7d77a |
| successText | #14783b | #4ade80 |
| warningText | #a64e0b | #fbbf24 |
| dangerText | #c72526 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0b5f8f | #6cc4f2 |