Tagliatelle
Egg ribbons, cut by hand. Editorial. Tagliatelle are ribbons of egg pasta, rolled thin and cut by hand; Bologna keeps a golden reference ribbon in its chamber of commerce. Tagliatelle is an editorial system: Garamond headings, generous measures, ribbon underlines in egg-yolk gold, paper surfaces and hairline rules.
Design language
Tagliatelle is an editorial system: a literary Garamond over a clean body face, classic measures, hairline rules, and a single egg-yolk ribbon that marks what is chosen or important. It reads like a well-made magazine and runs like a calm product.
Principles
- The ribbon marks the choice: a gold underline or band for selected, focused and important.
- Measure before decoration: text columns near 65 characters; space instead of boxes.
- Hairlines, not borders: 1px rules separate; surfaces are paper.
- Serif for voice, sans for work: Garamond for headings, a clean sans for controls.
Shape
2–4px corners; fields are underlines; the chosen tab is a ribbon.
Surface
Warm paper, no shadows; 1px hairlines between sections and rows.
Colour
Ink brown-black, paper, yolk gold (#9a6400) used as the ribbon.
Type
Garamond headings at 500, generous size; clean sans body.
Motion
tagliatelle-in: a slow fade-up in 260ms; ribbons slide under tabs.
Data
Thin ink columns, the highlighted one gold; hairline axes.
Designing new components in Tagliatelle
MIAN does not ship every component you will need. To make a new one that belongs in Tagliatelle, build it from --mn-* tokens inside [data-noodle="tagliatelle"] and follow these rules.
Do
- Selected: box-shadow: inset 0 -3px 0 var(--mn-accent) (the ribbon).
- Headings: font-family var(--mn-font-heading); font-weight 500; letter-spacing -.01em.
- Separate with border-top: 1px solid var(--mn-border); no card backgrounds for text.
Avoid
- Heavy shadows
- Pills and bubbly shapes
- More than one gold element per view
- Serif for small UI labels
Recipe: a selectable tile
[data-noodle="tagliatelle"] .tile { padding: 14px 0; border-top: 1px solid var(--mn-border); font-family: var(--mn-font-heading); font-size: 1.15rem; }
[data-noodle="tagliatelle"] .tile[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--mn-accent); }The same guide, for AI tools: /ai/noodles/tagliatelle.md · MCP tool get_design_language.
Colour, type and brand
What Tagliatelle 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
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 · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
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 brown and terracotta: harmonious and calm, with little contrast between brand and accent. The page itself is warm.
Type
Two voices: garalde serif (garamond family) for headings, neutral sans for the interface. Headings are medium, which reads as calm and assured. Classical, humane, quietly elegant. Five centuries of book typography.
Personality
Reads as editorial, elegant, literary, warm, refined. Intensity 2 of 5. Brand dimension: sophistication.
Suits
publications, magazines, studios, hospitality, fine dining. Less suited to dense admin, games.
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. Set the wordmark in a serif to match the headings.
Inspired by the noodle
- Ribbons of egg dough→ribbon underlines and ribbon-shaped chosen states in yolk gold
- Rolled thin with a pin→hairline rules and thin, calm controls
- A reference ribbon kept in Bologna→exact proportions: classic measure, typographic scale
- Served on a paper menu→warm paper surfaces and a literary serif
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 Tagliatelle. 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="tagliatelle">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/tagliatelle.css">
<!-- or scope it to one element -->
<section data-noodle="tagliatelle" 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 Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif |
| --mn-font-heading | "EB Garamond", Garamond, "Adobe Garamond Pro", "Cormorant Garamond", "Iowan Old Style", ui-serif, Georgia, serif |
| --mn-radius-field / box / badge | 2px · 4px · 2px |
| density | comfortable |
| shadows | none |