# Bucatini: a MIAN design language

A strand with a hole through it. Bucatini look like thick spaghetti, but each one is a tube with a hole running through the middle. Bucatini is a hollow system: everything is drawn in outline, tube-shaped pill buttons, ring switches, hollow checkboxes and outlined charts, and fills only when you press or choose.

- Family: Minimal · Origin: Italy · Rome · License: MIAN License (free to use)
- Traits: hollow, outlined, crafted, minimal, precise · intensity 2/5 · contrast high · density default. Good for: design tools, studios, architecture, portfolios. Less for: data-dense admin.
- Use: `<html data-noodle="bucatini">` (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/bucatini.css
- Page: https://mian.ro/noodles/bucatini

## Design philosophy

Bucatini is hollow. Each strand is a tube with a hole through the middle, so every control is drawn as an outline: pill-shaped tubes, ring switches with a hollow knob, hollow checkboxes, outlined cards and charts, and fills from the inside only when you press, hover or choose it. Emptiness is the default state.

## Principles

- Outline first: 1.5px ink strokes define everything; fills mean “chosen” or “pressed”.
- Tubes: buttons, fields, tabs and badges are pills; containers have 18px corners.
- The primary button is a filled tube with a thin inner gap, like the hole in the pasta.
- One amatriciana red accent; everything else is ink and paper.

## The language

- **Shape.** 999px pills for controls, 18px containers; checkboxes are circles.
- **Surface.** Transparent surfaces with a 1.5px ink outline; floating panels add a second, detached outline ring.
- **Colour.** Ink and paper with a sauce-red accent.
- **Type.** Clean sans, 600 for headings and controls.
- **Motion.** bucatini-in: a 3% scale-up in 200ms; hovers fill from the inside (inset shadow grows).
- **Data.** Hollow capsule columns and a hollow progress tube with an inset fill; the highlight fills solid.

## Colour, type and brand

- **Primary** #151515: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #b3261e: red (mid, saturated). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Page** #fcfcfb: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A neutral primary with one red accent: the accent means “look here” precisely because nothing else is coloured. The page is neutral.
- **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** hollow, outlined, crafted, minimal, precise.
- **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: "bucatini").

## Inspired by the noodle

- A tube, not a rod → every control is an outline; the inside stays empty until it is chosen
- Round in section → pill buttons and fields, ring switches with a hollow knob
- Amatriciana on the side → ink outlines with one sauce red for the accent
- Sucking up the sauce → hover fills the tube from the inside

## Designing new components in Bucatini

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

- border: 1.5px solid var(--mn-fg); background: transparent; border-radius: 999px (controls) or 18px (containers).
- Selected / pressed: background var(--mn-fg); color var(--mn-bg).
- Filled accents keep a 2.5px inner gap: box-shadow: inset 0 0 0 2.5px var(--mn-bg), inset 0 0 0 40px <colour>.

Avoid:

- Solid filled surfaces at rest
- Square corners
- Drop shadows

Recipe: a selectable tile in this language:

```css
[data-noodle="bucatini"] .tile { padding: 10px 18px; border: 1.5px solid var(--mn-fg); border-radius: 999px; background: transparent; }
[data-noodle="bucatini"] .tile:hover { box-shadow: inset 0 0 0 1px var(--mn-fg); }
[data-noodle="bucatini"] .tile[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); box-shadow: inset 0 0 0 2.5px var(--mn-bg); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Radius: field 999px, box 18px, badge 999px
- Density: default · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #fcfcfb | #111111 |
| surface | #fcfcfb | #111111 |
| surface2 | #f2f2f0 | #1b1b1b |
| fg | #151515 | #f0f0ee |
| muted | #5e5e5e | #a0a09c |
| border | #d9d9d6 | #2c2c2c |
| input | #8a8a86 | #6b6b67 |
| primary | #151515 | #f0f0ee |
| primaryFg | #fcfcfb | #111111 |
| secondary | #f2f2f0 | #1b1b1b |
| secondaryFg | #151515 | #f0f0ee |
| accent | #b3261e | #f47c6c |
| accentFg | #ffffff | #2a0500 |
| ring | #151515 | #f0f0ee |
| 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 | #151515 | #f0f0ee |
| secondaryText | #727271 | #7d7d7c |
| accentText | #b3261e | #f47c6c |
| successText | #15773a | #4ade80 |
| warningText | #a74e0a | #fbbf24 |
| dangerText | #c42424 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #151515 | #f0f0ee |