{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "hofun",
  "name": "Hofun",
  "family": "Minimal",
  "origin": "China (Guangdong)",
  "tagline": "Wide, flat, silky.",
  "description": "Shahe fen is steamed as a thin sheet of rice batter and cut into wide ribbons, smooth, pearly and slippery. Hofun is a borderless, tonal system: wide soft ribbons, sheets instead of boxes, and long gliding motion.",
  "inspiration": [
    "Steamed as one thin sheet → no borders anywhere; surfaces are separated by tone alone",
    "Cut into wide ribbons → wide controls, ribbon-shaped tabs and bars laid edge to edge with no gaps",
    "Silky and slippery → long, frictionless glides; nothing bounces, everything slides into place",
    "Pearly, translucent rice → a faint pearl sheen on raised surfaces, a soft celadon primary"
  ],
  "traits": {
    "mood": [
      "silky",
      "soft",
      "tonal",
      "calm",
      "modern"
    ],
    "intensity": 2,
    "contrast": "low",
    "geometry": "wide, borderless, rounded",
    "type": "clean sans",
    "surface": "tonal fills, no borders",
    "motion": "smooth glide",
    "goodFor": [
      "consumer saas",
      "productivity",
      "messaging",
      "personal finance"
    ],
    "lessFor": [
      "high-contrast brands",
      "print-like editorial"
    ],
    "density": "comfortable"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "Hofun is rice batter steamed into one thin sheet and cut into wide, silky ribbons. The language has no borders: everything is a sheet, told apart from the sheet beneath it only by a slight change of tone. Controls are wide and flat, indicators are ribbons laid behind the text, and everything glides: long, smooth, never bouncing.",
    "principles": [
      "No outlines. Separate things with tone (a 4–9% tint of the primary over the surface).",
      "Wide and flat: generous horizontal padding, low contrast between neighbours, big soft radii.",
      "The ribbon is the indicator: a tinted band behind the selected item, not a line under it.",
      "Glide, don’t bounce: long ease-out (cubic-bezier(.22,1,.36,1)), 260–520ms.",
      "A pearly sheen, never a shadow."
    ],
    "aspects": {
      "Shape": "14px fields, 24px sheets, 8px badges. Switches are flat ribbons (8px radius) with a wide flat knob; slider thumbs are narrow vertical ribbons.",
      "Surface": "Sheets are var(--mn-surface) tinted 4% with the primary and a faint iridescent sheen; fields are pure white ribbons with a 2px lower edge; no borders or shadows anywhere.",
      "Colour": "Soft celadon primary, a soy-brown accent, pearl-grey neutrals. Tones, not contrasts.",
      "Type": "Medium weight (500) headings with slightly tight tracking; nothing heavy.",
      "Motion": "hofun-glide: 16px slide from the left with fade, 480ms. Dialogs rise 20px. Tab ribbons travel 520ms.",
      "Data": "Bars almost touch (3px gap), 8px top radius; thick 4px lines; the table has no rules, rows are ribbons that tint on hover."
    },
    "extend": [
      "Build the component as a sheet: background var(--h-sheet) (primary 4% over surface), radius 16–24px, no border.",
      "Selection is a ribbon: background var(--h-tone) behind the content, radius 12px, moving with the glide curve.",
      "Inputs are white with box-shadow: inset 0 -2px 0 var(--mn-input), turning to var(--mn-ring) on focus.",
      "On hover, lay a lighter layer across from the left (clip-path inset animation)."
    ],
    "avoid": [
      "Any 1px border",
      "Drop shadows under sheets",
      "Springy overshoot",
      "Narrow, tall controls",
      "High-contrast dividers"
    ],
    "recipe": "[data-noodle=\"hofun\"] .tile {\n  padding: 14px 20px; border: 0; border-radius: 16px;\n  background: color-mix(in oklab, var(--mn-primary) 4%, var(--mn-surface));\n  transition: background-color 360ms cubic-bezier(.22, 1, .36, 1);\n}\n[data-noodle=\"hofun\"] .tile:hover,\n[data-noodle=\"hofun\"] .tile[aria-selected=\"true\"] { background: color-mix(in oklab, var(--mn-primary) 9%, var(--mn-surface)); color: var(--mn-primary-text); }"
  },
  "psychology": {
    "temperature": "neutral",
    "colours": [
      {
        "role": "Primary",
        "hex": "#2c5f66",
        "family": "Teal and cyan",
        "depth": "deep",
        "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": "#8a5a3c",
        "family": "Brown and terracotta",
        "depth": "mid",
        "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": "#faf9fb",
        "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 against brown and terracotta, close to complementary: strong contrast, so the accent must stay rare.",
    "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": [
        "silky",
        "soft",
        "tonal",
        "calm",
        "modern"
      ],
      "intensity": 2,
      "dimensions": [],
      "suits": [
        "consumer saas",
        "productivity",
        "messaging",
        "personal finance"
      ],
      "lessFor": [
        "high-contrast brands",
        "print-like editorial"
      ],
      "tone": "Calm and clear. Short sentences, one idea each, a friendly but not chatty register."
    },
    "logo": "Round marks fit: a circular symbol or a soft, lowercase wordmark."
  },
  "url": "https://mian.ro/noodles/hofun",
  "markdownUrl": "https://mian.ro/ai/noodles/hofun.md",
  "stylesheet": "https://mian.ro/dist/noodles/hofun.css",
  "usage": "<html data-noodle=\"hofun\">",
  "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": 500,
  "radius": {
    "field": "14px",
    "box": "24px",
    "badge": "8px"
  },
  "shadow": "none",
  "density": "comfortable",
  "glass": false,
  "light": {
    "bg": "#faf9fb",
    "surface": "#ffffff",
    "surface2": "#f1eff5",
    "fg": "#1d1b22",
    "muted": "#5f5b69",
    "border": "#ebe8f0",
    "input": "#dcd8e3",
    "primary": "#2c5f66",
    "primaryFg": "#ffffff",
    "secondary": "#f1eff5",
    "secondaryFg": "#1d1b22",
    "accent": "#8a5a3c",
    "accentFg": "#ffffff",
    "ring": "#2c5f66",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#2c5f66",
    "secondaryText": "#727076",
    "accentText": "#8a5a3c",
    "successText": "#16783b",
    "warningText": "#a84f0b",
    "dangerText": "#c52526",
    "infoText": "#0369a1",
    "link": "#2c5f66"
  },
  "dark": {
    "bg": "#121116",
    "surface": "#19181e",
    "surface2": "#232029",
    "fg": "#f3f1f7",
    "muted": "#a8a3b3",
    "border": "#2b2833",
    "input": "#3e3a48",
    "primary": "#8fd0d6",
    "primaryFg": "#06262a",
    "secondary": "#232029",
    "secondaryFg": "#f3f1f7",
    "accent": "#dcb392",
    "accentFg": "#231608",
    "ring": "#8fd0d6",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#8fd0d6",
    "secondaryText": "#87848c",
    "accentText": "#dcb392",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#8fd0d6"
  },
  "css": "[data-noodle=\"hofun\"] {\n  --mn-bg: light-dark(#faf9fb, #121116);\n  --mn-surface: light-dark(#ffffff, #19181e);\n  --mn-surface-2: light-dark(#f1eff5, #232029);\n  --mn-fg: light-dark(#1d1b22, #f3f1f7);\n  --mn-muted: light-dark(#5f5b69, #a8a3b3);\n  --mn-border: light-dark(#ebe8f0, #2b2833);\n  --mn-input: light-dark(#dcd8e3, #3e3a48);\n  --mn-primary: light-dark(#2c5f66, #8fd0d6);\n  --mn-primary-fg: light-dark(#ffffff, #06262a);\n  --mn-secondary: light-dark(#f1eff5, #232029);\n  --mn-secondary-fg: light-dark(#1d1b22, #f3f1f7);\n  --mn-accent: light-dark(#8a5a3c, #dcb392);\n  --mn-accent-fg: light-dark(#ffffff, #231608);\n  --mn-ring: light-dark(#2c5f66, #8fd0d6);\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(#2c5f66, #8fd0d6);\n  --mn-secondary-text: light-dark(#727076, #87848c);\n  --mn-accent-text: light-dark(#8a5a3c, #dcb392);\n  --mn-success-text: light-dark(#16783b, #4ade80);\n  --mn-warning-text: light-dark(#a84f0b, #fbbf24);\n  --mn-danger-text: light-dark(#c52526, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#2c5f66, #8fd0d6);\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: 500;\n  --mn-radius-field: 14px;\n  --mn-radius-box: 24px;\n  --mn-radius-badge: 8px;\n  --mn-shadow-sm: none;\n  --mn-shadow-md: none;\n  --mn-shadow-lg: none;\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"
}