# LaMian: a MIAN design language

Long, smooth, dependable. A cobalt primary on cool near-white with a cyan accent. The familiar product system: balanced, legible, and dependable rather than distinctive.

- Family: Linear · Origin: China · License: MIAN License (free to use)
- Traits: familiar, balanced, modern, trustworthy, corporate · intensity 2/5 · contrast medium · density default. Good for: saas, b2b, startups, admin panels. Less for: brands that must look distinctive, editorial.
- Use: `<html data-noodle="lamian">` (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/lamian.css
- Page: https://mian.ro/noodles/lamian

## Design philosophy

Lamian is pulled by hand from one piece of dough into a single long, elastic strand. The language is about stretch and continuity: controls stretch when pulled, indicators glide and lengthen between positions, charts become long horizontal strands, and everything springs with a lively overshoot.

## Principles

- One continuous strand: a single indicator travels between options instead of each option having its own.
- Elastic: presses stretch horizontally (scale(1.1,.9)); knobs lengthen as they move.
- Long and horizontal: pills, long bars, wide letter-spacing on hover.
- Springy overshoot everywhere (cubic-bezier(.5,1.7,.4,.8)).

## The language

- **Shape.** Pill-shaped fields and buttons, 22px textareas, long capsule knobs.
- **Surface.** Clean cool white, soft shadows; cards carry a gradient strand along the top that pulls taut on hover.
- **Colour.** Indigo primary, deep cyan accent.
- **Type.** Clean sans; buttons widen their letter-spacing on hover.
- **Motion.** lamian-stretch: enter from scaleX(.35) with overshoot, 420ms. Tab indicator glides 460ms.
- **Data.** All bar charts become horizontal strands (0.55rem pills) growing from the left; 3px lines.

## Colour, type and brand

- **Primary** #1f4fd6: blue (mid, saturated). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #0e7490: teal and cyan (mid, saturated). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Page** #fbfbfe: white and paper (pale). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Blue with its neighbour teal and cyan: an analogous pair, harmonious and natural. The page is neutral.
- **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** familiar, balanced, modern, trustworthy, corporate (brand dimension: competence).
- **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: "lamian").

## Inspired by the noodle

- Hand-pulled → controls stretch horizontally when pressed
- Elastic dough → spring easing with visible overshoot
- Long strands → long pill shapes and horizontal bar charts
- One continuous strand → indicators that slide between positions instead of jumping

## Designing new components in LaMian

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

- Represent selection with one shared indicator that moves (use --_ix / --_iw like the tab list).
- Make the component a pill and stretch it on press: transform: scale(1.1, .9).
- Animate lengths (width, scaleX from the left) rather than opacity.

Avoid:

- Square corners
- Vertical emphasis
- Linear or flat motion
- Separate indicators per item

Recipe: a selectable tile in this language:

```css
[data-noodle="lamian"] .tile {
  padding: 12px 22px; border-radius: 999px; background: var(--mn-surface);
  transition: transform 380ms cubic-bezier(.5, 1.7, .4, .8), letter-spacing 380ms cubic-bezier(.5, 1.7, .4, .8);
}
[data-noodle="lamian"] .tile:hover { letter-spacing: .04em; }
[data-noodle="lamian"] .tile:active { transform: scale(1.1, .9); transition-duration: 120ms; }
```

## 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 8px, box 12px, badge 999px
- Density: default · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #fbfbfe | #0b0c18 |
| surface | #ffffff | #12142a |
| surface2 | #f1f2f9 | #1b1e38 |
| fg | #111327 | #eef0ff |
| muted | #5b5e78 | #9da1c4 |
| border | #e3e5f0 | #262a4a |
| input | #cfd2e3 | #393e68 |
| primary | #1f4fd6 | #86a8ff |
| primaryFg | #ffffff | #081433 |
| secondary | #e9eefb | #1b1e38 |
| secondaryFg | #16307a | #eef0ff |
| accent | #0e7490 | #22d3ee |
| accentFg | #ffffff | #032a31 |
| ring | #1f4fd6 | #86a8ff |
| 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 | #1f4fd6 | #86a8ff |
| secondaryText | #707384 | #7c7f94 |
| accentText | #0e728e | #22d3ee |
| successText | #15793c | #4ade80 |
| warningText | #aa4f0b | #fbbf24 |
| dangerText | #c82426 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1f4fd6 | #86a8ff |