# Gnocchi: a MIAN design language

Soft pillows. Clay you want to press. Gnocchi are small pillows of potato dough, rolled over a fork so each one keeps the dent of a thumb. Gnocchi is a clay system: every element is a soft inflated shape lit from above, with a light inner edge on top, a darker one underneath and a wide coloured shadow. Things squash when pressed and pop back.

- Family: Rounded · Origin: Italy · the north · License: MIAN License (free to use)
- Traits: clay, soft, playful, friendly, puffy, cheerful, tactile, 3d · intensity 3/5 · contrast medium · density comfortable. Good for: kids, education, consumer onboarding, games, wellness, food, landing pages. Less for: finance, legal, enterprise, dense admin.
- Use: `<html data-noodle="gnocchi">` (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/gnocchi.css
- Page: https://mian.ro/noodles/gnocchi

## Design philosophy

Gnocchi is clay. Every element looks like a soft, slightly inflated object lit from above: a light inner edge along the top, a darker one underneath, and a wide shadow in the colour of the thing itself. Fields and tracks are thumb dents pressed into the surface. Pressing a button squashes it to 95% and it springs back. It is friendly and physical, and it works best with few, large elements.

## Principles

- Puffed or pressed: things you act on are inflated; things you fill in are dented.
- Three shadows make clay: inner light on top, inner dark below, a soft tinted drop.
- No borders anywhere. The shadows are the edge.
- Big and few: 18px and 28px radii, comfortable sizes, heavy rounded type.
- Squash and spring: scale to .95 on press, overshoot slightly on release and entry.

## The language

- **Shape.** 18px fields, 28px cards, pills for badges, tabs and progress; checkboxes are 8px-rounded cushions.
- **Surface.** Warm peach clay. Cards carry --gn-clay; inputs, tracks and nested panels carry --gn-dent.
- **Colour.** Tomato red primary, butter yellow secondary, teal accent. Coloured buttons take their inner light and shadow from their own colour.
- **Type.** A rounded sans at 800 for headings and buttons, 700 for labels.
- **Motion.** gnocchi-in: scales from .92, overshoots to 1.015 and settles in 320ms. Hover rises 1px; press squashes.
- **Data.** Pill bars with the clay inner light; a 4px line.

## Colour, type and brand

- **Primary** #c93c24: red (mid). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Accent** #1f7a6b: teal and cyan (mid). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Page** #fdf1e7: orange (pale, saturated). Warmth, friendliness, appetite, affordability. Active like red, without the alarm.
- **Scheme.** Red against teal and cyan, close to complementary: strong contrast, so the accent must stay rare. The page is warm.
- **Type.** One voice throughout: rounded sans. Headings are heavy, which reads as loud and direct. Friendly, soft, safe, young.
- **Reads as** clay, soft, playful, friendly, puffy.
- **Tone of voice.** Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
- **Logo.** Round marks fit: a circular symbol or a soft, lowercase wordmark. Use a heavy wordmark; a thin one would vanish beside these 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: "gnocchi").

## Inspired by the noodle

- Pillows of soft dough → inflated shapes with a light inner edge above and a dark one below
- The dent of a thumb → fields and tracks are pressed in; buttons and cards are puffed out
- Squashes and springs back → pressing scales a control to 95%, release overshoots
- Butter, sage and tomato → peach clay, a tomato red and a butter yellow

## Designing new components in Gnocchi

Build new components from `--mn-*` tokens, scoped with `[data-noodle="gnocchi"]`, 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-surface), border 0, box-shadow var(--gn-clay), radius 28px.
- A coloured raised element takes its shadows from its own colour: inset light = colour mixed 38% with white, inset dark = 20% with black.
- Pressed-in: background var(--mn-surface-2), box-shadow var(--gn-dent).
- Active: transform: scale(.95) with the spring curve; always remove transforms under reduced motion.
- Selected in a group: a small raised cushion (--gn-clay-sm) inside a dented track.

Avoid:

- Borders and outlines
- Small, dense controls
- Flat fills with no inner light
- Sharp corners
- More than three colours on one screen

Recipe: a selectable tile in this language:

```css
[data-noodle="gnocchi"] .tile {
  padding: 20px; border: 0; border-radius: 28px;
  background: var(--mn-surface); color: var(--mn-fg);
  box-shadow: var(--gn-clay);
  transition: transform 180ms cubic-bezier(.34, 1.4, .64, 1), box-shadow 180ms;
}
[data-noodle="gnocchi"] .tile:hover { transform: translateY(-3px); }
[data-noodle="gnocchi"] .tile:active { transform: scale(.97); }
[data-noodle="gnocchi"] .tile[aria-selected="true"] { background: var(--mn-secondary); color: var(--mn-secondary-fg); }
@media (prefers-reduced-motion: reduce) { [data-noodle="gnocchi"] .tile { transition: none; transform: none; } }
```

## 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 18px, box 28px, badge 999px
- Density: comfortable · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #fdf1e7 | #1d1512 |
| surface | #fff8f1 | #281d18 |
| surface2 | #f7e4d3 | #342621 |
| fg | #2b1d14 | #fdeee2 |
| muted | #6b5547 | #c7ab9a |
| border | #f0d9c6 | #40302a |
| input | #dcc0a8 | #5e483e |
| primary | #c93c24 | #ff8f73 |
| primaryFg | #ffffff | #3a0d02 |
| secondary | #ffd166 | #ffd166 |
| secondaryFg | #3a2a00 | #3a2a00 |
| accent | #1f7a6b | #6fd6c3 |
| accentFg | #ffffff | #04302a |
| ring | #c93c24 | #ff8f73 |
| 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 | #b63822 | #ff8f73 |
| secondaryText | #846936 | #ffd166 |
| accentText | #207162 | #6fd6c3 |
| successText | #187438 | #4ade80 |
| warningText | #a44d0a | #fbbf24 |
| dangerText | #c02523 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #c93c24 | #ff8f73 |