# Hofun: a MIAN design language

Wide, flat, silky. 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.

- Family: Minimal · Origin: China (Guangdong) · License: MIAN License (free to use)
- Traits: silky, soft, tonal, calm, modern · intensity 2/5 · contrast low · density comfortable. Good for: consumer saas, productivity, messaging, personal finance. Less for: high-contrast brands, print-like editorial.
- Use: `<html data-noodle="hofun">` (or on any element to scope it). Add `data-mode="dark"` or `"light"` to force a mode.
- Everything: https://mian.ro/dist/mian.css · Only this noodle: https://mian.ro/dist/mian-core.css + https://mian.ro/dist/noodles/hofun.css
- Page: https://mian.ro/noodles/hofun

## Design philosophy

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.

## The language

- **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.

## Colour, type and brand

- **Primary** #2c5f66: teal and cyan (deep). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Accent** #8a5a3c: brown and terracotta (mid). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #faf9fb: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Teal and cyan against brown and terracotta, close to complementary: strong contrast, so the accent must stay rare. The page is neutral.
- **Type.** One voice throughout: neutral sans. Headings are medium, which reads as calm and assured. Clear, modern, impartial. The voice of software and signage.
- **Reads as** silky, soft, tonal, calm, modern.
- **Tone of voice.** 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.
- To keep this noodle’s shape with your own brand colours: POST https://mian.ro/api/v1/noodles/create or the MCP tool `create_noodle` (base: "hofun").

## Inspired by the noodle

- 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

## Designing new components in Hofun

Build new components from `--mn-*` tokens, scoped with `[data-noodle="hofun"]`, and follow these rules. Any `--x-*` variables named below are defined by this noodle's skin and can be used inside its scope.

- 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: a selectable tile in this language:

```css
[data-noodle="hofun"] .tile {
  padding: 14px 20px; border: 0; border-radius: 16px;
  background: color-mix(in oklab, var(--mn-primary) 4%, var(--mn-surface));
  transition: background-color 360ms cubic-bezier(.22, 1, .36, 1);
}
[data-noodle="hofun"] .tile:hover,
[data-noodle="hofun"] .tile[aria-selected="true"] { background: color-mix(in oklab, var(--mn-primary) 9%, var(--mn-surface)); color: var(--mn-primary-text); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 14px, box 24px, badge 8px
- Density: comfortable · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #faf9fb | #121116 |
| surface | #ffffff | #19181e |
| surface2 | #f1eff5 | #232029 |
| fg | #1d1b22 | #f3f1f7 |
| muted | #5f5b69 | #a8a3b3 |
| border | #ebe8f0 | #2b2833 |
| input | #dcd8e3 | #3e3a48 |
| primary | #2c5f66 | #8fd0d6 |
| primaryFg | #ffffff | #06262a |
| secondary | #f1eff5 | #232029 |
| secondaryFg | #1d1b22 | #f3f1f7 |
| accent | #8a5a3c | #dcb392 |
| accentFg | #ffffff | #231608 |
| ring | #2c5f66 | #8fd0d6 |
| success | #15803d | #4ade80 |
| successFg | #ffffff | #052e16 |
| warning | #b45309 | #fbbf24 |
| warningFg | #ffffff | #1f1300 |
| danger | #dc2626 | #f87171 |
| dangerFg | #ffffff | #210505 |
| info | #0369a1 | #38bdf8 |
| infoFg | #ffffff | #03202d |
| primaryText | #2c5f66 | #8fd0d6 |
| secondaryText | #727076 | #87848c |
| accentText | #8a5a3c | #dcb392 |
| successText | #16783b | #4ade80 |
| warningText | #a84f0b | #fbbf24 |
| dangerText | #c52526 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #2c5f66 | #8fd0d6 |