# Fettuccine: a MIAN design language

One sheet, many ribbons. Tonal and friendly. Fettuccine, “little ribbons”, are all cut from a single sheet of egg dough. Fettuccine is a tonal system: every surface is a tint of one seed colour, layers are told apart by tone instead of lines, buttons are pills and anything you touch answers with a soft layer of its own colour.

- Family: Flat · Origin: Italy · Rome · License: MIAN License (free to use)
- Traits: tonal, friendly, modern, approachable, clean, trustworthy, flat · intensity 2/5 · contrast medium · density comfortable. Good for: consumer apps, mobile, productivity, education, public services, saas, android apps. Less for: luxury, editorial, raw or brutal brands.
- Use: `<html data-noodle="fettuccine">` (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/fettuccine.css
- Page: https://mian.ro/noodles/fettuccine

## Design philosophy

Fettuccine is a tonal system. One seed colour tints every surface: the page barely, cards a little, menus more, the chosen item most. Because layers differ by tone, lines between regions are unnecessary. Buttons are pills, the main one filled with the seed colour, and anything touched answers with a translucent layer of its own colour. Movement starts fast and settles slowly.

## Principles

- Tone is depth: page, card, menu and dialog are the surface mixed with 0, 5, 9 and 14% of the primary.
- No divider lines between regions; use a step in tone or 16–24px of space.
- State layers: hover and press add an 8–12% layer of the element’s content colour, they do not change its shape.
- One filled button per view; next come tonal (secondary) buttons, then outlined, then text buttons.
- Emphasised easing: cubic-bezier(.05,.7,.1,1), 200–260ms.

## The language

- **Shape.** Pill buttons, 12px fields, 20px cards, 28px dialogs, 8px chips. The switch thumb grows when it is on.
- **Surface.** Tinted, borderless cards (--ft-1); menus and dialogs a step deeper (--ft-2) with a small two-layer shadow.
- **Colour.** A blue seed (#0b57d0 / #a8c7fa), a pale tonal container for secondary actions, green as the second hue.
- **Type.** The system font; headings at 400, controls at 500 with +0.01em tracking.
- **Motion.** fettuccine-in: 8px rise and fade over 260ms with emphasised easing. No scale on press.
- **Data.** Bars in the 14% tone with the highlighted bar in the seed colour; a 2.5px line with a 14% area.

## Colour, type and brand

- **Primary** #0b57d0: blue (mid, saturated). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #146c2e: green (deep). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #f8fafd: white and paper (pale). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Blue with green: a contrasting pair that needs one of the two to dominate. The page is cool.
- **Type.** One voice throughout: system sans (the device’s own typeface). Headings are light to regular, which reads as delicate and unhurried. Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.
- **Reads as** tonal, friendly, modern, approachable, clean.
- **Tone of voice.** Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
- **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: "fettuccine").

## Inspired by the noodle

- Ribbons cut from one sheet → every surface is a tint of the same seed colour
- Layered on the plate → depth shown by tone: the higher the layer, the more colour it carries
- Soft egg dough → pill buttons, large radii, no hard lines between regions
- Tossed, not arranged → emphasised easing: things arrive quickly and settle slowly

## Designing new components in Fettuccine

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

- Fill the new surface with color-mix(in oklab, var(--mn-primary) 5%, var(--mn-surface)) and remove its border.
- Hover: step to the 9% tone and add var(--ft-lift). Press: 12% tone, no movement.
- Selected: var(--mn-secondary) fill with var(--mn-secondary-fg) text, the same pair used by tonal buttons.
- Use an outline (1px var(--mn-input)) only for inputs and chips.
- Round by size: 8px for small things, 12px medium, 20px large, 28px for dialogs.

Avoid:

- Divider lines between sections
- More than one filled button in a view
- Hard shadows
- Square corners
- Untinted grey surfaces

Recipe: a selectable tile in this language:

```css
[data-noodle="fettuccine"] .tile {
  padding: 16px; border: 0; border-radius: 20px;
  background: color-mix(in oklab, var(--mn-primary) 5%, var(--mn-surface)); color: var(--mn-fg);
  transition: background-color 200ms cubic-bezier(.05, .7, .1, 1), box-shadow 200ms;
}
[data-noodle="fettuccine"] .tile:hover { background: color-mix(in oklab, var(--mn-primary) 9%, var(--mn-surface)); box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 2px 6px 2px rgb(0 0 0 / .09); }
[data-noodle="fettuccine"] .tile[aria-selected="true"] { background: var(--mn-secondary); color: var(--mn-secondary-fg); }
```

## 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 12px, box 20px, badge 8px
- Density: comfortable · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #f8fafd | #131314 |
| surface | #ffffff | #1e1f20 |
| surface2 | #e9eef6 | #282a2c |
| fg | #1f1f1f | #e3e3e3 |
| muted | #444746 | #c4c7c5 |
| border | #dde3ea | #333537 |
| input | #747775 | #8e918f |
| primary | #0b57d0 | #a8c7fa |
| primaryFg | #ffffff | #062e6f |
| secondary | #d3e3fd | #004a77 |
| secondaryFg | #041e49 | #c2e7ff |
| accent | #146c2e | #6dd58c |
| accentFg | #ffffff | #0a3818 |
| ring | #0b57d0 | #a8c7fa |
| 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 | #0b57d0 | #a8c7fa |
| secondaryText | #6b717c | #6890a9 |
| accentText | #146c2e | #6dd58c |
| successText | #16783b | #4ade80 |
| warningText | #a84f0b | #fbbf24 |
| dangerText | #c52525 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0b57d0 | #a8c7fa |