Farfalle
Butterflies in pastel. Farfalle, butterflies, or bow ties, are pinched in the middle from a small rectangle with crimped edges. Farfalle is a playful flat system in pastels: soft flat fills with no shadows, pinched bow-tie badges and tabs, crimped edges on dividers, and a springy flutter when things appear.
Design language
Farfalle is playful and flat. Butterflies, or bow ties, are pinched in the middle from a small crimped rectangle, so badges and the chosen tab are pinched at the waist, dividers are crimped zig-zags, colour is flat pastel (raspberry, mint, lilac, butter) with no shadows, and things arrive with a springy, slightly tilted flutter.
Principles
- Pinch the important thing: clip-path: var(--ff-pinch) on badges and the selected tab.
- Flat pastels do the separating: mint, lilac and butter surfaces; no shadows.
- Crimped, not ruled: zig-zag dividers and step connectors (--ff-crimp).
- Springy motion with a 1–2° tilt.
Shape
12px controls, 18px containers, pill tabs; bow-tie badges.
Surface
White cards with a 2px pastel ring; butter footers; mint and lilac fills.
Colour
Raspberry primary, lilac accent, mint and butter tints on warm white.
Type
Rounded sans at 700–750.
Motion
farfalle-in: rise, tilt and settle with an overshoot (380ms); the spinner is a butterfly flapping.
Data
Lilac pill columns with a raspberry highlight; striped progress; a 30% donut.
Designing new components in Farfalle
MIAN does not ship every component you will need. To make a new one that belongs in Farfalle, build it from --mn-* tokens inside [data-noodle="farfalle"] and follow these rules.
Do
- background: var(--ff-mint) or var(--ff-lilac); border: 0; border-radius: 18px; no box-shadow.
- Emphasis: clip-path: var(--ff-pinch) with extra inline padding.
- Dividers: background: var(--ff-crimp); height: 6px.
Avoid
- Drop shadows
- Dark, heavy colour
- Hairline grey borders
Recipe: a selectable tile
[data-noodle="farfalle"] .tile { padding: 12px 18px; border: 0; border-radius: 18px; background: var(--ff-mint); font-weight: 700; }
[data-noodle="farfalle"] .tile[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-radius: 8px; clip-path: var(--ff-pinch); padding-inline: 24px; }The same guide, for AI tools: /ai/noodles/farfalle.md · MCP tool get_design_language.
Colour, type and brand
What Farfalle 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 · Magenta and pink
Play, tenderness, boldness. Pale pinks are gentle; hot magenta is loud and modern.
Watch for: Heavily gendered in some markets; test with the real audience instead of assuming.
Accent · Indigo and violet
Imagination, luxury, spirituality, the unusual.
Watch for: A violet-to-blue gradient is the most recognised mark of a generated page. If violet is your brand, use it flat, with a warm second colour, and never as a gradient behind a centred headline.
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.
Magenta and pink with indigo and violet: a contrasting pair that needs one of the two to dominate. The page itself is warm.
Type
One voice throughout: rounded sans. Headings are semibold, which reads as confident without shouting. Friendly, soft, safe, young.
Personality
Reads as playful, pastel, friendly, social, light-hearted. Intensity 3 of 5.
Suits
social apps, communities, kids and families, consumer onboarding. Less suited to finance, legal, enterprise.
Tone of voice
Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
Logo
A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles.
Inspired by the noodle
- Pinched in the middle→badges and the selected tab are pinched at the waist like a bow tie
- Crimped edges→zig-zag dividers and the edge of the selected tab
- Served in summer salads→raspberry, mint and lilac pastels on a warm white page
- A butterfly→a springy, slightly tilted flutter on entrance
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 Farfalle. 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="farfalle">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/farfalle.css">
<!-- or scope it to one element -->
<section data-noodle="farfalle" 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-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif |
| --mn-font-heading | ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif |
| --mn-radius-field / box / badge | 12px · 18px · 999px |
| density | comfortable |
| shadows | none |