# Spaghetti: a MIAN design language

Pasta, tomato, a poster. Spaghetti al pomodoro is the whole of Italian cooking in one plate: few ingredients, nothing to hide. Spaghetti is Italian poster minimalism: a heavy grotesk, strict left alignment, thick black rules instead of boxes, flat black and one tomato red.

- Family: Minimal · Origin: Italy · Naples · License: MIAN License (free to use)
- Traits: italian, poster, confident, minimal, graphic, european · intensity 3/5 · contrast high · density default. Good for: creative studios, agencies, restaurants, design portfolios, cultural events. Less for: soft consumer apps, children.
- Use: `<html data-noodle="spaghetti">` (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/spaghetti.css
- Page: https://mian.ro/noodles/spaghetti

## Design philosophy

Spaghetti is Italian poster minimalism: three ingredients on a white plate. A heavy grotesk set flush left, thick black rules on top of things instead of boxes around them, flat black and one tomato red that marks the single most important thing on screen. Firm and fast, al dente.

## Principles

- Rules, not boxes: a 3px black rule tops cards, tables, alerts and sections; nothing is enclosed.
- One red thing per view: the primary hover, the focus ring, the chosen tab, the highlighted bar.
- Type does the work: 800-weight grotesk headlines with −0.045em tracking, uppercase micro-labels.
- No shadows, no radius beyond 2px, no gradients.

## The language

- **Shape.** 2px corners; fields are a single 2px baseline; switches and checkboxes are squares.
- **Surface.** White page, transparent surfaces topped by a 3px ink rule; floating panels get a flat offset shadow at 12% ink.
- **Colour.** Ink black and tomato red (#c8001a); red appears once per view.
- **Type.** Helvetica-class grotesk, 800 for headings, 700 for controls, uppercase 11px badges.
- **Motion.** spaghetti-in: a 10px slide from the left in 160ms; hovers are instant colour swaps.
- **Data.** Black square columns; the highlighted column and the progress fill are red; 3px lines, no area.

## Colour, type and brand

- **Primary** #111111: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #c8001a: red (mid, saturated). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Page** #ffffff: 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: grotesque sans. Headings are heavy, which reads as loud and direct. Confident, graphic, European. A poster voice with a little warmth and irregularity.
- **Reads as** italian, poster, confident, minimal, graphic.
- **Tone of voice.** Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
- **Logo.** A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles. Use a heavy wordmark; a thin one would vanish beside these headings.
- 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: "spaghetti").

## Inspired by the noodle

- Three ingredients on a white plate → white, black and one tomato red, nothing else
- Long straight strands → strict horizontal rules: a 3px black rule tops every card, table and section
- Printed on a trattoria menu → heavy grotesk headlines at 800, tight tracking, flush left
- Al dente → firm, fast motion; everything snaps into place

## Designing new components in Spaghetti

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

- border: 0; border-top: 3px solid var(--mn-fg); border-radius: 0; background: transparent.
- Hover and selection swap to var(--mn-accent) (tomato), never add a second colour.
- Headings: font-weight 800; letter-spacing: -.045em; line-height: .98.
- Labels and badges: uppercase, 800, .6875rem, letter-spacing .02em.

Avoid:

- Rounded corners or pills
- Soft shadows and gradients
- More than one accent colour
- Centred layouts

Recipe: a selectable tile in this language:

```css
[data-noodle="spaghetti"] .tile { padding: 12px 0 14px; border: 0; border-top: 3px solid var(--mn-fg); border-radius: 0; background: transparent; font-weight: 700; }
[data-noodle="spaghetti"] .tile:hover { color: var(--mn-accent); }
[data-noodle="spaghetti"] .tile[aria-selected="true"] { border-top-color: var(--mn-accent); }
```

## Tokens

- Fonts: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif
- Heading font: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif
- Radius: field 2px, box 2px, badge 2px
- Density: default · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #ffffff | #0c0c0c |
| surface | #ffffff | #141414 |
| surface2 | #f4f4f2 | #1d1d1d |
| fg | #111111 | #f2f2f0 |
| muted | #5c5c5c | #a3a3a0 |
| border | #e4e4e1 | #2a2a2a |
| input | #cfcfcb | #444444 |
| primary | #111111 | #f2f2f0 |
| primaryFg | #ffffff | #111111 |
| secondary | #f4f4f2 | #1d1d1d |
| secondaryFg | #111111 | #f2f2f0 |
| accent | #c8001a | #ff5a67 |
| accentFg | #ffffff | #1a0003 |
| ring | #c8001a | #ff5a67 |
| 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 | #111111 | #f2f2f0 |
| secondaryText | #757574 | #7f7f7e |
| accentText | #c8001a | #ff5a67 |
| successText | #15793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c82424 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #111111 | #f2f2f0 |