{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "shio",
  "name": "Shio",
  "family": "Minimal",
  "origin": "Japan · salt ramen",
  "tagline": "The clearest broth. Light, airy, afloat.",
  "description": "Shio ramen is seasoned only with salt, so its broth is the clearest and lightest of all ramen, you can see every noodle. Shio is an airy system with no visible borders: everything floats on soft, layered elevation over a pale page, with generous space, light type and a sea-slate ink.",
  "inspiration": [
    "A broth clear enough to see through → no borders; surfaces are separated by soft, layered elevation alone",
    "Seasoned only with salt → nothing added: pale neutrals, one sea-slate ink, a kombu-green accent",
    "A light, delicate bowl → generous space, medium-weight type, comfortable density",
    "Noodles lifted from the broth → things float up gently and cast softer shadows as they rise"
  ],
  "traits": {
    "mood": [
      "airy",
      "light",
      "calm",
      "optimistic",
      "gentle"
    ],
    "intensity": 1,
    "contrast": "low",
    "geometry": "soft radius, generous spacing",
    "type": "light sans",
    "surface": "pale, floating",
    "motion": "gentle float",
    "goodFor": [
      "wellness",
      "onboarding",
      "landing pages",
      "personal sites"
    ],
    "lessFor": [
      "dense admin",
      "financial data"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Shio is the clearest broth. Nothing in it has an outline: every surface floats over a pale page on soft, layered elevation, and rises a little, casting a softer, wider shadow, when you reach for it. Space is generous, type is medium weight, and there is one sea-slate ink.",
    "principles": [
      "No visible borders. Separate with elevation: --sh-1 (resting), --sh-2 (raised), --sh-3 (floating).",
      "Touch lifts: hover raises by 1–2px and steps up one elevation level; press settles back.",
      "One ink (sea slate) for action, kombu green as a quiet accent, pale neutrals for everything else.",
      "Generous space: comfortable density, 16px containers, medium (500) headings with tight tracking."
    ],
    "aspects": {
      "Shape": "10px fields, 16px surfaces, pill badges; tabs are small floating cards in a pale track.",
      "Surface": "White on #fafaf9, separated only by layered, very soft shadows with a 1px 4–5% ring.",
      "Colour": "Sea-slate primary, kombu-green accent, warm pale greys.",
      "Type": "Clean sans; 500 for headings and controls.",
      "Motion": "shio-in: 6px rise with a 2px blur, 300ms; elevation transitions 260ms.",
      "Data": "Soft rounded bars that lift on hover; 2px lines; a slim donut."
    },
    "extend": [
      "background: var(--mn-surface); border: 0; box-shadow: var(--sh-2); radius 16px.",
      "Hover: transform: translateY(-2px); box-shadow: var(--sh-3).",
      "Selected inside a group: a white card with --sh-1 on a --mn-surface-2 track."
    ],
    "avoid": [
      "1px borders as structure",
      "Hard or dark shadows",
      "Dense layouts"
    ],
    "recipe": "[data-noodle=\"shio\"] .tile {\n  padding: 16px 18px; border: 0; border-radius: 16px; background: var(--mn-surface); box-shadow: var(--sh-2);\n  transition: box-shadow 260ms cubic-bezier(.2, .7, .2, 1), transform 260ms cubic-bezier(.2, .7, .2, 1);\n}\n[data-noodle=\"shio\"] .tile:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#1f3a5f",
        "family": "Blue",
        "depth": "deep",
        "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": "#2f6b5a",
        "family": "Green",
        "depth": "mid",
        "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": "#fafaf9",
        "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": "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": 500,
      "summary": "One voice throughout: neutral sans. Headings are medium, which reads as calm and assured."
    },
    "personality": {
      "reads": [
        "airy",
        "light",
        "calm",
        "optimistic",
        "gentle"
      ],
      "intensity": 1,
      "dimensions": [],
      "suits": [
        "wellness",
        "onboarding",
        "landing pages",
        "personal sites"
      ],
      "lessFor": [
        "dense admin",
        "financial data"
      ],
      "tone": "Quiet. Plain statements in sentence case, no exclamation marks, numbers with their units. Let space do the persuading."
    },
    "logo": "A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles."
  },
  "url": "https://mian.ro/noodles/shio",
  "markdownUrl": "https://mian.ro/ai/noodles/shio.md",
  "stylesheet": "https://mian.ro/dist/noodles/shio.css",
  "usage": "<html data-noodle=\"shio\">",
  "fonts": {
    "sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "heading": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 500,
  "radius": {
    "field": "10px",
    "box": "16px",
    "badge": "999px"
  },
  "shadow": "soft",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#fafaf9",
    "surface": "#ffffff",
    "surface2": "#f3f3f1",
    "fg": "#14181f",
    "muted": "#5d6470",
    "border": "#ececea",
    "input": "#d5d6d4",
    "primary": "#1f3a5f",
    "primaryFg": "#ffffff",
    "secondary": "#f3f3f1",
    "secondaryFg": "#14181f",
    "accent": "#2f6b5a",
    "accentFg": "#ffffff",
    "ring": "#1f3a5f",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#1f3a5f",
    "secondaryText": "#6d7073",
    "accentText": "#2f6b5a",
    "successText": "#15783b",
    "warningText": "#aa4f0a",
    "dangerText": "#c82525",
    "infoText": "#0369a1",
    "link": "#1f3a5f"
  },
  "dark": {
    "bg": "#0e1014",
    "surface": "#16191e",
    "surface2": "#1e2228",
    "fg": "#eef1f5",
    "muted": "#9aa3ae",
    "border": "#262a31",
    "input": "#3a404a",
    "primary": "#a9c3e8",
    "primaryFg": "#0e1a2b",
    "secondary": "#1e2228",
    "secondaryFg": "#eef1f5",
    "accent": "#8fd1bd",
    "accentFg": "#06231b",
    "ring": "#a9c3e8",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#a9c3e8",
    "secondaryText": "#82858a",
    "accentText": "#8fd1bd",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#a9c3e8"
  },
  "css": "[data-noodle=\"shio\"] {\n  --mn-bg: light-dark(#fafaf9, #0e1014);\n  --mn-surface: light-dark(#ffffff, #16191e);\n  --mn-surface-2: light-dark(#f3f3f1, #1e2228);\n  --mn-fg: light-dark(#14181f, #eef1f5);\n  --mn-muted: light-dark(#5d6470, #9aa3ae);\n  --mn-border: light-dark(#ececea, #262a31);\n  --mn-input: light-dark(#d5d6d4, #3a404a);\n  --mn-primary: light-dark(#1f3a5f, #a9c3e8);\n  --mn-primary-fg: light-dark(#ffffff, #0e1a2b);\n  --mn-secondary: light-dark(#f3f3f1, #1e2228);\n  --mn-secondary-fg: light-dark(#14181f, #eef1f5);\n  --mn-accent: light-dark(#2f6b5a, #8fd1bd);\n  --mn-accent-fg: light-dark(#ffffff, #06231b);\n  --mn-ring: light-dark(#1f3a5f, #a9c3e8);\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(#1f3a5f, #a9c3e8);\n  --mn-secondary-text: light-dark(#6d7073, #82858a);\n  --mn-accent-text: light-dark(#2f6b5a, #8fd1bd);\n  --mn-success-text: light-dark(#15783b, #4ade80);\n  --mn-warning-text: light-dark(#aa4f0a, #fbbf24);\n  --mn-danger-text: light-dark(#c82525, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#1f3a5f, #a9c3e8);\n  --mn-font: ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --mn-font-heading: ui-sans-serif, system-ui, -apple-system, \"Segoe UI Variable Text\", \"Segoe UI\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --mn-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --mn-heading-weight: 500;\n  --mn-radius-field: 10px;\n  --mn-radius-box: 16px;\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"
}