Gnocchi

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.

RoundedItaly · the northradius 18px / 28pxcomfortable densitynone shadows

Use Gnocchi Design language (Markdown)Tokens JSON

Design language

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.

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.

Designing new components in Gnocchi

MIAN does not ship every component you will need. To make a new one that belongs in Gnocchi, build it from --mn-* tokens inside [data-noodle="gnocchi"] and follow these rules.

Do

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

[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; } }

The same guide, for AI tools: /ai/noodles/gnocchi.md · MCP tool get_design_language.

Colour, type and brand

What Gnocchi 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

#c93c24 · mid

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 · Teal and cyan

#1f7a6b · mid

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 · Orange

#fdf1e7 · pale, saturated

Warmth, friendliness, appetite, affordability. Active like red, without the alarm.

Watch for: Can read as cheap when saturated across large areas; text on orange rarely passes contrast, so use it for fills with dark text or for accents.

Red against teal and cyan, close to complementary: strong contrast, so the accent must stay rare. The page itself is warm.

Type

One voice throughout: rounded sans. Headings are heavy, which reads as loud and direct. Friendly, soft, safe, young.

Personality

Reads as clay, soft, playful, friendly, puffy. Intensity 3 of 5.

Suits

kids, education, consumer onboarding, games, wellness. Less suited to finance, legal, enterprise.

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.

Inspired by the noodle

Pillows of soft doughinflated shapes with a light inner edge above and a dark one below
The dent of a thumbfields and tracks are pressed in; buttons and cards are puffed out
Squashes and springs backpressing scales a control to 95%, release overshoots
Butter, sage and tomatopeach clay, a tomato red and a butter yellow

Specimen

The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.

Try your brand colour

Your own

Open in the studio

Light

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

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

Dark

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

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

Use it

<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="gnocchi">

<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/gnocchi.css">

<!-- or scope it to one element -->
<section data-noodle="gnocchi" 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.

Background#fdf1e7

Surface#fff8f1

Muted surface#f7e4d3

Foreground#2b1d14

Muted text#6b5547

Border#f0d9c6

Input border#dcc0a8

Primary#c93c24

On primary#ffffff

Secondary#ffd166

Accent#1f7a6b

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#c93c24

Typography & shape

--mn-font	ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
--mn-font-heading	ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
--mn-radius-field / box / badge	18px · 28px · 999px
density	comfortable
shadows	none