# Linguine: a MIAN design language

Warm paper, a serif voice, one clay colour. Linguine, “little tongues”, are flat narrow strands from Liguria, made to carry pesto and conversation. Linguine is a warm, literate system for products people read and talk to: paper-toned surfaces, a serif for what is said, a quiet sans for controls, hairline edges and a single clay colour kept for actions.

- Family: Minimal · Origin: Italy · Liguria · License: MIAN License (free to use)
- Traits: warm, literate, calm, thoughtful, refined, minimal, human, conversational · intensity 1/5 · contrast medium · density comfortable. Good for: ai products, assistants and chat, writing tools, research, publications, documentation, studios, reading apps. Less for: dense admin, games, loud campaigns.
- Use: `<html data-noodle="linguine">` (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/linguine.css
- Page: https://mian.ro/noodles/linguine

## Design philosophy

Linguine is for products people read and reply to. The page is warm paper rather than white, what is said is set in a serif at a comfortable measure, and the controls around it stay quiet in a plain sans. Edges are hairlines and nothing has a shadow until it floats. One clay colour appears only where something can be done, so the eye finds the action without being shouted at.

## Principles

- Paper, not white: backgrounds are warm off-white (#faf9f5) and ink is a soft near-black (#1f1e1d). Pure #fff and #000 are never the page.
- Two voices: a serif for content and headings, a sans for controls and labels. Never mix them inside one line.
- One clay accent, reserved for the primary action, the focus ring and the chosen state.
- Hairlines and tone separate things; shadows are only for menus, dialogs and toasts.
- Calm motion: 180–240ms, a 2px rise, ease-out with no overshoot.

## The language

- **Shape.** 8px fields and buttons, 14px containers and text areas, pill badges. Text inputs are generous: 0.8rem of padding and 1.55 line height.
- **Surface.** Paper page, white surfaces, 1px warm-grey edges. Overlays lose the border and float on a warm-tinted shadow.
- **Colour.** Clay (#ae5630 / #d97757) for actions; warm greys for everything else. Status colours stay standard.
- **Type.** A book serif at weight 500 for headings, card titles and quotations, tracked −0.02em; the system sans at 400/500 for the interface.
- **Motion.** linguine-in: 2px rise and fade over 240ms on cubic-bezier(.16,1,.3,1). Buttons scale to .985 while pressed.
- **Data.** Bars in 13% ink with the highlighted one in clay; a 1.75px clay line over a faint area.

## Colour, type and brand

- **Primary** #ae5630: brown and terracotta (mid). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Accent** #3d3d3a: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Page** #faf9f5: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** One hue (brown and terracotta) and neutrals: the brand colour is unmistakable and should be kept for actions. The page is warm.
- **Type.** Two voices: book serif (old-style and transitional) for headings, system sans (the device’s own typeface) for the interface. Headings are medium, which reads as calm and assured. Considered, literate, established. The voice of books and long reading.
- **Reads as** warm, literate, calm, thoughtful, refined (brand dimension: sincerity).
- **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. Set the wordmark in a serif to match the headings.
- 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: "linguine").

## Inspired by the noodle

- “Little tongues” → a system built around reading and replying: generous text measure, a serif for content
- Flat, narrow strands → thin hairline edges, no shadows on resting surfaces
- Trofie al pesto on a paper cloth → warm off-white paper, never pure white or pure black
- One spoon of pesto → one clay accent, used only where something can be done

## Designing new components in Linguine

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

- Start with var(--mn-surface) on the paper page, a 1px var(--mn-border) edge and radius 14px; no shadow.
- Put prose in var(--mn-font-heading) (the serif) at 1.05–1.2rem with line-height 1.6; put labels and buttons in var(--mn-font).
- Hover deepens the edge to var(--mn-input) or tints the surface with var(--mn-surface-2); nothing moves.
- Selected: a 2px clay underline or a clay edge with a 3px clay ring at 18%. Never a clay fill behind long text.
- Give text areas room: at least three lines tall, 14px radius, generous padding.

Avoid:

- Pure white pages and pure black text
- A second accent colour
- Shadows on resting cards
- Italic serif used as decoration
- Dense, compact layouts

Recipe: a selectable tile in this language:

```css
[data-noodle="linguine"] .tile {
  padding: 18px 20px; border: 1px solid var(--mn-border); border-radius: 14px;
  background: var(--mn-surface); color: var(--mn-fg);
  transition: border-color 180ms cubic-bezier(.16, 1, .3, 1), background-color 180ms;
}
[data-noodle="linguine"] .tile h3 { font: 500 1.125rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; }
[data-noodle="linguine"] .tile:hover { border-color: var(--mn-input); }
[data-noodle="linguine"] .tile[aria-selected="true"] { border-color: var(--mn-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-primary) 18%, transparent); }
```

## Tokens

- Fonts: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif
- Radius: field 8px, box 14px, badge 999px
- Density: comfortable · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #faf9f5 | #1f1e1d |
| surface | #ffffff | #262624 |
| surface2 | #f0eee6 | #30302e |
| fg | #1f1e1d | #f5f4ee |
| muted | #5e5d59 | #b0aea5 |
| border | #e8e6dc | #3b3a37 |
| input | #d1cfc5 | #55534e |
| primary | #ae5630 | #d97757 |
| primaryFg | #ffffff | #1f1108 |
| secondary | #f0eee6 | #30302e |
| secondaryFg | #1f1e1d | #f5f4ee |
| accent | #3d3d3a | #c2c0b6 |
| accentFg | #ffffff | #1f1e1d |
| ring | #ae5630 | #d97757 |
| 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 | #a3522e | #dc8669 |
| secondaryText | #73716d | #8f8e8a |
| accentText | #3d3d3a | #c2c0b6 |
| successText | #16783a | #4ade80 |
| warningText | #a84f0b | #fbbf24 |
| dangerText | #c52525 | #f87474 |
| infoText | #0369a1 | #38bdf8 |
| link | #ae5630 | #d97757 |