Linguine

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.

MinimalItaly · Liguriaradius 8px / 14pxcomfortable densitysubtle shadows

Use Linguine Design language (Markdown)Tokens JSON

Design language

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.

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.

Designing new components in Linguine

MIAN does not ship every component you will need. To make a new one that belongs in Linguine, build it from --mn-* tokens inside [data-noodle="linguine"] and follow these rules.

Do

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

[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); }

The same guide, for AI tools: /ai/noodles/linguine.md · MCP tool get_design_language.

Colour, type and brand

What Linguine 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 · Brown and terracotta

#ae5630 · mid

Earth, craft, reliability, age. Feels made by hand and unhurried.

Watch for: Looks dull on screens unless the neutrals around it are warm too.

Accent · Black and ink

#3d3d3a · deep, muted

Authority, precision, luxury. It makes everything next to it look more deliberate.

Watch for: Pure #000 on pure #fff is harsh on long text. Soften one of the two slightly, or warm both.

Page · White and paper

#faf9f5 · pale, muted

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.

One hue (brown and terracotta) and neutrals: the brand colour is unmistakable and should be kept for actions. The page itself 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.

Personality

Reads as warm, literate, calm, thoughtful, refined. Intensity 1 of 5. Brand dimension: sincerity.

Suits

ai products, assistants and chat, writing tools, research, publications. Less suited to dense admin, games, loud campaigns.

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.

Inspired by the noodle

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

Specimen

The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.

Try your brand colour

Your own

Open in the studio

Light

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

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

Dark

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

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

Use it

<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="linguine">

<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/linguine.css">

<!-- or scope it to one element -->
<section data-noodle="linguine" 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.

Background#faf9f5

Surface#ffffff

Muted surface#f0eee6

Foreground#1f1e1d

Muted text#5e5d59

Border#e8e6dc

Input border#d1cfc5

Primary#ae5630

On primary#ffffff

Secondary#f0eee6

Accent#3d3d3a

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#ae5630

Typography & shape

--mn-font	-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--mn-font-heading	"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif
--mn-radius-field / box / badge	8px · 14px · 999px
density	comfortable
shadows	subtle