# Pappardelle: a MIAN design language

Wide ribbons of flat colour. Pappardelle are the widest ribbons of egg pasta, cut by hand and served with slow Tuscan ragù. Pappardelle is a bold flat system: broad bands of solid colour, wide ribbons for tabs and progress, tall flat buttons, and no borders, gradients or shadows anywhere.

- Family: Flat · Origin: Italy · Tuscany · License: MIAN License (free to use)
- Traits: bold, flat, wide, confident, warm, european · intensity 4/5 · contrast high · density comfortable. Good for: presentations, campaigns, agencies, non-profits, events. Less for: dense admin, subtle luxury.
- Use: `<html data-noodle="pappardelle">` (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/pappardelle.css
- Page: https://mian.ro/noodles/pappardelle

## Design philosophy

Pappardelle is wide, flat colour. The broadest ribbons of egg pasta become broad bands of solid colour: tall flat buttons, tabs as ribbons, a green ribbon across the top of every card, tonal fields with a thick underline, and no borders, gradients, shadows or blur anywhere. Confident and generous, like a Tuscan table.

## Principles

- Tone, not line: separate things with flat tonal fills and 2–6px bands of colour, never 1px borders.
- Ribbons: tabs, progress and card tops are wide bands; the chosen one is solid green.
- Tall controls (+4px) and comfortable density.
- Yolk yellow is the ribbon’s edge, on progress, the switch knob and slider thumb.

## The language

- **Shape.** 4px controls, 8px containers; rectangles cut from a sheet.
- **Surface.** Flat white and tonal surfaces; a 6px inset band of primary across the top of cards and dialogs.
- **Colour.** Cypress green (#1f5f4a), yolk yellow (#e9b949), warm neutrals.
- **Type.** Clean sans at 650–750.
- **Motion.** pappardelle-in: a ribbon wiping in from the left (clip-path) in 260ms.
- **Data.** Square flat columns; zebra tables with a solid green header; a thick 34% donut.

## Colour, type and brand

- **Primary** #1f5f4a: green (deep). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Accent** #e9b949: yellow and gold (mid, saturated). Optimism, attention, caution. Gold tones add value and ceremony.
- **Page** #f6f4ef: yellow and gold (pale, muted). Optimism, attention, caution. Gold tones add value and ceremony.
- **Scheme.** Green with yellow and gold: a contrasting pair that needs one of the two to dominate. The page is warm.
- **Type.** One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting. Clear, modern, impartial. The voice of software and signage.
- **Reads as** bold, flat, wide, confident, warm.
- **Tone of voice.** Bold. Short claims, strong verbs, big numbers. Say one thing per screen and say it loudly.
- **Logo.** A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles.
- 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: "pappardelle").

## Inspired by the noodle

- The widest ribbon → broad flat bands of colour; tabs and progress are wide ribbons
- Cut by hand from a sheet → flat rectangles with small 4px corners
- Tuscan hills and egg yolk → a deep cypress green with a ribbon of yolk yellow
- Pappare, “to gobble” → generous sizes and confident colour

## Designing new components in Pappardelle

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

- border: 0; background: var(--mn-surface-2); border-radius: 4px.
- Top ribbon: box-shadow: inset 0 6px 0 var(--mn-primary).
- Selected: background var(--mn-primary); color var(--mn-primary-fg).

Avoid:

- Borders and hairlines
- Any shadow or blur
- Thin, timid controls

Recipe: a selectable tile in this language:

```css
[data-noodle="pappardelle"] .tile { padding: 14px 18px; border: 0; border-radius: 4px; background: var(--mn-surface-2); font-weight: 650; }
[data-noodle="pappardelle"] .tile:hover { background: var(--pp-band); }
[data-noodle="pappardelle"] .tile[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: inset 0 -4px 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: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Radius: field 4px, box 8px, badge 4px
- Density: comfortable · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #f6f4ef | #10130f |
| surface | #ffffff | #181c16 |
| surface2 | #ece8de | #22271f |
| fg | #1c1f1a | #eef1ea |
| muted | #5d6158 | #a3aa9c |
| border | #e2ddd1 | #2b3127 |
| input | #cbc5b6 | #465040 |
| primary | #1f5f4a | #6fcfae |
| primaryFg | #ffffff | #04241a |
| secondary | #ece8de | #22271f |
| secondaryFg | #1c1f1a | #eef1ea |
| accent | #e9b949 | #f1c95e |
| accentFg | #2b1f00 | #2b1f00 |
| ring | #1f5f4a | #6fcfae |
| 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 | #1f5f4a | #6fcfae |
| secondaryText | #6f6f68 | #848880 |
| accentText | #826c32 | #f1c95e |
| successText | #16783a | #4ade80 |
| warningText | #a84f0a | #fbbf24 |
| dangerText | #c52525 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1f5f4a | #6fcfae |