Paccheri
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.
Design language
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.
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.
Designing new components in Paccheri
MIAN does not ship every component you will need. To make a new one that belongs in Paccheri, build it from --mn-* tokens inside [data-noodle="paccheri"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/paccheri.md · MCP tool get_design_language.
Colour, type and brand
What Paccheri 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 · Blue
Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.
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 · 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.
Blue against red, close to complementary: strong contrast, so the accent must stay rare. 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 flat, geometric, bold, primary colours, bauhaus. Intensity 4 of 5.
Suits
creative agencies, education, museums, events, design portfolios. Less suited to quiet luxury, healthcare.
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.
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
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 Paccheri. 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="paccheri">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/paccheri.css">
<!-- or scope it to one element -->
<section data-noodle="paccheri" 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 | 0px · 0px · 999px |
| density | default |
| shadows | none |