# Maccheroni: a MIAN design language

Thick ink line, cut-out shadow, sweet colours. Maccheroni are short elbows of pasta, the first shape a child draws. Maccheroni is a blunt, cheerful system: a thick ink line around everything, a solid shadow you could cut out with scissors, flat sweet colours and corners just rounded enough to be friendly. Pressing a button pushes it down onto its shadow.

- Family: Bold · Origin: Italy · Naples · License: MIAN License (free to use)
- Traits: brutal, playful, bold, cheerful, loud, pastel, honest, indie · intensity 4/5 · contrast high · density default. Good for: indie products, creator tools, creative agencies, education, communities, landing pages, events. Less for: finance, healthcare, luxury, dense admin.
- Use: `<html data-noodle="maccheroni">` (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/maccheroni.css
- Page: https://mian.ro/noodles/maccheroni

## Design philosophy

Maccheroni is blunt and cheerful. Everything has a 2px ink outline and a solid shadow offset 4px down and right, like shapes cut from coloured paper and stuck on a cream page. Colours are flat and sweet (butter yellow, mint, pink) and always carry ink text. A button rises a pixel when you point at it and drops onto its shadow when you press it. Nothing is subtle, so it needs space and few elements.

## Principles

- Ink outline on everything: 2px, the same colour as the text.
- Solid shadows, no blur: 2px for small things, 4px for controls and cards, 7px for overlays.
- Flat sweet fills with ink text. No gradients, no transparency.
- Press is physical: translate onto the shadow and remove it.
- Friendly corners: 8px and 12px, never zero, never pills for buttons.

## The language

- **Shape.** 8px fields and buttons, 12px cards, 6px badges; tabs are outlined folders that fill when chosen.
- **Surface.** Cream page, white surfaces, butter-yellow second surface. Nested cards lose the shadow.
- **Colour.** Yellow primary, mint secondary, pink accent, all with #111 text. Dark mode keeps the same fills and turns the ink line cream.
- **Type.** A grotesk at 800 for headings, 700 for controls and labels.
- **Motion.** maccheroni-in: slides 4px from the top left in 160ms. Hover moves −1px, press moves +4px, both in 100ms.
- **Data.** Outlined bars filled mint with the highlighted bar yellow; a 3px ink line with visible points.

## Colour, type and brand

- **Primary** #ffd23f: yellow and gold (mid, saturated). Optimism, attention, caution. Gold tones add value and ceremony.
- **Accent** #ff8fab: red (pale, saturated). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Page** #fffdf5: white and paper (pale, saturated). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Yellow and gold with red: a contrasting pair that needs one of the two to dominate. 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** brutal, playful, bold, cheerful, loud (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: "maccheroni").

## Inspired by the noodle

- The shape a child draws → a 2px ink outline around every element
- Short, sturdy elbows → solid offset shadows with no blur, like paper cut-outs
- Baked with cheese → butter yellow, mint and pink, flat, on cream
- Eaten with a spoon → big, obvious controls that move down onto their shadow when pressed

## Designing new components in Maccheroni

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

- Border: 2px solid var(--mn-border). Shadow: 4px 4px 0 var(--mn-border). Radius 12px.
- Fill with var(--mn-surface), or one of the three sweets (--mn-primary, --mn-secondary, --mn-accent) with var(--mn-fg) text.
- Hover: translate(-1px,-1px) and a 5px shadow. Active: translate(4px,4px) and no shadow.
- Selected: fill with var(--mn-primary); keep the outline.
- Inside a card, drop the shadow and keep only the outline.
- Remove the transforms under prefers-reduced-motion.

Avoid:

- Soft or blurred shadows
- Gradients and glass
- Grey outlines
- Pill-shaped buttons
- Dense tables of small text

Recipe: a selectable tile in this language:

```css
[data-noodle="maccheroni"] .tile {
  padding: 16px; border: 2px solid var(--mn-border); border-radius: 12px;
  background: var(--mn-surface); color: var(--mn-fg);
  box-shadow: 4px 4px 0 var(--mn-border);
  transition: transform 100ms cubic-bezier(.2, 0, 0, 1), box-shadow 100ms;
}
[data-noodle="maccheroni"] .tile:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--mn-border); }
[data-noodle="maccheroni"] .tile:active { transform: translate(4px, 4px); box-shadow: none; }
[data-noodle="maccheroni"] .tile[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }
@media (prefers-reduced-motion: reduce) { [data-noodle="maccheroni"] .tile { transition: none; transform: none; } }
```

## 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 8px, box 12px, badge 6px
- Density: default · Shadows: hard

| token | light | dark |
|---|---|---|
| bg | #fffdf5 | #121212 |
| surface | #ffffff | #1c1c1c |
| surface2 | #fff3c4 | #2a2616 |
| fg | #111111 | #fffdf5 |
| muted | #4a4a4a | #b8b5a8 |
| border | #111111 | #fffdf5 |
| input | #111111 | #fffdf5 |
| primary | #ffd23f | #ffd23f |
| primaryFg | #111111 | #111111 |
| secondary | #90e0c9 | #90e0c9 |
| secondaryFg | #111111 | #111111 |
| accent | #ff8fab | #ff8fab |
| accentFg | #111111 | #111111 |
| ring | #111111 | #ffd23f |
| 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 | #836e27 | #ffd23f |
| secondaryText | #50786d | #90e0c9 |
| accentText | #9b5a6a | #ff8fab |
| successText | #15793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c82424 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #836e27 | #ffd23f |