Penne

Design language

Penne is the neutral product interface: a white page, soft grey wells where you type, pill-shaped controls and black for the one thing to press. It has no borders on fields and no colour of its own, so whatever the product shows (a message, an image, a result) is the only thing with character. Menus and dialogs float on a wide, soft shadow with no edge.

Designing new components in Penne

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

Recipe: a selectable tile

[data-noodle="penne"] .tile {
  padding: 16px 18px; border: 1px solid transparent; border-radius: 20px;
  background: var(--mn-surface-2); color: var(--mn-fg);
  transition: background-color 160ms cubic-bezier(.16, 1, .3, 1), border-color 160ms;
}
[data-noodle="penne"] .tile:hover { background: color-mix(in oklab, var(--mn-surface-2), var(--mn-fg) 4%); }
[data-noodle="penne"] .tile[aria-selected="true"] { background: var(--mn-surface); border-color: var(--mn-fg); }

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

Colour, type and brand

What Penne 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.

A neutral primary with one teal and cyan accent: the accent means “look here” precisely because nothing else is coloured. The page itself is neutral.

Inspired by the noodle

• A plain tube, nothing added→no borders on fields, no decoration, grey and white only
• Cut once, on the diagonal→one decisive element per screen: a single black button
• Smooth (lisce), not ridged→soft pill shapes and large, even corner radii
• Holds whatever sauce it is given→a neutral frame that lets the content be the colour

Specimen

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

Use it

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

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

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