# Acini di pepe: a MIAN design language

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.

- Family: Pixel · Origin: Italy · “peppercorns” · License: MIAN License (free to use)
- Traits: halftone, dotted, print, playful, editorial · intensity 3/5 · contrast medium · density default. Good for: magazines, music, culture, creative studios. Less for: dense admin.
- Use: `<html data-noodle="acini">` (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/acini.css
- Page: https://mian.ro/noodles/acini

## Design philosophy

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.

## The language

- **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.

## Colour, type and brand

- **Primary** #1b1a17: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #0f766e: teal and cyan (deep, saturated). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Page** #fbf9f4: white and paper (pale). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A neutral primary with one teal and cyan accent: the accent means “look here” precisely because nothing else is coloured. The page 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.
- **Reads as** halftone, dotted, print, playful, editorial.
- **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.
- 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: "acini").

## 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

## Designing new components in Acini di pepe

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

- 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 in this language:

```css
[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); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Radius: field 8px, box 12px, badge 999px
- Density: default · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #fbf9f4 | #11100e |
| surface | #fffefb | #191815 |
| surface2 | #f1ede3 | #22201c |
| fg | #1b1a17 | #f2eee5 |
| muted | #5f5b52 | #a9a397 |
| border | #e3ddcf | #2d2a25 |
| input | #b9b1a0 | #5b564c |
| primary | #1b1a17 | #f2eee5 |
| primaryFg | #ffffff | #1b1a17 |
| secondary | #f1ede3 | #22201c |
| secondaryFg | #1b1a17 | #f2eee5 |
| accent | #0f766e | #5eead4 |
| accentFg | #ffffff | #04201c |
| ring | #0f766e | #5eead4 |
| 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 | #1b1a17 | #f2eee5 |
| secondaryText | #75736d | #86837c |
| accentText | #0f746c | #5eead4 |
| successText | #15783a | #4ade80 |
| warningText | #a84e0a | #fbbf24 |
| dangerText | #c52524 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1b1a17 | #f2eee5 |