Spaghetti
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.
Design language
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.
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.
Designing new components in Spaghetti
MIAN does not ship every component you will need. To make a new one that belongs in Spaghetti, build it from --mn-* tokens inside [data-noodle="spaghetti"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/spaghetti.md · MCP tool get_design_language.
Colour, type and brand
What Spaghetti 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: grotesque sans. Headings are heavy, which reads as loud and direct. Confident, graphic, European. A poster voice with a little warmth and irregularity.
Personality
Reads as italian, poster, confident, minimal, graphic. Intensity 3 of 5.
Suits
creative studios, agencies, restaurants, design portfolios, cultural events. Less suited to soft consumer apps, children.
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.
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
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 Spaghetti. 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="spaghetti">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/spaghetti.css">
<!-- or scope it to one element -->
<section data-noodle="spaghetti" 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 | "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif |
| --mn-font-heading | "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif |
| --mn-radius-field / box / badge | 2px · 2px · 2px |
| density | default |
| shadows | none |