Rigatoni
Ridged tubes. Poster stripes. Rigatoni are wide tubes with ridges down their length, made to hold a heavy sauce. Rigatoni is a ridged poster system: condensed heavy type, parallel stripes as the texture of rules, focus and progress, flat cream paper and one paprika orange.
Design language
Rigatoni is a ridged poster: heavy condensed type carries the page, and parallel ridges are the one texture, on rules, the chosen tab, progress and the highlighted bar. Cream paper, ink and one paprika orange. Loud through structure and weight, never through effects.
Principles
- Ridges are the signature: stripes appear on rules, chosen states and data, nowhere decorative.
- Type carries the page: headings at 900, tight, flush left; one idea shouted clearly.
- Outline until chosen: broad outlined controls fill solid ink when selected.
- One orange per view: focus, the key action or the key number.
Shape
3–4px corners, broad 2px outlines, square switches.
Surface
Cream paper; cards are outlined, never shadowed; a ridged 6px rule tops sections and cards.
Colour
Ink black, cream, paprika orange (#c2410c) used once per view.
Type
Heavy grotesk at 900 for headings with tight tracking; 700 uppercase labels.
Motion
rigatoni-in: a short rise in 150ms; hovers slide the ridge pattern.
Data
Columns in ink; the highlighted column is ridged orange; 3px lines.
Designing new components in Rigatoni
MIAN does not ship every component you will need. To make a new one that belongs in Rigatoni, build it from --mn-* tokens inside [data-noodle="rigatoni"] and follow these rules.
Do
- Rules: height 6px; background: repeating-linear-gradient(90deg, var(--mn-fg) 0 3px, transparent 3px 7px).
- Controls: 2px solid var(--mn-fg) outlines; chosen = solid var(--mn-fg) fill with var(--mn-bg) text.
- Headings: font-weight 900; letter-spacing -.04em; line-height .95.
- Use var(--mn-accent) for one element per view.
Avoid
- Soft shadows or blur
- Rounded pills
- More than one accent
- Stripes as background decoration behind text
Recipe: a selectable tile
[data-noodle="rigatoni"] .tile { padding: 14px; border: 2px solid var(--mn-fg); border-radius: 4px; background: var(--mn-surface); font-weight: 800; }
[data-noodle="rigatoni"] .tile[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); box-shadow: inset 0 -6px 0 var(--mn-accent); }The same guide, for AI tools: /ai/noodles/rigatoni.md · MCP tool get_design_language.
Colour, type and brand
What Rigatoni 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 · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
Accent · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
Page · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
Two tones of brown and terracotta: harmonious and calm, with little contrast between brand and accent. The page itself is warm.
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 bold, ridged, poster, confident, industrial. Intensity 4 of 5. Brand dimension: excitement.
Suits
creative agencies, studios, campaigns, restaurants, events. Less suited to healthcare, quiet luxury, dense admin.
Tone of voice
Bold. Short claims, strong verbs, big numbers. Say one thing per screen and say it loudly.
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
- Ridges down the tube→repeating stripes on rules, active tabs, progress and the chosen bar
- Wide and hollow→broad outlined controls that fill solid when chosen
- Carbonara or amatriciana→cream paper, ink black and a paprika orange
- Holds the sauce→strong, weighty type at 900 that carries a page on its own
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 Rigatoni. 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="rigatoni">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/rigatoni.css">
<!-- or scope it to one element -->
<section data-noodle="rigatoni" 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 | 3px · 4px · 3px |
| density | default |
| shadows | none |