{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "nagashi",
  "name": "Nagashi",
  "family": "Glass",
  "origin": "Japan · flowing sōmen",
  "tagline": "Down a bamboo chute in running water.",
  "description": "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.",
  "inspiration": [
    "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"
  ],
  "traits": {
    "mood": [
      "flowing",
      "fresh",
      "summer",
      "glass",
      "lively"
    ],
    "intensity": 3,
    "contrast": "medium",
    "geometry": "channels, rounded",
    "type": "sans",
    "surface": "running-water glass",
    "motion": "flowing",
    "goodFor": [
      "travel",
      "summer events",
      "consumer apps",
      "drinks"
    ],
    "lessFor": [
      "serious b2b"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "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."
    ],
    "aspects": {
      "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."
    },
    "extend": [
      "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": "[data-noodle=\"nagashi\"] .tile {\n  padding: 14px 18px; border: 0; border-radius: 22px;\n  background: var(--ng-flow) 100% 0 / 300% 100% no-repeat, var(--ng-water);\n  -webkit-backdrop-filter: var(--ng-blur); backdrop-filter: var(--ng-blur); box-shadow: var(--ng-edge);\n}\n[data-noodle=\"nagashi\"] .tile:hover { animation: nagashi-flow 1.2s var(--mn-ease) both; }"
  },
  "psychology": {
    "temperature": "cool",
    "colours": [
      {
        "role": "Primary",
        "hex": "#0b5f8f",
        "family": "Blue",
        "depth": "mid, saturated",
        "says": "Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.",
        "use": "Finance, enterprise, health, anything that must feel safe. Links are expected to be blue.",
        "risk": "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."
      },
      {
        "role": "Accent",
        "hex": "#3d6b1f",
        "family": "Green",
        "depth": "deep",
        "says": "Growth, health, permission, money. The easiest colour to look at for a long time.",
        "use": "Finance, health, food, sustainability, and “go” or success states.",
        "risk": "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."
      },
      {
        "role": "Page",
        "hex": "#eef6fa",
        "family": "Teal and cyan",
        "depth": "pale",
        "says": "Clarity, cleanliness, calm technology. Cooler than green, softer than blue.",
        "use": "Health tech, wellness, productivity tools, water and travel.",
        "risk": "Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered."
      }
    ],
    "relation": "Blue with green: a contrasting pair that needs one of the two to dominate.",
    "type": {
      "body": {
        "class": "neutral",
        "name": "Neutral sans",
        "says": "Clear, modern, impartial. The voice of software and signage.",
        "use": "Interfaces, documentation, most product marketing.",
        "risk": "The same few neutral sans typefaces set every generated page. Without a distinct weight, size or pairing it reads as a template."
      },
      "heading": {
        "class": "neutral",
        "name": "Neutral sans",
        "says": "Clear, modern, impartial. The voice of software and signage.",
        "use": "Interfaces, documentation, most product marketing.",
        "risk": "The same few neutral sans typefaces set every generated page. Without a distinct weight, size or pairing it reads as a template."
      },
      "weight": 600,
      "summary": "One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "flowing",
        "fresh",
        "summer",
        "glass",
        "lively"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "travel",
        "summer events",
        "consumer apps",
        "drinks"
      ],
      "lessFor": [
        "serious b2b"
      ],
      "tone": "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."
  },
  "url": "https://mian.ro/noodles/nagashi",
  "markdownUrl": "https://mian.ro/ai/noodles/nagashi.md",
  "stylesheet": "https://mian.ro/dist/noodles/nagashi.css",
  "usage": "<html data-noodle=\"nagashi\">",
  "fonts": {
    "sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "heading": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 600,
  "radius": {
    "field": "14px",
    "box": "22px",
    "badge": "999px"
  },
  "shadow": "soft",
  "density": "comfortable",
  "glass": true,
  "light": {
    "bg": "#eef6fa",
    "surface": "#ffffff",
    "surface2": "#e2eef4",
    "fg": "#0b1a24",
    "muted": "#48606e",
    "border": "#d3e3ec",
    "input": "#a9c2d0",
    "primary": "#0b5f8f",
    "primaryFg": "#ffffff",
    "secondary": "#e2eef4",
    "secondaryFg": "#0b1a24",
    "accent": "#3d6b1f",
    "accentFg": "#ffffff",
    "ring": "#0b5f8f",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#0b5f8f",
    "secondaryText": "#616f77",
    "accentText": "#3d6b1f",
    "successText": "#14783b",
    "warningText": "#a64e0b",
    "dangerText": "#c72526",
    "infoText": "#0369a1",
    "link": "#0b5f8f"
  },
  "dark": {
    "bg": "#061018",
    "surface": "#0d1a24",
    "surface2": "#15232f",
    "fg": "#e6f2f8",
    "muted": "#8fa8b8",
    "border": "#1f3140",
    "input": "#3a5264",
    "primary": "#6cc4f2",
    "primaryFg": "#031b2a",
    "secondary": "#15232f",
    "secondaryFg": "#e6f2f8",
    "accent": "#a7d77a",
    "accentFg": "#132404",
    "ring": "#6cc4f2",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#6cc4f2",
    "secondaryText": "#79868f",
    "accentText": "#a7d77a",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#6cc4f2"
  },
  "css": "[data-noodle=\"nagashi\"] {\n  --mn-bg: light-dark(#eef6fa, #061018);\n  --mn-surface: light-dark(#ffffff, #0d1a24);\n  --mn-surface-2: light-dark(#e2eef4, #15232f);\n  --mn-fg: light-dark(#0b1a24, #e6f2f8);\n  --mn-muted: light-dark(#48606e, #8fa8b8);\n  --mn-border: light-dark(#d3e3ec, #1f3140);\n  --mn-input: light-dark(#a9c2d0, #3a5264);\n  --mn-primary: light-dark(#0b5f8f, #6cc4f2);\n  --mn-primary-fg: light-dark(#ffffff, #031b2a);\n  --mn-secondary: light-dark(#e2eef4, #15232f);\n  --mn-secondary-fg: light-dark(#0b1a24, #e6f2f8);\n  --mn-accent: light-dark(#3d6b1f, #a7d77a);\n  --mn-accent-fg: light-dark(#ffffff, #132404);\n  --mn-ring: light-dark(#0b5f8f, #6cc4f2);\n  --mn-success: light-dark(#15803d, #4ade80);\n  --mn-success-fg: light-dark(#ffffff, #052e16);\n  --mn-warning: light-dark(#b45309, #fbbf24);\n  --mn-warning-fg: light-dark(#ffffff, #1f1300);\n  --mn-danger: light-dark(#dc2626, #f87171);\n  --mn-danger-fg: light-dark(#ffffff, #210505);\n  --mn-info: light-dark(#0369a1, #38bdf8);\n  --mn-info-fg: light-dark(#ffffff, #03202d);\n  --mn-primary-text: light-dark(#0b5f8f, #6cc4f2);\n  --mn-secondary-text: light-dark(#616f77, #79868f);\n  --mn-accent-text: light-dark(#3d6b1f, #a7d77a);\n  --mn-success-text: light-dark(#14783b, #4ade80);\n  --mn-warning-text: light-dark(#a64e0b, #fbbf24);\n  --mn-danger-text: light-dark(#c72526, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#0b5f8f, #6cc4f2);\n  --mn-font: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-heading: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --mn-heading-weight: 600;\n  --mn-radius-field: 14px;\n  --mn-radius-box: 22px;\n  --mn-radius-badge: 999px;\n  --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);\n  --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);\n  --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);\n  --mn-size-xs: 28px;\n  --mn-size-sm: 34px;\n  --mn-size-md: 42px;\n  --mn-size-lg: 50px;\n  --mn-text-sm: 15px;\n  --mn-surface-alpha: 72%;\n  --mn-backdrop: blur(18px) saturate(1.4);\n  --mn-bg-image: linear-gradient(172deg, light-dark(#d9edf7, #07202e) 0%, light-dark(#eef6fa, #061018) 38%, light-dark(#e5f1ec, #0b1a14) 72%, light-dark(#eef6fa, #061018) 100%);\n}\n"
}