# Pici: a MIAN design language

Hand-rolled, uneven, honest. Pici are thick strands rolled one by one between the palms, so no two are the same. Pici is a hand-made system: slightly irregular corners, borders that wobble a little, a serif for headings, rust and olive on unbleached paper, honest and warm, never polished.

- Family: Textured · Origin: Italy · Siena · License: MIAN License (free to use)
- Traits: hand-made, rustic, warm, honest, crafted, earthy · intensity 2/5 · contrast medium · density comfortable. Good for: food, restaurants, crafts, farms, bakeries, local businesses. Less for: fintech, developer tools, enterprise.
- Use: `<html data-noodle="pici">` (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/pici.css
- Page: https://mian.ro/noodles/pici

## Design philosophy

Pici is hand-made: every surface has slightly irregular corners, borders are a touch heavier and uneven, headings are a warm serif, colours are rust and olive on unbleached paper. It should feel like a trattoria menu written by the owner: honest, warm and never polished to plastic.

## Principles

- No two corners the same: surfaces use irregular radii.
- Warmth over precision: warm paper, rust and olive, a book serif for headings.
- Hand-drawn edges: 1.5px borders in ink at reduced opacity.
- Relaxed spacing, calm motion.

## The language

- **Shape.** Irregular corners (e.g. 12px 16px 10px 18px); round badges.
- **Surface.** Unbleached paper; cards with uneven 1.5px ink borders and a faint paper shadow.
- **Colour.** Rust (#7a3b1d), olive accent (#56642a), paper neutrals.
- **Type.** Book serif headings at 700; humanist sans body.
- **Motion.** pici-in: a gentle drop with a tiny rotation; hovers lift slightly.
- **Data.** Rust columns with uneven tops, olive highlight.

## Colour, type and brand

- **Primary** #7a3b1d: brown and terracotta (deep). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Accent** #56642a: green (deep). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #f3ede1: brown and terracotta (pale). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Scheme.** Brown and terracotta with green: a contrasting pair that needs one of the two to dominate. The page is warm.
- **Type.** Two voices: book serif (old-style and transitional) for headings, neutral sans for the interface. Headings are semibold, which reads as confident without shouting. Considered, literate, established. The voice of books and long reading.
- **Reads as** hand-made, rustic, warm, honest, crafted (brand dimension: sincerity).
- **Tone of voice.** Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
- **Logo.** A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles. Set the wordmark in a serif to match the 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: "pici").

## Inspired by the noodle

- Rolled between the palms → irregular corners on every surface; no two radii the same
- Thick and uneven → slightly heavier, hand-drawn-looking borders
- Aglione, the Tuscan garlic sauce → rust, olive and unbleached paper
- A trattoria, not a laboratory → warm serif headings, relaxed spacing

## Designing new components in Pici

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

- Radius: border-radius: 12px 16px 10px 18px / 14px 10px 16px 12px (vary per element).
- Borders: 1.5px solid color-mix(in srgb, var(--mn-fg) 55%, transparent).
- Headings in var(--mn-font-heading) at 700.

Avoid:

- Perfect geometric shapes
- Cold greys and pure white
- Glass or gradients
- Tight dense layouts

Recipe: a selectable tile in this language:

```css
[data-noodle="pici"] .tile { padding: 14px; border: 1.5px solid color-mix(in srgb, var(--mn-fg) 55%, transparent); border-radius: 12px 16px 10px 18px / 14px 10px 16px 12px; background: var(--mn-surface); }
[data-noodle="pici"] .tile:hover { transform: translateY(-1px) rotate(-.3deg); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif
- Radius: field 10px, box 14px, badge 999px
- Density: comfortable · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #f3ede1 | #16120d |
| surface | #faf6ec | #1f1a13 |
| surface2 | #e9e0cd | #2a231a |
| fg | #231c14 | #f3ede1 |
| muted | #5f5344 | #b9ad98 |
| border | #d8ccb4 | #3d3326 |
| input | #b9a988 | #5d503d |
| primary | #7a3b1d | #e6a57c |
| primaryFg | #ffffff | #2a1105 |
| secondary | #e9e0cd | #2a231a |
| secondaryFg | #231c14 | #f3ede1 |
| accent | #56642a | #bfd08a |
| accentFg | #ffffff | #1b2206 |
| ring | #7a3b1d | #e6a57c |
| 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 | #7a3b1d | #e6a57c |
| secondaryText | #726a5e | #8a847a |
| accentText | #56642a | #bfd08a |
| successText | #177237 | #4ade80 |
| warningText | #a04b0b | #fbbf24 |
| dangerText | #be2423 | #f87171 |
| infoText | #04679e | #38bdf8 |
| link | #7a3b1d | #e6a57c |