# Hōtō: a MIAN design language

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.

- Family: Textured · Origin: Japan · Yamanashi · License: MIAN License (free to use)
- Traits: rustic, earthy, warm, homely, traditional · intensity 2/5 · contrast medium · density comfortable. Good for: food, farms, crafts, local businesses, hospitality. Less for: tech startups, fintech.
- Use: `<html data-noodle="hoto">` (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/hoto.css
- Page: https://mian.ro/noodles/hoto

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #6b4423: brown and terracotta (deep). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Accent** #b45309: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #f1e9dc: brown and terracotta (pale). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Scheme.** Two tones of brown and terracotta: harmonious and calm, with little contrast between brand and accent. The page 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.
- **Reads as** rustic, earthy, warm, homely, traditional (brand dimension: sincerity, ruggedness).
- **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.
- 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: "hoto").

## 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

## Designing new components in Hōtō

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

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

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

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif
- Radius: field 10px, box 16px, badge 8px
- Density: comfortable · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #f1e9dc | #15100b |
| surface | #fbf6ee | #1f1811 |
| surface2 | #e6dac7 | #2b2218 |
| fg | #271c12 | #f3e9da |
| muted | #675644 | #b3a18a |
| border | #d8c8b0 | #3d3124 |
| input | #b9a384 | #5a4a37 |
| primary | #6b4423 | #e0b98f |
| primaryFg | #ffffff | #21150a |
| secondary | #e6dac7 | #2b2218 |
| secondaryFg | #271c12 | #f3e9da |
| accent | #b45309 | #fb923c |
| accentFg | #ffffff | #2a1204 |
| ring | #6b4423 | #e0b98f |
| 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 | #6b4423 | #e0b98f |
| secondaryText | #73685a | #8b8275 |
| accentText | #a34c0a | #fb923c |
| successText | #177438 | #4ade80 |
| warningText | #a34c0a | #fbbf24 |
| dangerText | #bf2423 | #f87171 |
| infoText | #04679e | #38bdf8 |
| link | #6b4423 | #e0b98f |