Mafaldine
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.
Design language
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).
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.
Designing new components in Mafaldine
MIAN does not ship every component you will need. To make a new one that belongs in Mafaldine, build it from --mn-* tokens inside [data-noodle="mafaldine"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/mafaldine.md · MCP tool get_design_language.
Colour, type and brand
What Mafaldine 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 · Red
Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
Watch for: It is also the colour of errors. A red primary button next to a red error message makes both ambiguous, so pair a red brand with a distinct danger treatment (icon and words).
Accent · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
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.
Red with brown and terracotta: a contrasting pair that needs one of the two to dominate. The page itself 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.
Personality
Reads as regal, ornate, romantic, elegant, expressive. Intensity 3 of 5.
Suits
weddings, culture, fashion, perfume, theatre. Less suited to developer tools, finance.
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.
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
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 Mafaldine. 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="mafaldine">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/mafaldine.css">
<!-- or scope it to one element -->
<section data-noodle="mafaldine" 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 | "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif |
| --mn-font-heading | Didot, "Bodoni 72", "Bodoni MT", "Bodoni Moda", "Libre Bodoni", ui-serif, Georgia, serif |
| --mn-radius-field / box / badge | 4px · 6px · 999px |
| density | comfortable |
| shadows | subtle |