Capellini
Angel hair: light as air. Capellini d’angelo, angel hair, are the finest pasta made, often twisted into loose nests and served with nothing but lemon and butter. Capellini is an airy system: very light type, fine low-contrast lines, lots of space, soft round surfaces and a single note of lemon.
Design language
Capellini is air. Angel-hair pasta is the finest there is, twisted into loose nests and served with lemon and butter, so the interface is light type (250–400), lines at the edge of visibility, round white surfaces floating on diffuse light, lots of space and a single pale note of lemon. Nothing is heavy, nothing is loud.
Principles
- Weight is the hierarchy: 250 for headings, 350–400 for text and controls; nothing above 450.
- Hairlines at 9% ink, never solid grey borders.
- Surfaces float on one diffuse, warm shadow (--cp-air).
- Lemon only for the thread of emphasis: the tab underline, the switch, the highlighted bar, focus.
Shape
14px fields, 20px containers, pill badges; round and soft.
Surface
White on warm white, a 9% hairline and a wide, soft shadow.
Colour
Warm white, soft ink, pale lemon (#e8d44d) and nothing else.
Type
System sans at 250–400; large, light numbers.
Motion
capellini-in: 4px rise with a 3px blur, 340ms, a long soft ease.
Data
1px lines, round pale columns, a thin 10% donut; the highlight is lemon.
Designing new components in Capellini
MIAN does not ship every component you will need. To make a new one that belongs in Capellini, build it from --mn-* tokens inside [data-noodle="capellini"] and follow these rules.
Do
- border: 1px solid var(--cp-hair); border-radius: 20px; background: var(--mn-surface); box-shadow: var(--cp-air).
- Text weight 350; headings 250 with −0.035em tracking.
- Mark the chosen thing with a 2px lemon thread (var(--mn-accent)), not a fill.
Avoid
- Bold weights
- Dark or hard shadows
- Saturated colour
Recipe: a selectable tile
[data-noodle="capellini"] .tile { padding: 16px 20px; border: 1px solid var(--cp-hair); border-radius: 20px; background: var(--mn-surface); box-shadow: var(--cp-air); font-weight: 350; }
[data-noodle="capellini"] .tile[aria-selected="true"] { box-shadow: var(--cp-air), inset 0 -2px 0 var(--mn-accent); }The same guide, for AI tools: /ai/noodles/capellini.md · MCP tool get_design_language.
Colour, type and brand
What Capellini 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 · Yellow and gold
Optimism, attention, caution. Gold tones add value and ceremony.
Watch for: The lightest hue: white text on yellow fails, so yellow always carries dark text. Large yellow areas tire the eye.
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 yellow and gold 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 light to regular, which reads as delicate and unhurried. Clear, modern, impartial. The voice of software and signage.
Personality
Reads as airy, delicate, light, elegant, italian. Intensity 1 of 5.
Suits
wellness, beauty, weddings, personal brands. Less suited to dense admin, data.
Tone of voice
Quiet. Plain statements in sentence case, no exclamation marks, numbers with their units. Let space do the persuading.
Logo
Round marks fit: a circular symbol or a soft, lowercase wordmark. Use a light or regular wordmark; a heavy one would overpower this interface.
Inspired by the noodle
- The finest strand there is→300-weight type and lines at the edge of visibility
- Twisted into nests→soft round corners and a spinner that swirls like a nest
- Al limone→warm white, soft ink and one pale lemon accent
- Cooks in two minutes→quick, feather-light motion
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 Capellini. 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="capellini">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/capellini.css">
<!-- or scope it to one element -->
<section data-noodle="capellini" 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 | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-radius-field / box / badge | 14px · 20px · 999px |
| density | comfortable |
| shadows | soft |