Ditalini
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.
Design language
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.
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.
Designing new components in Ditalini
MIAN does not ship every component you will need. To make a new one that belongs in Ditalini, build it from --mn-* tokens inside [data-noodle="ditalini"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/ditalini.md · MCP tool get_design_language.
Colour, type and brand
What Ditalini 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 · Blue
Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.
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.
Blue with its neighbour teal and cyan: an analogous pair, harmonious and natural. The page itself 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.
Personality
Reads as dense, conservative, sober, precise, calm. Intensity 1 of 5. Brand dimension: competence.
Suits
admin dashboards, finance, accounting, back office, data-heavy tools. Less suited to marketing sites, children, luxury.
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.
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
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 Ditalini. 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="ditalini">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/ditalini.css">
<!-- or scope it to one element -->
<section data-noodle="ditalini" 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 | -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-font-heading | -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-radius-field / box / badge | 4px · 6px · 4px |
| density | compact |
| shadows | subtle |