# Penne: a MIAN design language

Plain, neutral, cut once. Penne, “quills”, are plain tubes cut once on the diagonal and otherwise left alone. Penne is a neutral product system: a white page, soft grey wells instead of outlines, pill-shaped controls, black for the one thing to press and overlays that float on a wide, soft shadow.

- Family: Minimal · Origin: Italy · Campania · License: MIAN License (free to use)
- Traits: neutral, minimal, clean, modern, quiet, soft, product-first · intensity 1/5 · contrast high · density comfortable. Good for: ai products, assistants and chat, consumer apps, saas, productivity, developer tools, search. Less for: editorial, heritage brands, children.
- Use: `<html data-noodle="penne">` (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/penne.css
- Page: https://mian.ro/noodles/penne

## Design philosophy

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.

## Principles

- Wells, not outlines: inputs, chips and unselected tabs are filled with var(--mn-surface-2) and have no border.
- One black button per view. Everything else is grey or ghost.
- Pills and large radii: controls are fully rounded, containers 20px.
- The content is the colour. The interface stays black, white and grey; a green accent exists only for confirmation.
- Overlays float: no border, a 16px/48px soft shadow.

## The language

- **Shape.** Fully rounded buttons, inputs and tabs (24px radius); 20px cards; 16px menus with 10px items.
- **Surface.** White on white. Fields and chips are #f4f4f4 wells that turn white with a black edge on focus. Cards have a 1px #ececec edge and no shadow.
- **Colour.** Ink primary (#0d0d0d / #f9f9f9), neutral greys, one green accent. No tinted neutrals.
- **Type.** The system font, 400 for text and 500 for controls, headings at 600 tracked −0.03em.
- **Motion.** penne-in: scale from .98 and fade in 200ms. Pressed buttons scale to .97.
- **Data.** Pill bars in grey with the highlighted bar in ink; a 2px ink line.

## Colour, type and brand

- **Primary** #0d0d0d: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #0f6e58: teal and cyan (deep, saturated). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Page** #ffffff: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A neutral primary with one teal and cyan accent: the accent means “look here” precisely because nothing else is coloured. The page is neutral.
- **Type.** One voice throughout: system sans (the device’s own typeface). Headings are semibold, which reads as confident without shouting. Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.
- **Reads as** neutral, minimal, clean, modern, quiet (brand dimension: competence).
- **Tone of voice.** Quiet. Plain statements in sentence case, no exclamation marks, numbers with their units. Let space do the persuading.
- **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: "penne").

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

## Designing new components in Penne

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

- Use var(--mn-surface-2) as the fill for anything that holds input or can be chosen; remove the border.
- Hover on a well: 4% darker. Focus: white fill and a 1px var(--mn-fg) edge, no glow.
- Selected in a group: var(--mn-surface) thumb with a 1px/3px shadow inside a grey track.
- Anything that floats: border-color transparent, box-shadow var(--pn-float), radius 16–20px.
- Keep one ink-filled control per view; make the rest ghost or outline.

Avoid:

- Outlined inputs
- Coloured primary buttons
- Square corners
- Tinted or gradient backgrounds
- Several filled buttons side by side

Recipe: a selectable tile in this language:

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

## Tokens

- Fonts: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 24px, box 20px, badge 999px
- Density: comfortable · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #ffffff | #1c1c1c |
| surface | #ffffff | #262626 |
| surface2 | #f4f4f4 | #303030 |
| fg | #0d0d0d | #ececec |
| muted | #5d5d5d | #b4b4b4 |
| border | #ececec | #363636 |
| input | #d0d0d0 | #4f4f4f |
| primary | #0d0d0d | #f9f9f9 |
| primaryFg | #ffffff | #0d0d0d |
| secondary | #f4f4f4 | #303030 |
| secondaryFg | #0d0d0d | #ececec |
| accent | #0f6e58 | #6fd3b8 |
| accentFg | #ffffff | #04241c |
| ring | #0d0d0d | #f9f9f9 |
| 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 | #0d0d0d | #f9f9f9 |
| secondaryText | #737373 | #8e8e8e |
| accentText | #0f6e58 | #6fd3b8 |
| successText | #15793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c72424 | #f87676 |
| infoText | #0369a1 | #38bdf8 |
| link | #0d0d0d | #f9f9f9 |