Chitarra

Black, white, one blue. Cut on steel strings. Spaghetti alla chitarra is pressed through a frame strung like a guitar, so every strand comes out square and identical. Chitarra is a stark system for feeds and timelines: true black or true white, hairline rules from edge to edge, heavy type, pill buttons and a single blue for what is live or chosen.

MinimalItaly · Abruzzoradius 24px / 16pxdefault densitynone shadows

Use Chitarra Design language (Markdown)Tokens JSON

Design language

Chitarra is a stark system for streams of content: feeds, timelines, inboxes. The page is true white or true black, items are separated by hairline rules that run from edge to edge rather than by cards, type is heavy, and every button is a pill. One blue marks what is live, linked or selected. It answers in 120ms and never decorates.

Principles

Rules before boxes: separate rows with a 1px rule; use a card only when something must stand apart.
True black and true white. Greys are for secondary text and rules only.
One blue (#0f6cbd / #1d9bf0) for links, the selected tab, switches and focus.
Heavy hierarchy: 800 for headings, 700 for names, buttons and chosen states, 400 for text.
Instant: 120ms fades, opacity on press, no movement.

Shape

Pill buttons, chips and inputs (24px); 16px containers; tabs as equal columns with a short 4px blue bar under the chosen one.

Surface

Flat. No shadows on resting surfaces; overlays get a soft all-round glow of the ink colour instead of a drop shadow.

Colour

Ink buttons, blue for state and links. Hover is a 10% wash of the element’s own colour.

Type

The system font. Headings 800 at −0.03em; labels and buttons 700.

Motion

chitarra-in: a 120ms fade. Pressed buttons drop to 85% opacity.

Data

Thin 2px bars in grey with the highlighted bar in blue; a 2px blue line.

Designing new components in Chitarra

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

Do

Lay new content out as rows divided by 1px var(--mn-border) rules; pad rows 12–16px and let them span the full width.
Hover a row with a 3% ink wash; never lift or outline it.
Selected: 700 weight plus a 4px blue bar (border-radius 999px) under or beside the item.
Buttons are pills at 700; the main one is ink, secondary ones are outlined in var(--mn-input).
Counts and metadata use var(--mn-muted) at the same size as text, not smaller.

Avoid

Cards around every item
Drop shadows
A second accent colour
Light font weights
Slow or bouncy motion

Recipe: a selectable tile

[data-noodle="chitarra"] .tile {
  padding: 14px 16px; border: 0; border-bottom: 1px solid var(--mn-border); border-radius: 0;
  background: var(--mn-bg); color: var(--mn-fg);
  transition: background-color 120ms ease-out;
}
[data-noodle="chitarra"] .tile:hover { background: color-mix(in oklab, var(--mn-fg) 3%, var(--mn-bg)); }
[data-noodle="chitarra"] .tile[aria-selected="true"] { font-weight: 700; box-shadow: inset 4px 0 0 var(--mn-accent); }

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

Colour, type and brand

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

#0f1419 · deep, muted

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

#0f6cbd · 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.

Page · White and paper

#ffffff · pale, muted

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.

Two tones of blue: harmonious and calm, with little contrast between brand and accent. The page itself is neutral.

Type

One voice throughout: system sans (the device’s own typeface). Headings are heavy, which reads as loud and direct. Native, familiar, efficient. It disappears, which is the point: the product feels like part of the device.

Personality

Reads as stark, bold, fast, direct, minimal. Intensity 3 of 5.

Suits

social apps, feeds and timelines, news, communities, media apps. Less suited to luxury, wellness, children.

Tone of voice

Lively. A point of view in the headline, concrete verbs, a little humour where it is true.

Logo

Round marks fit: a circular symbol or a soft, lowercase wordmark. Use a heavy wordmark; a thin one would vanish beside these headings.

Inspired by the noodle

Pressed through steel stringshairline rules that run edge to edge and divide everything
Square, identical strandsrows of equal items: lists, feeds and timelines before cards
Semolina and egg, nothing elsetwo colours, black and white, with one blue
A firm biteheavy 700–800 type and motion that answers in 120ms

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="chitarra">

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

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

Surface#ffffff

Muted surface#eff3f4

Foreground#0f1419

Muted text#536471

Border#e1e8ed

Input border#cfd9de

Primary#0f1419

On primary#ffffff

Secondary#eff3f4

Accent#0f6cbd

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#0f6cbd

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	24px · 16px · 999px
density	default
shadows	none