{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "juksing",
  "name": "Juksing",
  "family": "Linear",
  "origin": "China · Hong Kong",
  "tagline": "Bamboo-pole noodles. Straight, jointed, springy.",
  "description": "Jook-sing noodles are kneaded by a cook who sits on the end of a long bamboo pole and bounces along the dough. Juksing is a bamboo system: straight lines broken by nodes, segmented progress and sliders with joints, dividers and step lines with node rings, tabs with node caps, and a small springy bounce when pressed.",
  "inspiration": [
    "A long bamboo pole → straight lines interrupted by nodes: segmented progress, jointed dividers and step connectors",
    "Bouncing on the pole → a small vertical bounce on press and on arrival",
    "Egg-yellow, springy noodles → a warm yolk accent on sage-green ink",
    "Pressed flat, then cut → firm 4px corners and even rhythm"
  ],
  "traits": {
    "mood": [
      "springy",
      "jointed",
      "crafted",
      "natural",
      "structured"
    ],
    "intensity": 2,
    "contrast": "medium",
    "geometry": "straight lines with joints",
    "type": "sans",
    "surface": "bamboo-toned, jointed rules",
    "motion": "springy",
    "goodFor": [
      "logistics",
      "outdoor",
      "timelines",
      "process-heavy sites"
    ],
    "lessFor": [
      "luxury"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Juksing is bamboo. The noodles are kneaded by a cook bouncing along a bamboo pole, so straight lines are broken by nodes: buttons carry a node ring near each end, progress bars, sliders and chart bars are jointed into segments, dividers and tab lines end in round node caps, and things answer a press with a small springy bounce.",
    "principles": [
      "Nodes on straight lines: joints every 26–40px (--jk-joints), node rings near the ends of buttons (--jk-rings).",
      "Culm shading: a soft top-light / bottom-shade gradient (--jk-culm) on filled controls.",
      "Bounce: presses and selections play juksing-bounce (2px down, 1px up).",
      "Sage-green ink, egg-yolk accent, 4–6px corners."
    ],
    "aspects": {
      "Shape": "4px fields, 6px surfaces; tab and step lines end in round caps.",
      "Surface": "White with light borders; card headings underlined by a line with node caps.",
      "Colour": "Sage bamboo green, egg-yolk accent, pale bamboo neutrals.",
      "Type": "Sans at 550–650.",
      "Motion": "juksing-in drops in and bounces (320ms); presses bounce.",
      "Data": "Bars jointed every 18px; a segmented ring spinner."
    },
    "extend": [
      "Break long lines with joints: background: var(--jk-joints), var(--mn-surface-2).",
      "Filled controls: background-image: var(--jk-rings), var(--jk-culm).",
      "End indicator lines with two small circles (radial gradients at 3px and calc(100% - 3px)).",
      "On press: animation: juksing-bounce 260ms."
    ],
    "avoid": [
      "Long unbroken bars",
      "Glass or blur",
      "Sharp 0px corners"
    ],
    "recipe": "[data-noodle=\"juksing\"] .tile {\n  padding: 12px 16px; border: 1px solid var(--mn-border); border-radius: 6px;\n  background: var(--jk-joints), var(--mn-surface);\n}\n[data-noodle=\"juksing\"] .tile[aria-selected=\"true\"] { background: var(--jk-rings), var(--jk-culm), var(--mn-primary); color: var(--mn-primary-fg); }\n[data-noodle=\"juksing\"] .tile:active { animation: juksing-bounce 260ms cubic-bezier(.3, 1.4, .5, 1); }"
  },
  "psychology": {
    "temperature": "warm",
    "colours": [
      {
        "role": "Primary",
        "hex": "#33513a",
        "family": "Green",
        "depth": "deep, muted",
        "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": "Accent",
        "hex": "#8f5b0e",
        "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": "#f6f6f0",
        "family": "Yellow and gold",
        "depth": "pale, muted",
        "says": "Optimism, attention, caution. Gold tones add value and ceremony.",
        "use": "Highlights, warnings, playful consumer brands; gold for luxury and awards.",
        "risk": "The lightest hue: white text on yellow fails, so yellow always carries dark text. Large yellow areas tire the eye."
      }
    ],
    "relation": "Green with brown and terracotta: 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": 650,
      "summary": "One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "springy",
        "jointed",
        "crafted",
        "natural",
        "structured"
      ],
      "intensity": 2,
      "dimensions": [
        "Ruggedness"
      ],
      "suits": [
        "logistics",
        "outdoor",
        "timelines",
        "process-heavy sites"
      ],
      "lessFor": [
        "luxury"
      ],
      "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/juksing",
  "markdownUrl": "https://mian.ro/ai/noodles/juksing.md",
  "stylesheet": "https://mian.ro/dist/noodles/juksing.css",
  "usage": "<html data-noodle=\"juksing\">",
  "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": "4px",
    "box": "6px",
    "badge": "3px"
  },
  "shadow": "subtle",
  "density": "default",
  "glass": false,
  "light": {
    "bg": "#f6f6f0",
    "surface": "#ffffff",
    "surface2": "#ecece3",
    "fg": "#151a14",
    "muted": "#5b6356",
    "border": "#dfe2d6",
    "input": "#b3baa7",
    "primary": "#33513a",
    "primaryFg": "#ffffff",
    "secondary": "#ecece3",
    "secondaryFg": "#151a14",
    "accent": "#8f5b0e",
    "accentFg": "#ffffff",
    "ring": "#33513a",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#33513a",
    "secondaryText": "#6f726b",
    "accentText": "#8f5b0e",
    "successText": "#15783a",
    "warningText": "#a74e0a",
    "dangerText": "#c82524",
    "infoText": "#0369a1",
    "link": "#33513a"
  },
  "dark": {
    "bg": "#0d100c",
    "surface": "#141812",
    "surface2": "#1c211a",
    "fg": "#eef1e8",
    "muted": "#a1ab98",
    "border": "#283024",
    "input": "#4b5644",
    "primary": "#a9d3a4",
    "primaryFg": "#0e1f10",
    "secondary": "#1c211a",
    "secondaryFg": "#eef1e8",
    "accent": "#e8b45a",
    "accentFg": "#241603",
    "ring": "#a9d3a4",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#a9d3a4",
    "secondaryText": "#81857d",
    "accentText": "#e8b45a",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#a9d3a4"
  },
  "css": "[data-noodle=\"juksing\"] {\n  --mn-bg: light-dark(#f6f6f0, #0d100c);\n  --mn-surface: light-dark(#ffffff, #141812);\n  --mn-surface-2: light-dark(#ecece3, #1c211a);\n  --mn-fg: light-dark(#151a14, #eef1e8);\n  --mn-muted: light-dark(#5b6356, #a1ab98);\n  --mn-border: light-dark(#dfe2d6, #283024);\n  --mn-input: light-dark(#b3baa7, #4b5644);\n  --mn-primary: light-dark(#33513a, #a9d3a4);\n  --mn-primary-fg: light-dark(#ffffff, #0e1f10);\n  --mn-secondary: light-dark(#ecece3, #1c211a);\n  --mn-secondary-fg: light-dark(#151a14, #eef1e8);\n  --mn-accent: light-dark(#8f5b0e, #e8b45a);\n  --mn-accent-fg: light-dark(#ffffff, #241603);\n  --mn-ring: light-dark(#33513a, #a9d3a4);\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(#33513a, #a9d3a4);\n  --mn-secondary-text: light-dark(#6f726b, #81857d);\n  --mn-accent-text: light-dark(#8f5b0e, #e8b45a);\n  --mn-success-text: light-dark(#15783a, #4ade80);\n  --mn-warning-text: light-dark(#a74e0a, #fbbf24);\n  --mn-danger-text: light-dark(#c82524, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#33513a, #a9d3a4);\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: 4px;\n  --mn-radius-box: 6px;\n  --mn-radius-badge: 3px;\n  --mn-shadow-sm: 0 1px 2px rgb(0 0 0 / .05);\n  --mn-shadow-md: 0 2px 6px -1px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);\n  --mn-shadow-lg: 0 12px 32px -8px rgb(0 0 0 / .18), 0 4px 8px -4px rgb(0 0 0 / .08);\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"
}