Hofun

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.

MinimalChina (Guangdong)radius 14px / 24pxcomfortable densitynone shadows

Use Hofun Design language (Markdown)Tokens JSON

Design language

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.

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.

Designing new components in Hofun

MIAN does not ship every component you will need. To make a new one that belongs in Hofun, build it from --mn-* tokens inside [data-noodle="hofun"] and follow these rules.

Do

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

[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); }

The same guide, for AI tools: /ai/noodles/hofun.md · MCP tool get_design_language.

Colour, type and brand

What Hofun says before anyone reads a word, and what kind of brand it suits. Tendencies, not laws: see the guides on colour, type, branding and logos.

Primary · Teal and cyan

#2c5f66 · deep

Clarity, cleanliness, calm technology. Cooler than green, softer than blue.

Watch for: Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered.

Accent · Brown and terracotta

#8a5a3c · mid

Earth, craft, reliability, age. Feels made by hand and unhurried.

Watch for: Looks dull on screens unless the neutrals around it are warm too.

Page · White and paper

#faf9fb · pale, muted

Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.

Watch for: Empty is not the same as calm: white space needs a grid behind it.

Teal and cyan against brown and terracotta, close to complementary: strong contrast, so the accent must stay rare. The page itself 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.

Personality

Reads as silky, soft, tonal, calm, modern. Intensity 2 of 5.

Suits

consumer saas, productivity, messaging, personal finance. Less suited to high-contrast brands, print-like editorial.

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.

Inspired by the noodle

Steamed as one thin sheetno borders anywhere; surfaces are separated by tone alone
Cut into wide ribbonswide controls, ribbon-shaped tabs and bars laid edge to edge with no gaps
Silky and slipperylong, frictionless glides; nothing bounces, everything slides into place
Pearly, translucent ricea faint pearl sheen on raised surfaces, a soft celadon primary

Specimen

The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.

Try your brand colour

Your own

Open in the studio

Light

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

Table

Invoice	Status	Amount
INV-001	Paid	€250.00
INV-002	Pending	€150.00
INV-003	Overdue	€350.00

Feedback & motion

Deployed

Your site is live.

Cart
Pay
Done

Dark

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

Table

Invoice	Status	Amount
INV-001	Paid	€250.00
INV-002	Pending	€150.00
INV-003	Overdue	€350.00

Feedback & motion

Deployed

Your site is live.

Cart
Pay
Done

Use it

<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="hofun">

<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/hofun.css">

<!-- or scope it to one element -->
<section data-noodle="hofun" data-mode="dark">…</section>

Palette

Left half light, right half dark. Every text pair is verified for WCAG AA contrast when the site is built.

Background#faf9fb

Surface#ffffff

Muted surface#f1eff5

Foreground#1d1b22

Muted text#5f5b69

Border#ebe8f0

Input border#dcd8e3

Primary#2c5f66

On primary#ffffff

Secondary#f1eff5

Accent#8a5a3c

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#2c5f66

Typography & shape

--mn-font	ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--mn-font-heading	ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--mn-radius-field / box / badge	14px · 24px · 8px
density	comfortable
shadows	none