# Paccheri: a MIAN design language

Big flat tubes. Primary colours. Paccheri are the widest tubes in the drawer; cooked, they collapse into big flat ribbons. Paccheri is a flat, geometric system in the spirit of the Bauhaus: solid blue, red and yellow blocks, circles and squares, no shadows or gradients, and bold grotesk type.

- Family: Flat · Origin: Italy · Naples · License: MIAN License (free to use)
- Traits: flat, geometric, bold, primary colours, bauhaus, playful, confident, european · intensity 4/5 · contrast high · density default. Good for: creative agencies, education, museums, events, design portfolios, public services. Less for: quiet luxury, healthcare.
- Use: `<html data-noodle="paccheri">` (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/paccheri.css
- Page: https://mian.ro/noodles/paccheri

## Design philosophy

Paccheri is flat geometry in three colours: blue, red and yellow blocks on off-white, circles and squares, bold grotesk type, no shadows or gradients. Structure comes from colour fields, not lines. It is confident, clear and a little playful: Bauhaus on a plate.

## Principles

- Colour fields structure the page: solid blocks instead of borders.
- Circles and squares: round things are fully round, square things fully square.
- Three colours, three jobs: blue acts, red alerts, yellow highlights.
- Flat means flat: no shadow, blur or gradient anywhere.

## The language

- **Shape.** Square fields and cards (0 radius), round badges, round switch knobs and avatars.
- **Surface.** Off-white page; blocks of solid colour; 2px ink outlines for controls.
- **Colour.** Blue (#1d4ed8), red (#c92a1c), yellow (#f3c623), ink.
- **Type.** Bold grotesk at 800; uppercase small labels.
- **Motion.** paccheri-in: a quick slide; hovers swap colour fields.
- **Data.** Square columns in blue, highlight in red, yellow markers.

## Colour, type and brand

- **Primary** #1d4ed8: blue (mid, saturated). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #c92a1c: red (mid, saturated). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Page** #f5f1e8: brown and terracotta (pale). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Scheme.** Blue against red, close to complementary: strong contrast, so the accent must stay rare. 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** flat, geometric, bold, primary colours, bauhaus.
- **Tone of voice.** Bold. Short claims, strong verbs, big numbers. Say one thing per screen and say it loudly.
- **Logo.** Square and angular marks fit: a wordmark in capitals or a solid block symbol. 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: "paccheri").

## Inspired by the noodle

- Wide tubes that fall flat → large flat blocks of solid colour
- Circles and slabs → round badges and indicators, square fields and cards
- A plate of three colours → a strict blue, red and yellow palette on off-white
- Named after a slap (pacca) → direct, confident motion

## Designing new components in Paccheri

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

- Fill blocks with var(--mn-primary), var(--mn-accent) or var(--mn-secondary) (yellow), never mix two on one small element.
- Outlines: 2px solid var(--mn-fg); radius 0 for rectangles, 999px for circles.
- No box-shadow, no gradients.

Avoid:

- Soft shadows
- Rounded rectangles
- Pastel tints
- More than three colours

Recipe: a selectable tile in this language:

```css
[data-noodle="paccheri"] .tile { padding: 14px; border: 2px solid var(--mn-fg); border-radius: 0; background: var(--mn-surface); font-weight: 800; }
[data-noodle="paccheri"] .tile[aria-selected="true"] { background: var(--mn-secondary); color: var(--mn-secondary-fg); }
```

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

| token | light | dark |
|---|---|---|
| bg | #f5f1e8 | #101010 |
| surface | #fffdf8 | #181818 |
| surface2 | #ebe5d7 | #222222 |
| fg | #141414 | #f5f1e8 |
| muted | #545454 | #aeaaa0 |
| border | #ddd6c6 | #333333 |
| input | #bdb5a4 | #555555 |
| primary | #1d4ed8 | #8fb0ff |
| primaryFg | #ffffff | #07153d |
| secondary | #f3c623 | #f3c623 |
| secondaryFg | #141414 | #141414 |
| accent | #c92a1c | #ff7a6e |
| accentFg | #ffffff | #2b0501 |
| ring | #1d4ed8 | #8fb0ff |
| 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 | #1d4ed8 | #8fb0ff |
| secondaryText | #7f691b | #f3c623 |
| accentText | #c2291c | #ff7a6e |
| successText | #15773a | #4ade80 |
| warningText | #a74e0a | #fbbf24 |
| dangerText | #c42424 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1d4ed8 | #8fb0ff |