{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "lamian",
  "name": "LaMian",
  "family": "Linear",
  "origin": "China",
  "tagline": "Long, smooth, dependable.",
  "description": "A cobalt primary on cool near-white with a cyan accent. The familiar product system: balanced, legible, and dependable rather than distinctive.",
  "inspiration": [
    "Hand-pulled → controls stretch horizontally when pressed",
    "Elastic dough → spring easing with visible overshoot",
    "Long strands → long pill shapes and horizontal bar charts",
    "One continuous strand → indicators that slide between positions instead of jumping"
  ],
  "traits": {
    "mood": [
      "familiar",
      "balanced",
      "modern",
      "trustworthy",
      "corporate"
    ],
    "intensity": 2,
    "contrast": "medium",
    "geometry": "medium radius",
    "type": "clean sans",
    "surface": "soft shadows",
    "motion": "smooth",
    "goodFor": [
      "saas",
      "b2b",
      "startups",
      "admin panels"
    ],
    "lessFor": [
      "brands that must look distinctive",
      "editorial"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Lamian is pulled by hand from one piece of dough into a single long, elastic strand. The language is about stretch and continuity: controls stretch when pulled, indicators glide and lengthen between positions, charts become long horizontal strands, and everything springs with a lively overshoot.",
    "principles": [
      "One continuous strand: a single indicator travels between options instead of each option having its own.",
      "Elastic: presses stretch horizontally (scale(1.1,.9)); knobs lengthen as they move.",
      "Long and horizontal: pills, long bars, wide letter-spacing on hover.",
      "Springy overshoot everywhere (cubic-bezier(.5,1.7,.4,.8))."
    ],
    "aspects": {
      "Shape": "Pill-shaped fields and buttons, 22px textareas, long capsule knobs.",
      "Surface": "Clean cool white, soft shadows; cards carry a gradient strand along the top that pulls taut on hover.",
      "Colour": "Indigo primary, deep cyan accent.",
      "Type": "Clean sans; buttons widen their letter-spacing on hover.",
      "Motion": "lamian-stretch: enter from scaleX(.35) with overshoot, 420ms. Tab indicator glides 460ms.",
      "Data": "All bar charts become horizontal strands (0.55rem pills) growing from the left; 3px lines."
    },
    "extend": [
      "Represent selection with one shared indicator that moves (use --_ix / --_iw like the tab list).",
      "Make the component a pill and stretch it on press: transform: scale(1.1, .9).",
      "Animate lengths (width, scaleX from the left) rather than opacity."
    ],
    "avoid": [
      "Square corners",
      "Vertical emphasis",
      "Linear or flat motion",
      "Separate indicators per item"
    ],
    "recipe": "[data-noodle=\"lamian\"] .tile {\n  padding: 12px 22px; border-radius: 999px; background: var(--mn-surface);\n  transition: transform 380ms cubic-bezier(.5, 1.7, .4, .8), letter-spacing 380ms cubic-bezier(.5, 1.7, .4, .8);\n}\n[data-noodle=\"lamian\"] .tile:hover { letter-spacing: .04em; }\n[data-noodle=\"lamian\"] .tile:active { transform: scale(1.1, .9); transition-duration: 120ms; }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#1f4fd6",
        "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": "#0e7490",
        "family": "Teal and cyan",
        "depth": "mid, 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": "Page",
        "hex": "#fbfbfe",
        "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": "Blue with its neighbour teal and cyan: an analogous pair, harmonious and natural.",
    "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": [
        "familiar",
        "balanced",
        "modern",
        "trustworthy",
        "corporate"
      ],
      "intensity": 2,
      "dimensions": [
        "Competence"
      ],
      "suits": [
        "saas",
        "b2b",
        "startups",
        "admin panels"
      ],
      "lessFor": [
        "brands that must look distinctive",
        "editorial"
      ],
      "tone": "Calm and clear. Short sentences, one idea each, a friendly but not chatty register."
    },
    "logo": "A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles."
  },
  "url": "https://mian.ro/noodles/lamian",
  "markdownUrl": "https://mian.ro/ai/noodles/lamian.md",
  "stylesheet": "https://mian.ro/dist/noodles/lamian.css",
  "usage": "<html data-noodle=\"lamian\">",
  "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": "8px",
    "box": "12px",
    "badge": "999px"
  },
  "shadow": "soft",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#fbfbfe",
    "surface": "#ffffff",
    "surface2": "#f1f2f9",
    "fg": "#111327",
    "muted": "#5b5e78",
    "border": "#e3e5f0",
    "input": "#cfd2e3",
    "primary": "#1f4fd6",
    "primaryFg": "#ffffff",
    "secondary": "#e9eefb",
    "secondaryFg": "#16307a",
    "accent": "#0e7490",
    "accentFg": "#ffffff",
    "ring": "#1f4fd6",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#1f4fd6",
    "secondaryText": "#707384",
    "accentText": "#0e728e",
    "successText": "#15793c",
    "warningText": "#aa4f0b",
    "dangerText": "#c82426",
    "infoText": "#0369a1",
    "link": "#1f4fd6"
  },
  "dark": {
    "bg": "#0b0c18",
    "surface": "#12142a",
    "surface2": "#1b1e38",
    "fg": "#eef0ff",
    "muted": "#9da1c4",
    "border": "#262a4a",
    "input": "#393e68",
    "primary": "#86a8ff",
    "primaryFg": "#081433",
    "secondary": "#1b1e38",
    "secondaryFg": "#eef0ff",
    "accent": "#22d3ee",
    "accentFg": "#032a31",
    "ring": "#86a8ff",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#86a8ff",
    "secondaryText": "#7c7f94",
    "accentText": "#22d3ee",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#86a8ff"
  },
  "css": "[data-noodle=\"lamian\"] {\n  --mn-bg: light-dark(#fbfbfe, #0b0c18);\n  --mn-surface: light-dark(#ffffff, #12142a);\n  --mn-surface-2: light-dark(#f1f2f9, #1b1e38);\n  --mn-fg: light-dark(#111327, #eef0ff);\n  --mn-muted: light-dark(#5b5e78, #9da1c4);\n  --mn-border: light-dark(#e3e5f0, #262a4a);\n  --mn-input: light-dark(#cfd2e3, #393e68);\n  --mn-primary: light-dark(#1f4fd6, #86a8ff);\n  --mn-primary-fg: light-dark(#ffffff, #081433);\n  --mn-secondary: light-dark(#e9eefb, #1b1e38);\n  --mn-secondary-fg: light-dark(#16307a, #eef0ff);\n  --mn-accent: light-dark(#0e7490, #22d3ee);\n  --mn-accent-fg: light-dark(#ffffff, #032a31);\n  --mn-ring: light-dark(#1f4fd6, #86a8ff);\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(#1f4fd6, #86a8ff);\n  --mn-secondary-text: light-dark(#707384, #7c7f94);\n  --mn-accent-text: light-dark(#0e728e, #22d3ee);\n  --mn-success-text: light-dark(#15793c, #4ade80);\n  --mn-warning-text: light-dark(#aa4f0b, #fbbf24);\n  --mn-danger-text: light-dark(#c82426, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#1f4fd6, #86a8ff);\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: 8px;\n  --mn-radius-box: 12px;\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: 100%;\n  --mn-backdrop: none;\n  --mn-bg-image: none;\n}\n"
}