# Mafaldine: a MIAN design language

Royal ribbons with ruffled edges. Mafaldine are long ribbons with ruffled edges, named in 1902 for Princess Mafalda of Savoy. Mafaldine is a regal system: Didone italics, wavy ruffled underlines and dividers, scalloped badges, deep burgundy and antique gold on cream, and slow, courtly motion.

- Family: Elegant · Origin: Italy · Naples · License: MIAN License (free to use)
- Traits: regal, ornate, romantic, elegant, expressive · intensity 3/5 · contrast medium · density comfortable. Good for: weddings, culture, fashion, perfume, theatre. Less for: developer tools, finance.
- Use: `<html data-noodle="mafaldine">` (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/mafaldine.css
- Page: https://mian.ro/noodles/mafaldine

## Design philosophy

Mafaldine is regal. Long ribbons with ruffled edges, named for a princess, become Didone italics, wavy ruffled underlines and dividers, scalloped badges, a fine gold rule inside every card, burgundy and antique gold on cream, generous margins and slow, courtly motion that settles.

## Principles

- Ruffle the edges that matter: the selected tab, dividers and card footers use the wave mask (--mf-wave-mask).
- Italic Didone for every title, table head, tab and step number.
- Gold is jewellery: a 1px inner rule, a bead on the switch, a ring round avatars, never a fill.
- Slow, settling motion (240–420ms).

## The language

- **Shape.** 4px controls, 6px containers; arched chart columns; scalloped badge bottoms.
- **Surface.** Cream paper with a fine gold rule inset 4px from the edge.
- **Colour.** Burgundy (#6d1a2b), antique gold (#846020), cream.
- **Type.** Didone italic for headings; book serif for text.
- **Motion.** mafaldine-in: a 6px rise while the tracking settles, 420ms.
- **Data.** Arched columns with a gold edge; burgundy highlight; a slim 16% donut.

## Colour, type and brand

- **Primary** #6d1a2b: red (deep). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Accent** #846020: brown and terracotta (mid). 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.** Red with brown and terracotta: a contrasting pair that needs one of the two to dominate. The page is warm.
- **Type.** Two voices: didone serif (high contrast) for headings, book serif (old-style and transitional) for the interface. Headings are light to regular, which reads as delicate and unhurried. Fashion, luxury, ceremony. Thick and hair-thin strokes signal expense.
- **Reads as** regal, ornate, romantic, elegant, expressive.
- **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. 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: "mafaldine").

## Inspired by the noodle

- Ruffled edges → wavy underlines, wavy dividers and scalloped badge edges
- Named for a princess → Didone display type in italic, burgundy and antique gold
- A long ribbon → long horizontal rhythm with generous margins
- A court, not a kitchen → slow, graceful motion that settles

## Designing new components in Mafaldine

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

- font-family: var(--mn-font-heading); font-style: italic; font-weight: 400 for titles.
- Inner gold rule: box-shadow: inset 0 0 0 4px var(--mn-surface), inset 0 0 0 5px color-mix(in oklab, var(--mn-accent) 35%, transparent).
- Ruffle: background: currentColor; mask: var(--mf-wave-mask) 0 50% / 16px 6px repeat-x; height: 6px.

Avoid:

- Bold sans-serif
- Flat, saturated colour
- Fast or springy motion

Recipe: a selectable tile in this language:

```css
[data-noodle="mafaldine"] .tile { padding: 14px 18px; border: 1px solid var(--mn-border); border-radius: 6px; background: var(--mn-surface); box-shadow: inset 0 0 0 4px var(--mn-surface), inset 0 0 0 5px color-mix(in oklab, var(--mn-accent) 35%, transparent); font-family: var(--mn-font-heading); font-style: italic; }
[data-noodle="mafaldine"] .tile[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }
```

## Tokens

- Fonts: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif
- Heading font: Didot, "Bodoni 72", "Bodoni MT", "Bodoni Moda", "Libre Bodoni", ui-serif, Georgia, serif
- Radius: field 4px, box 6px, badge 999px
- Density: comfortable · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #fbf7ef | #150a0d |
| surface | #fffdf8 | #1d0f13 |
| surface2 | #f3ece0 | #28151b |
| fg | #2a1016 | #f8ece6 |
| muted | #6d5359 | #c3a7ad |
| border | #e9dccc | #36212a |
| input | #d4c0ab | #573a43 |
| primary | #6d1a2b | #e8a0ae |
| primaryFg | #ffffff | #33070f |
| secondary | #f3ece0 | #28151b |
| secondaryFg | #2a1016 | #f8ece6 |
| accent | #846020 | #e2c07a |
| accentFg | #ffffff | #2b1d00 |
| ring | #6d1a2b | #e8a0ae |
| 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 | #6d1a2b | #e8a0ae |
| secondaryText | #7e6c6b | #8c7c7c |
| accentText | #846020 | #e2c07a |
| successText | #17773a | #4ade80 |
| warningText | #a94e0a | #fbbf24 |
| dangerText | #c72324 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #6d1a2b | #e8a0ae |