# Farfalle: a MIAN design language

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.

- Family: Flat · Origin: Italy · Lombardy · License: MIAN License (free to use)
- Traits: playful, pastel, friendly, social, light-hearted · intensity 3/5 · contrast medium · density comfortable. Good for: social apps, communities, kids and families, consumer onboarding. Less for: finance, legal, enterprise.
- Use: `<html data-noodle="farfalle">` (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/farfalle.css
- Page: https://mian.ro/noodles/farfalle

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #b5305e: magenta and pink (mid). Play, tenderness, boldness. Pale pinks are gentle; hot magenta is loud and modern.
- **Accent** #6f4fcf: indigo and violet (mid). Imagination, luxury, spirituality, the unusual.
- **Page** #fff8f5: white and paper (pale, saturated). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Magenta and pink with indigo and violet: a contrasting pair that needs one of the two to dominate. The page is warm.
- **Type.** One voice throughout: rounded sans. Headings are semibold, which reads as confident without shouting. Friendly, soft, safe, young.
- **Reads as** playful, pastel, friendly, social, light-hearted.
- **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.
- 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: "farfalle").

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

## Designing new components in Farfalle

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

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

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

## Tokens

- Fonts: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
- Heading font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
- Radius: field 12px, box 18px, badge 999px
- Density: comfortable · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #fff8f5 | #17121a |
| surface | #ffffff | #1f1823 |
| surface2 | #fdebe6 | #2a2130 |
| fg | #2a1f2d | #fbeff5 |
| muted | #6d5f70 | #bca9c1 |
| border | #f3dcd6 | #352a3b |
| input | #e3c3bb | #52435a |
| primary | #b5305e | #ff8db4 |
| primaryFg | #ffffff | #3a0418 |
| secondary | #e5f5ee | #1e3329 |
| secondaryFg | #1f3a2e | #d9f5e7 |
| accent | #6f4fcf | #b8a4ff |
| accentFg | #ffffff | #1c0f4a |
| ring | #b5305e | #ff8db4 |
| 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 | #b5305e | #ff8db4 |
| secondaryText | #717076 | #7f8683 |
| accentText | #6f4fcf | #b8a4ff |
| successText | #17783c | #4ade80 |
| warningText | #a94f0c | #fbbf24 |
| dangerText | #c72527 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #b5305e | #ff8db4 |