# Inaniwa: a MIAN design language

Silken, ivory, courtly. Inaniwa udon is kneaded, stretched and dried by hand over several days into thin, silky, glossy ivory noodles, once made only for the court. Inaniwa is an elegant system: ivory and ink, fine serif type, gold hairlines, a silk sheen and generous, unhurried space.

- Family: Elegant · Origin: Japan · Akita · License: MIAN License (free to use)
- Traits: silken, courtly, refined, serene, elegant · intensity 1/5 · contrast low · density comfortable. Good for: hospitality, spa, tea, luxury retail. Less for: dense admin, loud campaigns.
- Use: `<html data-noodle="inaniwa">` (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/inaniwa.css
- Page: https://mian.ro/noodles/inaniwa

## Design philosophy

Inaniwa is courtly silk. The noodles are stretched and dried by hand over days into thin, glossy ivory strands once made only for the court. The interface is ivory and ink, set in a fine book serif with small capitals, framed by gold hairlines set in from the edge, with a faint silk sheen, generous space and slow, unhurried motion.

## Principles

- Space is the luxury: comfortable density and larger padding (1.75rem in cards and dialogs).
- Book serif for headings and numbers; small capitals for labels, buttons and tabs.
- Gold hairlines: 1px gold (or gold at 45%) inset from edges, under focused fields and current tabs.
- Silk: a faint diagonal sheen (--in-silk) on surfaces.
- Unhurried: 260–560ms, gentle ease.

## The language

- **Shape.** 2px fields, 4px panels; fields are single underlines.
- **Surface.** Ivory with silk sheen, 1px border and an inset gold hairline.
- **Colour.** Ink-navy primary, gold accent, ivory neutrals.
- **Type.** Book serif headings at 500, small-cap labels, tabular serif numbers.
- **Motion.** inaniwa-in: 6px rise, 560ms; underlines widen gently.
- **Data.** Fine ink stems with a gold highlight; 1.25px lines; thin donut rings.

## Colour, type and brand

- **Primary** #1e2a44: blue (deep). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #7d6118: olive (deep). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #faf7f0: white and paper (pale). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Blue against olive, close to complementary: strong contrast, so the accent must stay rare. The page is warm.
- **Type.** Two voices: book serif (old-style and transitional) for headings, neutral sans for the interface. Headings are medium, which reads as calm and assured. Considered, literate, established. The voice of books and long reading.
- **Reads as** silken, courtly, refined, serene, elegant (brand dimension: sophistication).
- **Tone of voice.** Quiet. Plain statements in sentence case, no exclamation marks, numbers with their units. Let space do the persuading.
- **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: "inaniwa").

## Inspired by the noodle

- Made by hand over days → unhurried motion and generous space; nothing crowded
- Silky, glossy ivory → ivory surfaces with a faint silk sheen
- Once reserved for the court → fine book serif, small capitals and gold hairlines
- Thin and even → precise 1px rules, perfectly aligned

## Designing new components in Inaniwa

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

- Frame with box-shadow: inset 0 0 0 4px var(--mn-card), inset 0 0 0 5px var(--in-hair).
- Label with font-variant: small-caps; text-transform: lowercase; letter-spacing: .06–.08em.
- Mark focus or selection with a 1px gold line, never a fill.

Avoid:

- Heavy weights and uppercase
- Saturated colour fills
- Tight, dense layouts
- Fast motion

Recipe: a selectable tile in this language:

```css
[data-noodle="inaniwa"] .tile {
  padding: 24px 28px; border: 1px solid var(--mn-border); border-radius: 4px;
  background: var(--mn-card) var(--in-silk); box-shadow: inset 0 0 0 4px var(--mn-card), inset 0 0 0 5px var(--in-hair);
  font-family: var(--mn-font-heading);
}
[data-noodle="inaniwa"] .tile .label { font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif
- Radius: field 2px, box 4px, badge 2px
- Density: comfortable · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #faf7f0 | #0f0e0c |
| surface | #fffdf8 | #171612 |
| surface2 | #f2ece0 | #211f1a |
| fg | #1b1a24 | #f3eee3 |
| muted | #5f5a55 | #aaa192 |
| border | #e6dccb | #332f26 |
| input | #c9bca5 | #4e4839 |
| primary | #1e2a44 | #e7dcc2 |
| primaryFg | #fffdf8 | #16140f |
| secondary | #f2ece0 | #211f1a |
| secondaryFg | #1b1a24 | #f3eee3 |
| accent | #7d6118 | #d4b55f |
| accentFg | #ffffff | #1f1705 |
| ring | #7d6118 | #d4b55f |
| 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 | #1e2a44 | #e7dcc2 |
| secondaryText | #716e6f | #86827a |
| accentText | #7d6118 | #d4b55f |
| successText | #15783b | #4ade80 |
| warningText | #a84e0b | #fbbf24 |
| dangerText | #c52526 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1e2a44 | #e7dcc2 |