# Capellini: a MIAN design language

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.

- Family: Thin · Origin: Italy · angel hair · License: MIAN License (free to use)
- Traits: airy, delicate, light, elegant, italian · intensity 1/5 · contrast low · density comfortable. Good for: wellness, beauty, weddings, personal brands. Less for: dense admin, data.
- Use: `<html data-noodle="capellini">` (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/capellini.css
- Page: https://mian.ro/noodles/capellini

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #26241f: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #e8d44d: yellow and gold (mid, saturated). Optimism, attention, caution. Gold tones add value and ceremony.
- **Page** #fdfcf8: white and paper (pale). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A neutral primary with one yellow and gold accent: the accent means “look here” precisely because nothing else is coloured. The page 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.
- **Reads as** airy, delicate, light, elegant, italian.
- **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.
- 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: "capellini").

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

## Designing new components in Capellini

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

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

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

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 14px, box 20px, badge 999px
- Density: comfortable · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #fdfcf8 | #121210 |
| surface | #ffffff | #1a1a17 |
| surface2 | #f5f3ea | #23231f |
| fg | #26241f | #f3f1e8 |
| muted | #6b675c | #aaa697 |
| border | #ebe8dd | #2d2c27 |
| input | #d8d4c6 | #45433b |
| primary | #26241f | #f3f1e8 |
| primaryFg | #ffffff | #1b1a16 |
| secondary | #f5f3ea | #23231f |
| secondaryFg | #26241f | #f3f1e8 |
| accent | #e8d44d | #efe06a |
| accentFg | #2b2500 | #262000 |
| ring | #8a7a0a | #efe06a |
| 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 | #26241f | #f3f1e8 |
| secondaryText | #75736c | #87867f |
| accentText | #7b7133 | #efe06a |
| successText | #16793b | #4ade80 |
| warningText | #a94f0b | #fbbf24 |
| dangerText | #c62625 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #26241f | #f3f1e8 |