# Somen: a MIAN design language

Hair-thin, white, served on ice. The thinnest wheat noodle, bundled straight and eaten ice-cold. Somen is a hairline system: 1px strokes, underline fields, dot-sized knobs, light type and crisp, instant motion.

- Family: Thin · Origin: Japan · License: MIAN License (free to use)
- Traits: hairline, delicate, cool, quiet, refined, japanese · intensity 1/5 · contrast medium · density compact. Good for: architecture, research, fashion, studios, quiet luxury. Less for: loud campaigns, children.
- Use: `<html data-noodle="somen">` (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/somen.css
- Page: https://mian.ro/noodles/somen

## Design philosophy

Somen is the thinnest wheat noodle, bundled straight and eaten on ice. The language is drawn with a 1px pen: every element is reduced to its outline or a single line, type is light, and motion is almost instant, cool, precise, and completely unornamented.

## Principles

- A hairline is enough: 1px strokes for borders, underlines, dividers and chart marks.
- Fields are a line to write on, not a box.
- Light type weights carry elegance; hierarchy comes from size and letter-spacing, not weight.
- No shadows, no fills where an outline will do.
- Motion is short (≈110–120ms) and linear: nothing drifts.

## The language

- **Shape.** Tight 2px field radius, 4px containers. Switch knobs are 0.7rem beads on a 2px strand; step markers are thin rings.
- **Surface.** Icy blue-white page, white surfaces, 1px cool borders, no shadow at all except a faint one on floating menus.
- **Colour.** Ink (near-black navy) as primary; a clear ice-blue accent; everything else is cool grey.
- **Type.** Headings at weight 200–300 with tight tracking; table headers tiny, uppercase, widely spaced (0.12em).
- **Motion.** somen-in: 3px drop and fade in 120ms, linear. Focus underlines draw left-to-right in 200ms.
- **Data.** Bars are 2px stems topped with a small cap; horizontal bars are 1px lines; donuts are 3px rings; lines are 1px with visible points.

## Colour, type and brand

- **Primary** #0b1220: blue (deep). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #0369a1: blue (mid, saturated). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Page** #f8fafc: white and paper (pale). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Two tones of blue: harmonious and calm, with little contrast between brand and accent. The page is cool.
- **Type.** One voice throughout: neutral sans. Headings are light to regular, which reads as delicate and unhurried. Clear, modern, impartial. The voice of software and signage.
- **Reads as** hairline, delicate, cool, quiet, refined (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. Use a light or regular wordmark; a heavy one would overpower this interface.
- 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: "somen").

## Inspired by the noodle

- Hair-thin strands → 1px borders, hairline charts and a 2px switch track
- Bundled straight → strict horizontal rules, underline-only inputs
- Served on ice → icy blue-white surfaces, cool ink primary
- Delicate → light font weights, tight 2px radius, no shadows

## Designing new components in Somen

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

- Draw the component with 1px lines in var(--mn-border) or var(--mn-fg); never fill a surface just to separate it.
- Inputs inside the component use only a bottom border that animates to var(--mn-fg) on focus.
- Selected = inverted (var(--mn-fg) background, var(--mn-bg) text) or a 1px underline: pick one.
- Keep text at weight 300–400; label small caps with letter-spacing .1em.

Avoid:

- Borders thicker than 1px
- Radii above 4px
- Shadows and glows
- Bold display type
- Spring or overshoot

Recipe: a selectable tile in this language:

```css
[data-noodle="somen"] .tile {
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--mn-border);
  border-radius: 0; background: none; font-weight: 300; letter-spacing: .02em;
}
[data-noodle="somen"] .tile[aria-selected="true"] { border-bottom-color: var(--mn-fg); }
[data-noodle="somen"] .tile:active { opacity: .75; }
```

## 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 2px, box 4px, badge 2px
- Density: compact · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #f8fafc | #070b12 |
| surface | #ffffff | #0c121c |
| surface2 | #f1f5f9 | #141c28 |
| fg | #0b1220 | #eef3f9 |
| muted | #566174 | #93a1b5 |
| border | #e2e8f0 | #1e2835 |
| input | #cbd5e1 | #2d3a4c |
| primary | #0b1220 | #eef3f9 |
| primaryFg | #f8fafc | #0b1220 |
| secondary | #f1f5f9 | #141c28 |
| secondaryFg | #0b1220 | #eef3f9 |
| accent | #0369a1 | #7dd3fc |
| accentFg | #ffffff | #04202e |
| ring | #475569 | #93a1b5 |
| 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 | #0b1220 | #eef3f9 |
| secondaryText | #6c717b | #787f88 |
| accentText | #0369a1 | #7dd3fc |
| successText | #14793b | #4ade80 |
| warningText | #aa4f0a | #fbbf24 |
| dangerText | #c72425 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0b1220 | #eef3f9 |