# Rigatoni: a MIAN design language

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.

- Family: Bold · Origin: Italy · Rome · License: MIAN License (free to use)
- Traits: bold, ridged, poster, confident, industrial, european, energetic · intensity 4/5 · contrast high · density default. Good for: creative agencies, studios, campaigns, restaurants, events, sport. Less for: healthcare, quiet luxury, dense admin.
- Use: `<html data-noodle="rigatoni">` (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/rigatoni.css
- Page: https://mian.ro/noodles/rigatoni

## Design philosophy

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.

## The language

- **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.

## Colour, type and brand

- **Primary** #17130e: brown and terracotta (deep, muted). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Accent** #c2410c: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #f4efe4: brown and terracotta (pale). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Scheme.** Two tones of brown and terracotta: harmonious and calm, with little contrast between brand and accent. The page 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.
- **Reads as** bold, ridged, poster, confident, industrial (brand dimension: excitement).
- **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.
- 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: "rigatoni").

## 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

## Designing new components in Rigatoni

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

- 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 in this language:

```css
[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); }
```

## 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 3px, box 4px, badge 3px
- Density: default · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #f4efe4 | #120f0b |
| surface | #fbf8f1 | #1b1712 |
| surface2 | #ebe3d2 | #262019 |
| fg | #17130e | #f4efe4 |
| muted | #5a5145 | #b3a893 |
| border | #d9cfbb | #3a3228 |
| input | #b8ab93 | #5a4f40 |
| primary | #17130e | #f4efe4 |
| primaryFg | #f4efe4 | #17130e |
| secondary | #ebe3d2 | #262019 |
| secondaryFg | #17130e | #f4efe4 |
| accent | #c2410c | #fb8a4c |
| accentFg | #ffffff | #1d0a00 |
| ring | #c2410c | #fb8a4c |
| 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 | #17130e | #f4efe4 |
| secondaryText | #706a60 | #89837a |
| accentText | #b13c0c | #fb8a4c |
| successText | #157538 | #4ade80 |
| warningText | #a44d0a | #fbbf24 |
| dangerText | #c02323 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #17130e | #f4efe4 |