LaMian
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.
Design language
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)).
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.
Designing new components in LaMian
MIAN does not ship every component you will need. To make a new one that belongs in LaMian, build it from --mn-* tokens inside [data-noodle="lamian"] and follow these rules.
Do
- 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
[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; }The same guide, for AI tools: /ai/noodles/lamian.md · MCP tool get_design_language.
Colour, type and brand
What LaMian 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 · Teal and cyan
Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
Watch for: Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered.
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.
Blue with its neighbour teal and cyan: an analogous pair, harmonious and natural. The page itself 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.
Personality
Reads as familiar, balanced, modern, trustworthy, corporate. Intensity 2 of 5. Brand dimension: competence.
Suits
saas, b2b, startups, admin panels. Less suited to brands that must look distinctive, 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
- 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
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 LaMian. 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="lamian">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/lamian.css">
<!-- or scope it to one element -->
<section data-noodle="lamian" 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 | 8px · 12px · 999px |
| density | default |
| shadows | soft |