Kishimen
Wide, flat, glossy, with dancing flakes. Broad, paper-thin flat noodles from Nagoya, topped with bonito flakes that dance in the steam. Kishimen is a wide, low, flat system: ribbon-shaped controls, full-width bands, and small flakes that flutter on interaction.
Design language
Kishimen is Nagoya’s wide, paper-thin flat noodle, folded over in the bowl and topped with bonito flakes that dance in the steam. The language is low and wide: flat broad controls with a glossy top edge, folded corners on cards and tabs, touching flat bars, and little flakes that flutter on hover.
Principles
- Low and wide: compact heights, generous widths, flat fills.
- The fold: a triangular folded corner (var(--k-fold), 12px) on cards and selected tabs.
- Glossy top: inset 0 1px 0 rgb(255 255 255/.45).
- Flakes: small rotated slivers that flutter on hover and form the spinner.
Shape
3px fields, 5px containers, folded corners.
Surface
Warm paper-white, flat fills with a glossy top edge, no shadows.
Colour
Bonito salmon-brown primary, scallion green accent.
Type
Clean sans, uppercase small labels.
Motion
kishimen-drop: short drop and settle, 200ms. Flakes flutter continuously on hover.
Data
Flat bars that touch, wide and low.
Designing new components in Kishimen
MIAN does not ship every component you will need. To make a new one that belongs in Kishimen, build it from --mn-* tokens inside [data-noodle="kishimen"] and follow these rules.
Do
- Keep the component low (compact density) and wide; flat fill with the glossy top edge.
- Fold the top-right corner with a linear-gradient triangle of size var(--k-fold).
- Use a flake (a small rotated rounded sliver) as the decorative accent.
Avoid
- Tall, narrow controls
- Soft drop shadows
- Round pills
Recipe: a selectable tile
[data-noodle="kishimen"] .tile {
padding: 8px 16px; border: 0; border-radius: 3px;
background: linear-gradient(225deg, var(--mn-bg) 0 var(--k-fold), var(--mn-surface-2) 0);
box-shadow: var(--k-sheen);
}
[data-noodle="kishimen"] .tile[aria-selected="true"] { background: linear-gradient(225deg, var(--mn-bg) 0 var(--k-fold), var(--mn-primary) 0); color: var(--mn-primary-fg); }The same guide, for AI tools: /ai/noodles/kishimen.md · MCP tool get_design_language.
Colour, type and brand
What Kishimen 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 · Red
Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
Watch for: It is also the colour of errors. A red primary button next to a red error message makes both ambiguous, so pair a red brand with a distinct danger treatment (icon and words).
Accent · Green
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.
Red with green: a contrasting pair that needs one of the two to dominate. The page itself is warm.
Type
One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting. Clear, modern, impartial. The voice of software and signage.
Personality
Reads as wide, glossy, low, calm, modern. Intensity 2 of 5.
Suits
media apps, dashboards, consumer tools. Less suited to print-like editorial.
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.
Inspired by the noodle
- Wide and flat→low, broad controls and ribbon tabs
- Glossy surface→a single sheen line along the top edge
- Dancing bonito flakes→flake accents that flutter on hover and focus
- Folded ribbons→cards and tabs with folded corner notches
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 Kishimen. 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="kishimen">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/kishimen.css">
<!-- or scope it to one element -->
<section data-noodle="kishimen" 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-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-radius-field / box / badge | 3px · 5px · 2px |
| density | compact |
| shadows | none |