Bucatini
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.
Design language
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.
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.
Designing new components in Bucatini
MIAN does not ship every component you will need. To make a new one that belongs in Bucatini, build it from --mn-* tokens inside [data-noodle="bucatini"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/bucatini.md · MCP tool get_design_language.
Colour, type and brand
What Bucatini 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 · Black and ink
Authority, precision, luxury. It makes everything next to it look more deliberate.
Watch for: Pure #000 on pure #fff is harsh on long text. Soften one of the two slightly, or warm both.
Accent · Red
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).
Page · White and paper
Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
Watch for: Empty is not the same as calm: white space needs a grid behind it.
A neutral primary with one red accent: the accent means “look here” precisely because nothing else is coloured. The page itself 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.
Personality
Reads as hollow, outlined, crafted, minimal, precise. Intensity 2 of 5.
Suits
design tools, studios, architecture, portfolios. Less suited to data-dense admin.
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.
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
Specimen
The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
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
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
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
This palette on Bucatini. Load it after mian.css and put data-brand on the same element as data-noodle.
Use it
<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="bucatini">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/bucatini.css">
<!-- or scope it to one element -->
<section data-noodle="bucatini" 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
| --mn-font | ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif |
| --mn-font-heading | ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif |
| --mn-radius-field / box / badge | 999px · 18px · 999px |
| density | default |
| shadows | none |