Fettuccine

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.

FlatItaly · Romeradius 12px / 20pxcomfortable densitynone shadows

Use Fettuccine Design language (Markdown)Tokens JSON

Design language

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.

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.

Designing new components in Fettuccine

MIAN does not ship every component you will need. To make a new one that belongs in Fettuccine, build it from --mn-* tokens inside [data-noodle="fettuccine"] and follow these rules.

Do

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

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

The same guide, for AI tools: /ai/noodles/fettuccine.md · MCP tool get_design_language.

Colour, type and brand

What Fettuccine 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

#0b57d0 · mid, saturated

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 · Green

#146c2e · deep

Growth, health, permission, money. The easiest colour to look at for a long time.

Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.

Page · White and paper

#f8fafd · pale

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 green: a contrasting pair that needs one of the two to dominate. The page itself 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.

Personality

Reads as tonal, friendly, modern, approachable, clean. Intensity 2 of 5.

Suits

consumer apps, mobile, productivity, education, public services. Less suited to luxury, editorial, raw or brutal brands.

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.

Inspired by the noodle

Ribbons cut from one sheetevery surface is a tint of the same seed colour
Layered on the platedepth shown by tone: the higher the layer, the more colour it carries
Soft egg doughpill buttons, large radii, no hard lines between regions
Tossed, not arrangedemphasised easing: things arrive quickly and settle slowly

Specimen

The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.

Try your brand colour

Your own

Open in the studio

Light

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

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

Dark

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

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

Use it

<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="fettuccine">

<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/fettuccine.css">

<!-- or scope it to one element -->
<section data-noodle="fettuccine" 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.

Background#f8fafd

Surface#ffffff

Muted surface#e9eef6

Foreground#1f1f1f

Muted text#444746

Border#dde3ea

Input border#747775

Primary#0b57d0

On primary#ffffff

Secondary#d3e3fd

Accent#146c2e

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#0b57d0

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	12px · 20px · 8px
density	comfortable
shadows	none