Acini di pepe
Peppercorn dots and halftone. Acini di pepe, “peppercorns”, are tiny beads of pasta, a pinch of dots in every spoonful of soup. Acini di pepe is a halftone system: dotted edges instead of lines, surfaces shaded with dot screens, progress that grows from small dots to large, and charts printed in dots.
Design language
Acini di pepe is halftone. Peppercorn-sized beads of pasta become a system printed in dots: dotted edges instead of lines, surfaces shaded with dot screens, selection and emphasis shown by bigger dots, progress that grows from specks to full circles, and charts printed in halftone. Pepper black on warm paper, one teal accent.
Principles
- Dotted, not solid: borders are 2px dotted; focus turns them solid.
- Shade with a screen: var(--ac-screen) (1px dots) for tint, var(--ac-screen-2) (1.6px) for emphasis.
- Bigger dots mean more: progress, the selected tab underline and highlights grow the dot size.
- One teal accent; everything else is pepper and paper.
Shape
8px controls, 12px containers, pill badges; round dot knobs.
Surface
Warm paper with a dotted edge; halftone-shaded headers, footers and hovers.
Colour
Pepper black, warm paper, teal (#0f766e).
Type
Clean sans at 600–650.
Motion
acini-in: a soft 2px blur and scale; the spinner is three bouncing peppercorns.
Data
Halftone columns with a solid teal highlight; progress as a row of dots growing to 8px.
Designing new components in Acini di pepe
MIAN does not ship every component you will need. To make a new one that belongs in Acini di pepe, build it from --mn-* tokens inside [data-noodle="acini"] and follow these rules.
Do
- border: 2px dotted var(--mn-input); background: var(--mn-surface).
- Tint or hover: background: var(--ac-screen-2), var(--mn-surface-2).
- Rows of dots: radial-gradient(circle, <colour> 2px, transparent 2.4px) 0 50% / 8px 6px repeat-x.
Avoid
- Solid 1px rules
- Flat grey tints (use a dot screen)
- Shadows
Recipe: a selectable tile
[data-noodle="acini"] .tile { padding: 12px 16px; border: 2px dotted var(--mn-input); border-radius: 12px; background: var(--mn-surface); }
[data-noodle="acini"] .tile:hover { background: var(--ac-screen), var(--mn-surface); }
[data-noodle="acini"] .tile[aria-selected="true"] { border-style: solid; border-color: var(--mn-fg); background: var(--ac-screen-2), var(--mn-surface-2); }The same guide, for AI tools: /ai/noodles/acini.md · MCP tool get_design_language.
Colour, type and brand
What Acini di pepe 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 · Black and ink
Authority, precision, luxury. It makes everything next to it look more deliberate.
Watch for: Pure #000 on pure #fff is harsh on long text. Soften one of the two slightly, or warm both.
Accent · Teal and cyan
Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
Watch for: Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered.
Page · White and paper
Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
Watch for: Empty is not the same as calm: white space needs a grid behind it.
A neutral primary with one teal and cyan accent: the accent means “look here” precisely because nothing else is coloured. The page itself is warm.
Type
One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting. Clear, modern, impartial. The voice of software and signage.
Personality
Reads as halftone, dotted, print, playful, editorial. Intensity 3 of 5.
Suits
magazines, music, culture, creative studios. Less suited to dense admin.
Tone of voice
Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
Logo
A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles.
Inspired by the noodle
- A spoonful of tiny beads→dotted borders and dotted underlines instead of solid lines
- Printed like a newspaper photo→halftone dot screens shade surfaces, selections and charts
- Growing beads→progress and emphasis grow the dots, from specks to full circles
- Pepper and broth→pepper black on warm paper, one teal accent
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 Acini di pepe. 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="acini">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/acini.css">
<!-- or scope it to one element -->
<section data-noodle="acini" 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 Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif |
| --mn-font-heading | ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif |
| --mn-radius-field / box / badge | 8px · 12px · 999px |
| density | default |
| shadows | none |