Hōtō
Rustic, earthy, simmered. Hōtō are thick, flat, hand-cut noodles simmered in miso with pumpkin and root vegetables in a heavy iron pot. Hōtō is a rustic stoneware system: coarse clay grain on every surface, thick glazed edges, earthy miso and pumpkin colours and slow, simmering motion.
Design language
Hōtō is stoneware and a simmering pot. Thick hand-cut noodles are stewed in miso with pumpkin in a heavy iron pot, so surfaces carry a coarse clay grain, controls have thick glazed rims, shapes are hand-thrown (every corner slightly different), colours are earth, miso and pumpkin, and motion rises and settles slowly.
Principles
- Clay grain (--ht-grain) on every surface and control.
- Glaze: a light top rim and a darker 3px bottom rim (--ht-glaze).
- Hand-thrown radii: uneven elliptical corners (--ht-throw, --ht-throw-sm).
- Simmer: 400–520ms rises with a gentle settle; a bubbling spinner.
Shape
Uneven radii everywhere; round pebble knobs.
Surface
Warm clay with grain, glazed rims and heavy soft shadows.
Colour
Miso brown primary, pumpkin accent, green and yolk for data.
Type
Serif headings, sans body.
Motion
hoto-in: 10px rise with a 1px overshoot, 520ms; hoto-simmer bubble.
Data
Grainy clay bars in four vegetable colours.
Designing new components in Hōtō
MIAN does not ship every component you will need. To make a new one that belongs in Hōtō, build it from --mn-* tokens inside [data-noodle="hoto"] and follow these rules.
Do
- border-radius: var(--ht-throw); background-image: var(--ht-grain); box-shadow: var(--ht-glaze), 0 14px 28px -18px rgb(60 30 10 / .45).
- Controls: --ht-throw-sm radii, 1.5px borders.
- Keep transitions ≥240ms.
Avoid
- Perfect geometric radii
- Cold greys and blues
- Glass or gloss
Recipe: a selectable tile
[data-noodle="hoto"] .tile {
padding: 16px; border: 1.5px solid var(--mn-border); border-radius: var(--ht-throw);
background: var(--mn-surface) var(--ht-grain); box-shadow: var(--ht-glaze), 0 14px 28px -18px rgb(60 30 10 / .45);
transition: transform 240ms cubic-bezier(.25, .8, .3, 1);
}
[data-noodle="hoto"] .tile:hover { transform: translateY(-1px); }The same guide, for AI tools: /ai/noodles/hoto.md · MCP tool get_design_language.
Colour, type and brand
What Hōtō 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 · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
Accent · Brown and terracotta
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 · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
Two tones of brown and terracotta: harmonious and calm, with little contrast between brand and accent. The page itself is warm.
Type
Two voices: book serif (old-style and transitional) for headings, neutral sans for the interface. Headings are semibold, which reads as confident without shouting. Considered, literate, established. The voice of books and long reading.
Personality
Reads as rustic, earthy, warm, homely, traditional. Intensity 2 of 5. Brand dimension: sincerity, ruggedness.
Suits
food, farms, crafts, local businesses, hospitality. Less suited to tech startups, fintech.
Tone of voice
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. Set the wordmark in a serif to match the headings.
Inspired by the noodle
- A heavy iron pot and clay bowls→coarse stoneware grain on surfaces, glazed rims on controls
- Miso broth and pumpkin→earthy browns with a pumpkin-orange accent
- Thick, hand-cut, irregular→slightly uneven radii and hand-thrown shapes
- Simmered for a long time→slow motion that rises and settles gently
Specimen
The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
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
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
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
This palette on Hōtō. Load it after mian.css and put data-brand on the same element as data-noodle.
Use it
<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="hoto">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/hoto.css">
<!-- or scope it to one element -->
<section data-noodle="hoto" 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.
Typography & shape
| --mn-font | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-font-heading | ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif |
| --mn-radius-field / box / badge | 10px · 16px · 8px |
| density | comfortable |
| shadows | soft |