Cavatelli
One material, pressed in and pushed out. Cavatelli, “little hollows”, are small pieces of dough dragged under two fingers so they curl around the dent. Cavatelli is a soft, single-material system: page and surface are the same colour, and every element is either pushed out of the page or pressed into it, drawn only by a light and a shadow. Colour is kept for what is switched on.
Design language
Cavatelli is one material. The page, the cards and the controls are the same pale colour, and every element is either pushed out of that surface or pressed into it; a light from the top left and a shadow to the bottom right are the only things that draw it. Because edges are soft, state has to be unmistakable: colour is reserved for what is on, and every control keeps a visible boundary or a strong inner shadow.
Principles
- One colour for page and surface. Never put a white card on the grey page.
- Two states of the material: raised (can be pressed) and inset (holds a value, or is pressed).
- Light from the top left, always: a light shadow up-left, a dark one down-right.
- Colour means on: the blue appears for the checked switch, the chosen tab’s text, the progress fill.
- Keep it legible: text is full-contrast ink, checkboxes and switches keep a 1px boundary.
Shape
14px fields, 22px cards, pill badges and tracks.
Surface
Raised: 7px/16px twin shadows (--cv-out). Inset: twin inner shadows (--cv-in). Overlays use a larger pair.
Colour
Cool pale grey (#e8ecf1) or slate (#23272e); a single blue for on-states; a teal accent.
Type
A clean sans, headings at 650 tracked −0.025em.
Motion
cavatelli-in: scale from .985 and fade in 260ms. Pressing swaps the raised shadow for the inset one; nothing moves.
Data
Pill bars in 14% ink with the highlighted bar in blue; a 3px line.
Designing new components in Cavatelli
MIAN does not ship every component you will need. To make a new one that belongs in Cavatelli, build it from --mn-* tokens inside [data-noodle="cavatelli"] and follow these rules.
Do
- Raised: background var(--mn-bg), border 0, box-shadow var(--cv-out) (or --cv-out-sm for small things).
- Inset: same background, box-shadow var(--cv-in).
- Press = swap raised for inset, with no transform.
- Selected in a group: a raised chip inside an inset track, with its label in var(--mn-primary-text).
- Anything that must be found by people with low vision (checkbox, switch, field on focus) also gets a 1px var(--mn-input) or var(--mn-ring) edge.
Avoid
- White or tinted cards on the page
- Coloured fills for resting buttons other than the primary
- Hard borders as the main edge
- Low-contrast grey text
- Stacking raised elements on raised elements
Recipe: a selectable tile
[data-noodle="cavatelli"] .tile {
padding: 18px; border: 1px solid transparent; border-radius: 22px;
background: var(--mn-bg); color: var(--mn-fg);
box-shadow: var(--cv-out);
transition: box-shadow 200ms cubic-bezier(.16, 1, .3, 1);
}
[data-noodle="cavatelli"] .tile:active { box-shadow: var(--cv-in); }
[data-noodle="cavatelli"] .tile[aria-selected="true"] { box-shadow: var(--cv-in); color: var(--mn-primary-text); border-color: var(--mn-ring); }The same guide, for AI tools: /ai/noodles/cavatelli.md · MCP tool get_design_language.
Colour, type and brand
What Cavatelli 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 · Blue
Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.
Accent · Teal and cyan
Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
Watch for: Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered.
Page · Blue
Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.
Blue with its neighbour teal and cyan: an analogous pair, harmonious and natural. The page itself is cool.
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 soft, monochrome, calm, tactile, quiet. Intensity 2 of 5.
Suits
smart home, audio, calculators and tools, wellness, hardware companions. Less suited to dense admin, content-heavy sites, e-commerce.
Tone of voice
Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
Logo
Round marks fit: a circular symbol or a soft, lowercase wordmark.
Inspired by the noodle
- One piece of dough, dented→one colour for page and surface; shape comes from light and shadow alone
- Dragged under two fingers→two states only: raised (resting, tappable) and pressed in (fields, tracks, active)
- A hollow that holds the sauce→wells for inputs, progress and selected tabs
- Pale durum wheat→a cool pale grey with a single blue for what is on
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 Cavatelli. 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="cavatelli">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/cavatelli.css">
<!-- or scope it to one element -->
<section data-noodle="cavatelli" 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", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-font-heading | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-radius-field / box / badge | 14px · 22px · 999px |
| density | comfortable |
| shadows | none |