Somen
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.
Design language
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.
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.
Designing new components in Somen
MIAN does not ship every component you will need. To make a new one that belongs in Somen, build it from --mn-* tokens inside [data-noodle="somen"] and follow these rules.
Do
- 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
[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; }The same guide, for AI tools: /ai/noodles/somen.md · MCP tool get_design_language.
Colour, type and brand
What Somen 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 · 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.
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.
Two tones of blue: harmonious and calm, with little contrast between brand and accent. The page itself 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.
Personality
Reads as hairline, delicate, cool, quiet, refined. Intensity 1 of 5. Brand dimension: sophistication.
Suits
architecture, research, fashion, studios, quiet luxury. Less suited to loud campaigns, children.
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.
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
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 Somen. 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="somen">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/somen.css">
<!-- or scope it to one element -->
<section data-noodle="somen" 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 | 2px · 4px · 2px |
| density | compact |
| shadows | none |