# Tagliatelle: a MIAN design language

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.

- Family: Elegant · Origin: Italy · Bologna · License: MIAN License (free to use)
- Traits: editorial, elegant, literary, warm, refined, italian, european · intensity 2/5 · contrast medium · density comfortable. Good for: publications, magazines, studios, hospitality, fine dining, cultural sites, online courses. Less for: dense admin, games.
- Use: `<html data-noodle="tagliatelle">` (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/tagliatelle.css
- Page: https://mian.ro/noodles/tagliatelle

## Design philosophy

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.

## The language

- **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.

## Colour, type and brand

- **Primary** #2a2118: brown and terracotta (deep, muted). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Accent** #9a6400: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #fbf7ef: white and paper (pale). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Two tones of brown and terracotta: harmonious and calm, with little contrast between brand and accent. The page 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.
- **Reads as** editorial, elegant, literary, warm, refined (brand dimension: sophistication).
- **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.
- 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: "tagliatelle").

## 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

## Designing new components in Tagliatelle

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

- 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 in this language:

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

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Heading font: "EB Garamond", Garamond, "Adobe Garamond Pro", "Cormorant Garamond", "Iowan Old Style", ui-serif, Georgia, serif
- Radius: field 2px, box 4px, badge 2px
- Density: comfortable · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #fbf7ef | #14110c |
| surface | #fffcf6 | #1c1812 |
| surface2 | #f2eadb | #27211a |
| fg | #1f1a14 | #f6efe2 |
| muted | #5e5446 | #b8ab95 |
| border | #e6dcc8 | #3a3226 |
| input | #cbbd9f | #5b4e3c |
| primary | #2a2118 | #f6efe2 |
| primaryFg | #fbf7ef | #1f1a14 |
| secondary | #f2eadb | #27211a |
| secondaryFg | #1f1a14 | #f6efe2 |
| accent | #9a6400 | #f2b84b |
| accentFg | #ffffff | #2a1a00 |
| ring | #9a6400 | #f2b84b |
| 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 | #2a2118 | #f6efe2 |
| secondaryText | #787168 | #8a847a |
| accentText | #905e02 | #f2b84b |
| successText | #16783a | #4ade80 |
| warningText | #a84e0a | #fbbf24 |
| dangerText | #c52524 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #2a2118 | #f6efe2 |