{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "harusame",
  "name": "Harusame",
  "family": "Glass",
  "origin": "Japan · glass noodles",
  "tagline": "Clear, cool, layered.",
  "description": "Glass noodles. Translucent surfaces with backdrop blur over a soft gradient, large radii, sky-blue primary. For dashboards and media.",
  "inspiration": [
    "Glass noodles → frosted, see-through surfaces with backdrop blur",
    "Refraction → specular edge highlights and a sheen that sweeps across buttons",
    "Clear layers → translucent overlapping chart bars",
    "Crisp → precise, quick, blur-in transitions"
  ],
  "traits": {
    "mood": [
      "glass",
      "cool",
      "layered",
      "modern",
      "calm"
    ],
    "intensity": 2,
    "contrast": "medium",
    "geometry": "large radius",
    "type": "clean sans",
    "surface": "frosted glass over a gradient",
    "motion": "smooth",
    "goodFor": [
      "dashboards",
      "media apps",
      "weather",
      "consumer apps"
    ],
    "lessFor": [
      "serious finance",
      "legal"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Harusame are glass noodles: clear, glossy and refractive. The language is layered glass: frosted see-through surfaces over a soft gradient, bright specular edges, a sheen that sweeps across buttons, translucent overlapping chart layers and transitions that come into focus out of blur.",
    "principles": [
      "See-through: surfaces are 55–72% opaque with a backdrop blur.",
      "Light catches edges: a bright 1px inner top highlight on every glass surface.",
      "Sheen on interaction: a diagonal highlight sweeps across on hover.",
      "Depth by layering and blur, not by heavy shadows."
    ],
    "aspects": {
      "Shape": "12px fields, 20px containers.",
      "Surface": "Frosted glass (var(--h-glass)) over a gradient page, inner edge highlights (var(--h-edge)).",
      "Colour": "Clear blue primary, a warm amber-brown accent, cool translucent neutrals.",
      "Type": "Clean sans, medium weights.",
      "Motion": "harusame-in: blur(6px) → sharp with fade, 240ms.",
      "Data": "Translucent, overlapping bar and area layers, glowing lines."
    },
    "extend": [
      "Use background var(--h-glass) with backdrop-filter: blur(18px) saturate(1.4) and box-shadow var(--h-edge).",
      "Add a ::before sheen (a skewed white gradient) that translates across on hover.",
      "Keep contrast on text by placing it on the more opaque layers."
    ],
    "avoid": [
      "Opaque flat fills",
      "Hard outlines",
      "Heavy shadows",
      "Texture"
    ],
    "recipe": "[data-noodle=\"harusame\"] .tile {\n  padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--mn-fg) 12%, transparent); border-radius: 16px;\n  background: var(--h-glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);\n  box-shadow: var(--h-edge);\n}\n[data-noodle=\"harusame\"] .tile[aria-selected=\"true\"] { background: color-mix(in srgb, var(--mn-primary) 18%, var(--h-glass)); }"
  },
  "psychology": {
    "temperature": "cool",
    "colours": [
      {
        "role": "Primary",
        "hex": "#0369a1",
        "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": "#9a4a12",
        "family": "Brown and terracotta",
        "depth": "mid, saturated",
        "says": "Earth, craft, reliability, age. Feels made by hand and unhurried.",
        "use": "Food, coffee, leather, ceramics, heritage brands, anything artisanal.",
        "risk": "Looks dull on screens unless the neutrals around it are warm too."
      },
      {
        "role": "Page",
        "hex": "#eef2f7",
        "family": "Blue",
        "depth": "pale",
        "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."
      }
    ],
    "relation": "Blue against brown and terracotta, close to complementary: strong contrast, so the accent must stay rare.",
    "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": 650,
      "summary": "One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "glass",
        "cool",
        "layered",
        "modern",
        "calm"
      ],
      "intensity": 2,
      "dimensions": [],
      "suits": [
        "dashboards",
        "media apps",
        "weather",
        "consumer apps"
      ],
      "lessFor": [
        "serious finance",
        "legal"
      ],
      "tone": "Calm and clear. Short sentences, one idea each, a friendly but not chatty register."
    },
    "logo": "Round marks fit: a circular symbol or a soft, lowercase wordmark."
  },
  "url": "https://mian.ro/noodles/harusame",
  "markdownUrl": "https://mian.ro/ai/noodles/harusame.md",
  "stylesheet": "https://mian.ro/dist/noodles/harusame.css",
  "usage": "<html data-noodle=\"harusame\">",
  "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": 650,
  "radius": {
    "field": "12px",
    "box": "20px",
    "badge": "999px"
  },
  "shadow": "soft",
  "density": "default",
  "glass": true,
  "light": {
    "bg": "#eef2f7",
    "surface": "#ffffff",
    "surface2": "#e4eaf2",
    "fg": "#0f172a",
    "muted": "#4f5d70",
    "border": "#d8e0eb",
    "input": "#c3cedc",
    "primary": "#0369a1",
    "primaryFg": "#ffffff",
    "secondary": "#e2e8f0",
    "secondaryFg": "#0f172a",
    "accent": "#9a4a12",
    "accentFg": "#ffffff",
    "ring": "#0369a1",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#0369a1",
    "secondaryText": "#636b79",
    "accentText": "#9a4a12",
    "successText": "#15783b",
    "warningText": "#aa4f0b",
    "dangerText": "#c82526",
    "infoText": "#0369a1",
    "link": "#0369a1"
  },
  "dark": {
    "bg": "#0a0f1a",
    "surface": "#131b2b",
    "surface2": "#1c2536",
    "fg": "#e8eef7",
    "muted": "#95a3b8",
    "border": "#27334a",
    "input": "#374560",
    "primary": "#38bdf8",
    "primaryFg": "#04202e",
    "secondary": "#1c2536",
    "secondaryFg": "#e8eef7",
    "accent": "#fdba74",
    "accentFg": "#2a1403",
    "ring": "#38bdf8",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#38bdf8",
    "secondaryText": "#7e8593",
    "accentText": "#fdba74",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#38bdf8"
  },
  "css": "[data-noodle=\"harusame\"] {\n  --mn-bg: light-dark(#eef2f7, #0a0f1a);\n  --mn-surface: light-dark(#ffffff, #131b2b);\n  --mn-surface-2: light-dark(#e4eaf2, #1c2536);\n  --mn-fg: light-dark(#0f172a, #e8eef7);\n  --mn-muted: light-dark(#4f5d70, #95a3b8);\n  --mn-border: light-dark(#d8e0eb, #27334a);\n  --mn-input: light-dark(#c3cedc, #374560);\n  --mn-primary: light-dark(#0369a1, #38bdf8);\n  --mn-primary-fg: light-dark(#ffffff, #04202e);\n  --mn-secondary: light-dark(#e2e8f0, #1c2536);\n  --mn-secondary-fg: light-dark(#0f172a, #e8eef7);\n  --mn-accent: light-dark(#9a4a12, #fdba74);\n  --mn-accent-fg: light-dark(#ffffff, #2a1403);\n  --mn-ring: light-dark(#0369a1, #38bdf8);\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(#0369a1, #38bdf8);\n  --mn-secondary-text: light-dark(#636b79, #7e8593);\n  --mn-accent-text: light-dark(#9a4a12, #fdba74);\n  --mn-success-text: light-dark(#15783b, #4ade80);\n  --mn-warning-text: light-dark(#aa4f0b, #fbbf24);\n  --mn-danger-text: light-dark(#c82526, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#0369a1, #38bdf8);\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: 650;\n  --mn-radius-field: 12px;\n  --mn-radius-box: 20px;\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: 26px;\n  --mn-size-sm: 32px;\n  --mn-size-md: 38px;\n  --mn-size-lg: 46px;\n  --mn-text-sm: 14px;\n  --mn-surface-alpha: 72%;\n  --mn-backdrop: blur(18px) saturate(1.4);\n  --mn-bg-image: radial-gradient(1200px 600px at 10% -10%, light-dark(#dbeafe, #0c2744) 0%, transparent 60%), radial-gradient(900px 500px at 110% 10%, light-dark(#d9f2ee, #0b3330) 0%, transparent 55%);\n}\n"
}