# Cavatelli: a MIAN design language

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.

- Family: Rounded · Origin: Italy · Molise and Puglia · License: MIAN License (free to use)
- Traits: soft, monochrome, calm, tactile, quiet, embossed, minimal · intensity 2/5 · contrast low · density comfortable. Good for: smart home, audio, calculators and tools, wellness, hardware companions, personal dashboards. Less for: dense admin, content-heavy sites, e-commerce, data tables.
- Use: `<html data-noodle="cavatelli">` (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/cavatelli.css
- Page: https://mian.ro/noodles/cavatelli

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #2a56c6: blue (mid). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #0f766e: teal and cyan (deep, saturated). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Page** #e8ecf1: blue (pale, muted). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Scheme.** Blue with its neighbour teal and cyan: an analogous pair, harmonious and natural. The page 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.
- **Reads as** soft, monochrome, calm, tactile, quiet.
- **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.
- 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: "cavatelli").

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

## Designing new components in Cavatelli

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

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

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

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 14px, box 22px, badge 999px
- Density: comfortable · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #e8ecf1 | #23272e |
| surface | #e8ecf1 | #23272e |
| surface2 | #dde2e9 | #2b3038 |
| fg | #1c2430 | #e9edf3 |
| muted | #4a5565 | #a7b0bd |
| border | #d5dbe3 | #30353e |
| input | #8c97a6 | #6b7482 |
| primary | #2a56c6 | #8fb0ff |
| primaryFg | #ffffff | #0a1a40 |
| secondary | #dde2e9 | #2b3038 |
| secondaryFg | #1c2430 | #e9edf3 |
| accent | #0f766e | #5eead4 |
| accentFg | #ffffff | #042f2b |
| ring | #2a56c6 | #8fb0ff |
| 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 | #2a55c3 | #8fb0ff |
| secondaryText | #616873 | #8a8f96 |
| accentText | #116964 | #5eead4 |
| successText | #176c3a | #4ade80 |
| warningText | #964a11 | #fbbf24 |
| dangerText | #ae2628 | #f77676 |
| infoText | #056398 | #38bdf8 |
| link | #2a56c6 | #8fb0ff |