# Kishimen: a MIAN design language

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.

- Family: Linear · Origin: Nagoya · flat noodles · License: MIAN License (free to use)
- Traits: wide, glossy, low, calm, modern · intensity 2/5 · contrast medium · density compact. Good for: media apps, dashboards, consumer tools. Less for: print-like editorial.
- Use: `<html data-noodle="kishimen">` (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/kishimen.css
- Page: https://mian.ro/noodles/kishimen

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #9a4a3c: red (mid). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Accent** #3f7d3a: green (mid). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #fbfaf6: white and paper (pale). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Red with green: a contrasting pair that needs one of the two to dominate. The page 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.
- **Reads as** wide, glossy, low, calm, modern.
- **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.
- 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: "kishimen").

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

## Designing new components in Kishimen

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

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

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

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 3px, box 5px, badge 2px
- Density: compact · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #fbfaf6 | #15120e |
| surface | #ffffff | #1c1813 |
| surface2 | #f3f0e8 | #26211a |
| fg | #221d17 | #f3eee5 |
| muted | #625a4e | #aca290 |
| border | #e7e1d4 | #342d24 |
| input | #d3cbba | #483f33 |
| primary | #9a4a3c | #f0a594 |
| primaryFg | #ffffff | #2a0e08 |
| secondary | #f3e7e1 | #26211a |
| secondaryFg | #6b2e24 | #f3eee5 |
| accent | #3f7d3a | #86c77e |
| accentFg | #ffffff | #0b2408 |
| ring | #9a4a3c | #f0a594 |
| 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 | #9a4a3c | #f0a594 |
| secondaryText | #7a726c | #88837b |
| accentText | #3d7537 | #86c77e |
| successText | #16783a | #4ade80 |
| warningText | #a84f0a | #fbbf24 |
| dangerText | #c62524 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #9a4a3c | #f0a594 |