Maccheroni

Thick ink line, cut-out shadow, sweet colours. Maccheroni are short elbows of pasta, the first shape a child draws. Maccheroni is a blunt, cheerful system: a thick ink line around everything, a solid shadow you could cut out with scissors, flat sweet colours and corners just rounded enough to be friendly. Pressing a button pushes it down onto its shadow.

BoldItaly · Naplesradius 8px / 12pxdefault densityhard shadows

Use Maccheroni Design language (Markdown)Tokens JSON

Design language

Maccheroni is blunt and cheerful. Everything has a 2px ink outline and a solid shadow offset 4px down and right, like shapes cut from coloured paper and stuck on a cream page. Colours are flat and sweet (butter yellow, mint, pink) and always carry ink text. A button rises a pixel when you point at it and drops onto its shadow when you press it. Nothing is subtle, so it needs space and few elements.

Principles

Ink outline on everything: 2px, the same colour as the text.
Solid shadows, no blur: 2px for small things, 4px for controls and cards, 7px for overlays.
Flat sweet fills with ink text. No gradients, no transparency.
Press is physical: translate onto the shadow and remove it.
Friendly corners: 8px and 12px, never zero, never pills for buttons.

Shape

8px fields and buttons, 12px cards, 6px badges; tabs are outlined folders that fill when chosen.

Surface

Cream page, white surfaces, butter-yellow second surface. Nested cards lose the shadow.

Colour

Yellow primary, mint secondary, pink accent, all with #111 text. Dark mode keeps the same fills and turns the ink line cream.

Type

A grotesk at 800 for headings, 700 for controls and labels.

Motion

maccheroni-in: slides 4px from the top left in 160ms. Hover moves −1px, press moves +4px, both in 100ms.

Data

Outlined bars filled mint with the highlighted bar yellow; a 3px ink line with visible points.

Designing new components in Maccheroni

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

Do

Border: 2px solid var(--mn-border). Shadow: 4px 4px 0 var(--mn-border). Radius 12px.
Fill with var(--mn-surface), or one of the three sweets (--mn-primary, --mn-secondary, --mn-accent) with var(--mn-fg) text.
Hover: translate(-1px,-1px) and a 5px shadow. Active: translate(4px,4px) and no shadow.
Selected: fill with var(--mn-primary); keep the outline.
Inside a card, drop the shadow and keep only the outline.
Remove the transforms under prefers-reduced-motion.

Avoid

Soft or blurred shadows
Gradients and glass
Grey outlines
Pill-shaped buttons
Dense tables of small text

Recipe: a selectable tile

[data-noodle="maccheroni"] .tile {
  padding: 16px; border: 2px solid var(--mn-border); border-radius: 12px;
  background: var(--mn-surface); color: var(--mn-fg);
  box-shadow: 4px 4px 0 var(--mn-border);
  transition: transform 100ms cubic-bezier(.2, 0, 0, 1), box-shadow 100ms;
}
[data-noodle="maccheroni"] .tile:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--mn-border); }
[data-noodle="maccheroni"] .tile:active { transform: translate(4px, 4px); box-shadow: none; }
[data-noodle="maccheroni"] .tile[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }
@media (prefers-reduced-motion: reduce) { [data-noodle="maccheroni"] .tile { transition: none; transform: none; } }

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

Colour, type and brand

What Maccheroni 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 · Yellow and gold

#ffd23f · mid, saturated

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.

Accent · Red

#ff8fab · pale, saturated

Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.

Watch for: It is also the colour of errors. A red primary button next to a red error message makes both ambiguous, so pair a red brand with a distinct danger treatment (icon and words).

Page · White and paper

#fffdf5 · pale, saturated

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.

Yellow and gold with red: a contrasting pair that needs one of the two to dominate. The page itself is warm.

Type

One voice throughout: grotesque sans. Headings are heavy, which reads as loud and direct. Confident, graphic, European. A poster voice with a little warmth and irregularity.

Personality

Reads as brutal, playful, bold, cheerful, loud. Intensity 4 of 5. Brand dimension: excitement.

Suits

indie products, creator tools, creative agencies, education, communities. Less suited to finance, healthcare, luxury.

Tone of voice

Bold. Short claims, strong verbs, big numbers. Say one thing per screen and say it loudly.

Logo

A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles. Use a heavy wordmark; a thin one would vanish beside these headings.

Inspired by the noodle

The shape a child drawsa 2px ink outline around every element
Short, sturdy elbowssolid offset shadows with no blur, like paper cut-outs
Baked with cheesebutter yellow, mint and pink, flat, on cream
Eaten with a spoonbig, obvious controls that move down onto their shadow when pressed

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

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

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

Surface#ffffff

Muted surface#fff3c4

Foreground#111111

Muted text#4a4a4a

Border#111111

Input border#111111

Primary#ffd23f

On primary#111111

Secondary#90e0c9

Accent#ff8fab

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#111111

Typography & shape

--mn-font	"Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif
--mn-font-heading	"Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif
--mn-radius-field / box / badge	8px · 12px · 6px
density	default
shadows	hard