# Ditalini: a MIAN design language

Tiny tubes. A dense, calm ledger. Ditalini, “little thimbles”, are short, tiny tubes that fill a spoon of soup evenly. Ditalini is a dense, conservative system for data: compact controls, small exact type with tabular figures, quiet slate blue, ruled tables and nothing that competes with the numbers.

- Family: Linear · Origin: Italy · Sicily · License: MIAN License (free to use)
- Traits: dense, conservative, sober, precise, calm, trustworthy, serious · intensity 1/5 · contrast medium · density compact. Good for: admin dashboards, finance, accounting, back office, data-heavy tools, b2b saas, analytics. Less for: marketing sites, children, luxury.
- Use: `<html data-noodle="ditalini">` (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/ditalini.css
- Page: https://mian.ro/noodles/ditalini

## Design philosophy

Ditalini is a quiet ledger for dense work: compact controls, small exact type with tabular figures, ruled tables, sober slate blue. Everything is aligned to an even grid so that numbers can be compared at a glance. It is designed to disappear behind the data.

## Principles

- The data is the design: no decoration competes with numbers.
- Even grid: equal gaps, aligned columns, tabular figures everywhere.
- Compact but legible: small sizes, never below 12px, high contrast.
- Colour only for meaning: slate for action, teal for positive, status colours for status.

## The language

- **Shape.** 4px fields, 6px surfaces, square-ish badges.
- **Surface.** White cards with 1px borders and a faint shadow; zebra-free ruled tables.
- **Colour.** Slate blue (#1d3557), teal accent, neutral greys.
- **Type.** System UI at small sizes, tabular numbers, 600 headings.
- **Motion.** ditalini-in: a 120ms fade; no bounce.
- **Data.** Thin, compact bars and 1.5px lines; the highlighted series slate.

## Colour, type and brand

- **Primary** #1d3557: blue (deep). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #0f766e: teal and cyan (deep, saturated). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Page** #f7f8fa: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Blue with its neighbour teal and cyan: an analogous pair, harmonious and natural. The page is neutral.
- **Type.** One voice throughout: system sans (the device’s own typeface). Headings are semibold, which reads as confident without shouting. Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.
- **Reads as** dense, conservative, sober, precise, calm (brand dimension: competence).
- **Tone of voice.** Quiet. Plain statements in sentence case, no exclamation marks, numbers with their units. Let space do the persuading.
- **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: "ditalini").

## Inspired by the noodle

- Tiny and many → compact sizes, tight rows and small type that stays legible
- Evenly spread in a spoon → an even grid: equal gaps, aligned columns, tabular figures
- Pasta e fagioli, a working lunch → sober slate and teal, no decoration
- Short tubes → small squared ends: 4px corners throughout

## Designing new components in Ditalini

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

- Rows: height var(--mn-size-sm); padding .25rem .5rem; border-bottom: 1px solid var(--mn-border).
- Numbers: font-variant-numeric: tabular-nums; text-align: right.
- Keep radius at var(--mn-radius-field); no gradients; shadows at most --mn-shadow-sm.

Avoid:

- Large display type inside apps
- Decorative illustrations
- Animated charts
- Low-contrast greys for numbers

Recipe: a selectable tile in this language:

```css
[data-noodle="ditalini"] .tile { padding: 6px 10px; border: 1px solid var(--mn-border); border-radius: 4px; background: var(--mn-surface); font-size: .8125rem; font-variant-numeric: tabular-nums; }
[data-noodle="ditalini"] .tile[aria-selected="true"] { border-color: var(--mn-primary); box-shadow: inset 3px 0 0 var(--mn-primary); }
```

## Tokens

- Fonts: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 4px, box 6px, badge 4px
- Density: compact · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #f7f8fa | #0b0f16 |
| surface | #ffffff | #111722 |
| surface2 | #eef1f5 | #19212f |
| fg | #111827 | #e8edf5 |
| muted | #4b5563 | #9aa6b8 |
| border | #dde2ea | #263042 |
| input | #c3cad6 | #3b475c |
| primary | #1d3557 | #9dbbe6 |
| primaryFg | #ffffff | #0b1a30 |
| secondary | #e8edf5 | #1c2638 |
| secondaryFg | #1d3557 | #e8edf5 |
| accent | #0f766e | #5eead4 |
| accentFg | #ffffff | #042f2b |
| ring | #2563eb | #7aa7ff |
| 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 | #1d3557 | #9dbbe6 |
| secondaryText | #6b717e | #7a828f |
| accentText | #0f766e | #5eead4 |
| successText | #15783b | #4ade80 |
| warningText | #aa4f0b | #fbbf24 |
| dangerText | #c82526 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1d3557 | #9dbbe6 |