Pici
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.
Design language
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.
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.
Designing new components in Pici
MIAN does not ship every component you will need. To make a new one that belongs in Pici, build it from --mn-* tokens inside [data-noodle="pici"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/pici.md · MCP tool get_design_language.
Colour, type and brand
What Pici 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 · 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.
Accent · Green
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
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.
Brown and terracotta with green: a contrasting pair that needs one of the two to dominate. The page itself 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.
Personality
Reads as hand-made, rustic, warm, honest, crafted. Intensity 2 of 5. Brand dimension: sincerity.
Suits
food, restaurants, crafts, farms, bakeries. Less suited to fintech, developer tools, enterprise.
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.
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
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 Pici. 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="pici">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/pici.css">
<!-- or scope it to one element -->
<section data-noodle="pici" 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 | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-font-heading | "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif |
| --mn-radius-field / box / badge | 10px · 14px · 999px |
| density | comfortable |
| shadows | subtle |