Pappardelle
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.
Design language
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.
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.
Designing new components in Pappardelle
MIAN does not ship every component you will need. To make a new one that belongs in Pappardelle, build it from --mn-* tokens inside [data-noodle="pappardelle"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/pappardelle.md · MCP tool get_design_language.
Colour, type and brand
What Pappardelle 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 · Green
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
Accent · Yellow and gold
Optimism, attention, caution. Gold tones add value and ceremony.
Watch for: The lightest hue: white text on yellow fails, so yellow always carries dark text. Large yellow areas tire the eye.
Page · Yellow and gold
Optimism, attention, caution. Gold tones add value and ceremony.
Watch for: The lightest hue: white text on yellow fails, so yellow always carries dark text. Large yellow areas tire the eye.
Green with yellow and gold: a contrasting pair that needs one of the two to dominate. The page itself 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.
Personality
Reads as bold, flat, wide, confident, warm. Intensity 4 of 5.
Suits
presentations, campaigns, agencies, non-profits, events. Less suited to dense admin, subtle luxury.
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.
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
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 Pappardelle. 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="pappardelle">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/pappardelle.css">
<!-- or scope it to one element -->
<section data-noodle="pappardelle" 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 | ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif |
| --mn-radius-field / box / badge | 4px · 8px · 4px |
| density | comfortable |
| shadows | none |