{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "somen",
  "name": "Somen",
  "family": "Thin",
  "origin": "Japan",
  "tagline": "Hair-thin, white, served on ice.",
  "description": "The thinnest wheat noodle, bundled straight and eaten ice-cold. Somen is a hairline system: 1px strokes, underline fields, dot-sized knobs, light type and crisp, instant motion.",
  "inspiration": [
    "Hair-thin strands → 1px borders, hairline charts and a 2px switch track",
    "Bundled straight → strict horizontal rules, underline-only inputs",
    "Served on ice → icy blue-white surfaces, cool ink primary",
    "Delicate → light font weights, tight 2px radius, no shadows"
  ],
  "traits": {
    "mood": [
      "hairline",
      "delicate",
      "cool",
      "quiet",
      "refined",
      "japanese"
    ],
    "intensity": 1,
    "contrast": "medium",
    "geometry": "1px strokes, underline fields",
    "type": "light sans",
    "surface": "icy white",
    "motion": "barely there",
    "goodFor": [
      "architecture",
      "research",
      "fashion",
      "studios",
      "quiet luxury"
    ],
    "lessFor": [
      "loud campaigns",
      "children"
    ],
    "density": "compact"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Somen is the thinnest wheat noodle, bundled straight and eaten on ice. The language is drawn with a 1px pen: every element is reduced to its outline or a single line, type is light, and motion is almost instant, cool, precise, and completely unornamented.",
    "principles": [
      "A hairline is enough: 1px strokes for borders, underlines, dividers and chart marks.",
      "Fields are a line to write on, not a box.",
      "Light type weights carry elegance; hierarchy comes from size and letter-spacing, not weight.",
      "No shadows, no fills where an outline will do.",
      "Motion is short (≈110–120ms) and linear: nothing drifts."
    ],
    "aspects": {
      "Shape": "Tight 2px field radius, 4px containers. Switch knobs are 0.7rem beads on a 2px strand; step markers are thin rings.",
      "Surface": "Icy blue-white page, white surfaces, 1px cool borders, no shadow at all except a faint one on floating menus.",
      "Colour": "Ink (near-black navy) as primary; a clear ice-blue accent; everything else is cool grey.",
      "Type": "Headings at weight 200–300 with tight tracking; table headers tiny, uppercase, widely spaced (0.12em).",
      "Motion": "somen-in: 3px drop and fade in 120ms, linear. Focus underlines draw left-to-right in 200ms.",
      "Data": "Bars are 2px stems topped with a small cap; horizontal bars are 1px lines; donuts are 3px rings; lines are 1px with visible points."
    },
    "extend": [
      "Draw the component with 1px lines in var(--mn-border) or var(--mn-fg); never fill a surface just to separate it.",
      "Inputs inside the component use only a bottom border that animates to var(--mn-fg) on focus.",
      "Selected = inverted (var(--mn-fg) background, var(--mn-bg) text) or a 1px underline: pick one.",
      "Keep text at weight 300–400; label small caps with letter-spacing .1em."
    ],
    "avoid": [
      "Borders thicker than 1px",
      "Radii above 4px",
      "Shadows and glows",
      "Bold display type",
      "Spring or overshoot"
    ],
    "recipe": "[data-noodle=\"somen\"] .tile {\n  padding: 12px 0; border: 0; border-bottom: 1px solid var(--mn-border);\n  border-radius: 0; background: none; font-weight: 300; letter-spacing: .02em;\n}\n[data-noodle=\"somen\"] .tile[aria-selected=\"true\"] { border-bottom-color: var(--mn-fg); }\n[data-noodle=\"somen\"] .tile:active { opacity: .75; }"
  },
  "psychology": {
    "temperature": "cool",
    "colours": [
      {
        "role": "Primary",
        "hex": "#0b1220",
        "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": "#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": "Page",
        "hex": "#f8fafc",
        "family": "White and paper",
        "depth": "pale",
        "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": "Two tones of blue: harmonious and calm, with little contrast between brand and accent.",
    "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": 300,
      "summary": "One voice throughout: neutral sans. Headings are light to regular, which reads as delicate and unhurried."
    },
    "personality": {
      "reads": [
        "hairline",
        "delicate",
        "cool",
        "quiet",
        "refined"
      ],
      "intensity": 1,
      "dimensions": [
        "Sophistication"
      ],
      "suits": [
        "architecture",
        "research",
        "fashion",
        "studios",
        "quiet luxury"
      ],
      "lessFor": [
        "loud campaigns",
        "children"
      ],
      "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. Use a light or regular wordmark; a heavy one would overpower this interface."
  },
  "url": "https://mian.ro/noodles/somen",
  "markdownUrl": "https://mian.ro/ai/noodles/somen.md",
  "stylesheet": "https://mian.ro/dist/noodles/somen.css",
  "usage": "<html data-noodle=\"somen\">",
  "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": 300,
  "radius": {
    "field": "2px",
    "box": "4px",
    "badge": "2px"
  },
  "shadow": "none",
  "density": "compact",
  "glass": false,
  "light": {
    "bg": "#f8fafc",
    "surface": "#ffffff",
    "surface2": "#f1f5f9",
    "fg": "#0b1220",
    "muted": "#566174",
    "border": "#e2e8f0",
    "input": "#cbd5e1",
    "primary": "#0b1220",
    "primaryFg": "#f8fafc",
    "secondary": "#f1f5f9",
    "secondaryFg": "#0b1220",
    "accent": "#0369a1",
    "accentFg": "#ffffff",
    "ring": "#475569",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#0b1220",
    "secondaryText": "#6c717b",
    "accentText": "#0369a1",
    "successText": "#14793b",
    "warningText": "#aa4f0a",
    "dangerText": "#c72425",
    "infoText": "#0369a1",
    "link": "#0b1220"
  },
  "dark": {
    "bg": "#070b12",
    "surface": "#0c121c",
    "surface2": "#141c28",
    "fg": "#eef3f9",
    "muted": "#93a1b5",
    "border": "#1e2835",
    "input": "#2d3a4c",
    "primary": "#eef3f9",
    "primaryFg": "#0b1220",
    "secondary": "#141c28",
    "secondaryFg": "#eef3f9",
    "accent": "#7dd3fc",
    "accentFg": "#04202e",
    "ring": "#93a1b5",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#eef3f9",
    "secondaryText": "#787f88",
    "accentText": "#7dd3fc",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#eef3f9"
  },
  "css": "[data-noodle=\"somen\"] {\n  --mn-bg: light-dark(#f8fafc, #070b12);\n  --mn-surface: light-dark(#ffffff, #0c121c);\n  --mn-surface-2: light-dark(#f1f5f9, #141c28);\n  --mn-fg: light-dark(#0b1220, #eef3f9);\n  --mn-muted: light-dark(#566174, #93a1b5);\n  --mn-border: light-dark(#e2e8f0, #1e2835);\n  --mn-input: light-dark(#cbd5e1, #2d3a4c);\n  --mn-primary: light-dark(#0b1220, #eef3f9);\n  --mn-primary-fg: light-dark(#f8fafc, #0b1220);\n  --mn-secondary: light-dark(#f1f5f9, #141c28);\n  --mn-secondary-fg: light-dark(#0b1220, #eef3f9);\n  --mn-accent: light-dark(#0369a1, #7dd3fc);\n  --mn-accent-fg: light-dark(#ffffff, #04202e);\n  --mn-ring: light-dark(#475569, #93a1b5);\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(#0b1220, #eef3f9);\n  --mn-secondary-text: light-dark(#6c717b, #787f88);\n  --mn-accent-text: light-dark(#0369a1, #7dd3fc);\n  --mn-success-text: light-dark(#14793b, #4ade80);\n  --mn-warning-text: light-dark(#aa4f0a, #fbbf24);\n  --mn-danger-text: light-dark(#c72425, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#0b1220, #eef3f9);\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: 300;\n  --mn-radius-field: 2px;\n  --mn-radius-box: 4px;\n  --mn-radius-badge: 2px;\n  --mn-shadow-sm: none;\n  --mn-shadow-md: none;\n  --mn-shadow-lg: none;\n  --mn-size-xs: 24px;\n  --mn-size-sm: 28px;\n  --mn-size-md: 34px;\n  --mn-size-lg: 42px;\n  --mn-text-sm: 13px;\n  --mn-surface-alpha: 100%;\n  --mn-backdrop: none;\n  --mn-bg-image: none;\n}\n"
}