{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "shirataki",
  "name": "Shirataki",
  "family": "Glass",
  "origin": "Japan · konjac noodles",
  "tagline": "Translucent, jelly-soft, bouncy.",
  "description": "\"White waterfall\" noodles made of konjac: milky, translucent, slippery and springy. Shirataki is a jelly system: glossy blobs, wobble-on-press, overshooting springs and soft pearl surfaces.",
  "inspiration": [
    "Gelatinous konjac → controls wobble and jiggle when pressed",
    "Milky translucence → pearl surfaces with a glossy highlight blob",
    "Springy → every transition overshoots and settles",
    "Slippery → knobs and indicators slide past and bounce back"
  ],
  "traits": {
    "mood": [
      "bouncy",
      "jelly",
      "playful",
      "soft",
      "fun"
    ],
    "intensity": 3,
    "contrast": "low",
    "geometry": "blobs, round",
    "type": "rounded sans",
    "surface": "milky translucent jelly",
    "motion": "wobble and overshoot",
    "goodFor": [
      "games",
      "kids",
      "consumer apps",
      "social"
    ],
    "lessFor": [
      "finance",
      "legal",
      "enterprise"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Shirataki are konjac noodles: translucent, jelly-soft and springy. The language is gelatinous: pearl surfaces with a glossy highlight blob, controls that wobble when pressed, blobby shapes that morph, and springs that overshoot and settle like jelly.",
    "principles": [
      "Gloss: a radial highlight (var(--s-gloss)) near the top-left of every raised thing.",
      "Wobble: presses and selections play a jiggle (squash and stretch in both axes).",
      "Soft and round: large radii (16–28px), no sharp corners anywhere.",
      "Sunken wells: inputs and tracks are inset with a soft inner shadow."
    ],
    "aspects": {
      "Shape": "16px fields, 26px containers, blob spinners that morph their border-radius.",
      "Surface": "Pearl surfaces with gloss and a soft coloured drop shadow; sunken fields.",
      "Colour": "Mint-teal primary, violet accent, pearly neutrals.",
      "Type": "Rounded sans.",
      "Motion": "shirataki-in: squash (0.7,1.15) → overshoot → settle, 480ms, cubic-bezier(.3,1.3,.5,1). shirataki-jiggle on press.",
      "Data": "Jelly-blob bars with gloss that swell on hover, thick 5px lines, a glossy donut with a coloured shadow."
    },
    "extend": [
      "Background var(--mn-surface) var(--s-gloss), radius 18–28px, shadow 0 10px 30px -14px of the primary.",
      "On press and on selection play animation: shirataki-jiggle 400ms.",
      "Wells and tracks: surface-2 with inset 0 2px 6px rgb(0 0 0/.07)."
    ],
    "avoid": [
      "Hard edges",
      "Flat, matte fills",
      "Linear motion"
    ],
    "recipe": "[data-noodle=\"shirataki\"] .tile {\n  padding: 14px 18px; border: 0; border-radius: 22px;\n  background: var(--mn-surface) var(--s-gloss);\n  box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--mn-primary) 40%, transparent);\n}\n[data-noodle=\"shirataki\"] .tile:active,\n[data-noodle=\"shirataki\"] .tile[aria-selected=\"true\"] { animation: shirataki-jiggle 400ms ease-out; }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#0f766e",
        "family": "Teal and cyan",
        "depth": "deep, saturated",
        "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."
      },
      {
        "role": "Accent",
        "hex": "#6d28d9",
        "family": "Indigo and violet",
        "depth": "mid",
        "says": "Imagination, luxury, spirituality, the unusual.",
        "use": "Creative tools, beauty, premium or mystical products.",
        "risk": "A violet-to-blue gradient is the most recognised mark of a generated page. If violet is your brand, use it flat, with a warm second colour, and never as a gradient behind a centred headline."
      },
      {
        "role": "Page",
        "hex": "#f5f6f5",
        "family": "White and paper",
        "depth": "pale, muted",
        "says": "Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.",
        "use": "Almost everything. The page colour sets the temperature of the whole brand.",
        "risk": "Empty is not the same as calm: white space needs a grid behind it."
      }
    ],
    "relation": "Teal and cyan with indigo and violet: a contrasting pair that needs one of the two to dominate.",
    "type": {
      "body": {
        "class": "rounded",
        "name": "Rounded sans",
        "says": "Friendly, soft, safe, young.",
        "use": "Consumer apps, children, food, onboarding.",
        "risk": "Hard to take seriously for money, law or medicine."
      },
      "heading": {
        "class": "rounded",
        "name": "Rounded sans",
        "says": "Friendly, soft, safe, young.",
        "use": "Consumer apps, children, food, onboarding.",
        "risk": "Hard to take seriously for money, law or medicine."
      },
      "weight": 650,
      "summary": "One voice throughout: rounded sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "bouncy",
        "jelly",
        "playful",
        "soft",
        "fun"
      ],
      "intensity": 3,
      "dimensions": [],
      "suits": [
        "games",
        "kids",
        "consumer apps",
        "social"
      ],
      "lessFor": [
        "finance",
        "legal",
        "enterprise"
      ],
      "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/shirataki",
  "markdownUrl": "https://mian.ro/ai/noodles/shirataki.md",
  "stylesheet": "https://mian.ro/dist/noodles/shirataki.css",
  "usage": "<html data-noodle=\"shirataki\">",
  "fonts": {
    "sans": "ui-rounded, \"SF Pro Rounded\", \"Nunito\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "heading": "ui-rounded, \"SF Pro Rounded\", \"Nunito\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 650,
  "radius": {
    "field": "16px",
    "box": "26px",
    "badge": "999px"
  },
  "shadow": "soft",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#f5f6f5",
    "surface": "#fbfcfb",
    "surface2": "#eceeec",
    "fg": "#1d2321",
    "muted": "#56605b",
    "border": "#dde2df",
    "input": "#c7cfcb",
    "primary": "#0f766e",
    "primaryFg": "#ffffff",
    "secondary": "#e4e9e6",
    "secondaryFg": "#1d2321",
    "accent": "#6d28d9",
    "accentFg": "#ffffff",
    "ring": "#0f766e",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#10736b",
    "secondaryText": "#6d7270",
    "accentText": "#6d28d9",
    "successText": "#16773a",
    "warningText": "#a54e0b",
    "dangerText": "#c12625",
    "infoText": "#0369a1",
    "link": "#0f766e"
  },
  "dark": {
    "bg": "#0f1211",
    "surface": "#161a19",
    "surface2": "#1f2523",
    "fg": "#eaf0ed",
    "muted": "#9aa7a1",
    "border": "#2a322f",
    "input": "#3a4541",
    "primary": "#5eead4",
    "primaryFg": "#042f2c",
    "secondary": "#1f2523",
    "secondaryFg": "#eaf0ed",
    "accent": "#c4b5fd",
    "accentFg": "#1a0b3a",
    "ring": "#5eead4",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#5eead4",
    "secondaryText": "#808684",
    "accentText": "#c4b5fd",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#5eead4"
  },
  "css": "[data-noodle=\"shirataki\"] {\n  --mn-bg: light-dark(#f5f6f5, #0f1211);\n  --mn-surface: light-dark(#fbfcfb, #161a19);\n  --mn-surface-2: light-dark(#eceeec, #1f2523);\n  --mn-fg: light-dark(#1d2321, #eaf0ed);\n  --mn-muted: light-dark(#56605b, #9aa7a1);\n  --mn-border: light-dark(#dde2df, #2a322f);\n  --mn-input: light-dark(#c7cfcb, #3a4541);\n  --mn-primary: light-dark(#0f766e, #5eead4);\n  --mn-primary-fg: light-dark(#ffffff, #042f2c);\n  --mn-secondary: light-dark(#e4e9e6, #1f2523);\n  --mn-secondary-fg: light-dark(#1d2321, #eaf0ed);\n  --mn-accent: light-dark(#6d28d9, #c4b5fd);\n  --mn-accent-fg: light-dark(#ffffff, #1a0b3a);\n  --mn-ring: light-dark(#0f766e, #5eead4);\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(#10736b, #5eead4);\n  --mn-secondary-text: light-dark(#6d7270, #808684);\n  --mn-accent-text: light-dark(#6d28d9, #c4b5fd);\n  --mn-success-text: light-dark(#16773a, #4ade80);\n  --mn-warning-text: light-dark(#a54e0b, #fbbf24);\n  --mn-danger-text: light-dark(#c12625, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#0f766e, #5eead4);\n  --mn-font: ui-rounded, \"SF Pro Rounded\", \"Nunito\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --mn-font-heading: ui-rounded, \"SF Pro Rounded\", \"Nunito\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", 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: 16px;\n  --mn-radius-box: 26px;\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: 100%;\n  --mn-backdrop: none;\n  --mn-bg-image: none;\n}\n"
}