Inaniwa
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.
Design language
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.
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.
Designing new components in Inaniwa
MIAN does not ship every component you will need. To make a new one that belongs in Inaniwa, build it from --mn-* tokens inside [data-noodle="inaniwa"] and follow these rules.
Do
- 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
[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; }The same guide, for AI tools: /ai/noodles/inaniwa.md · MCP tool get_design_language.
Colour, type and brand
What Inaniwa 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 · Blue
Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.
Accent · Olive
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
Page · White and paper
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.
Blue against olive, close to complementary: strong contrast, so the accent must stay rare. The page itself 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.
Personality
Reads as silken, courtly, refined, serene, elegant. Intensity 1 of 5. Brand dimension: sophistication.
Suits
hospitality, spa, tea, luxury retail. Less suited to dense admin, loud campaigns.
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.
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
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 Inaniwa. 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="inaniwa">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/inaniwa.css">
<!-- or scope it to one element -->
<section data-noodle="inaniwa" 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 | "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif |
| --mn-radius-field / box / badge | 2px · 4px · 2px |
| density | comfortable |
| shadows | subtle |