Corzetti
Pasta coins, stamped by hand. Corzetti are discs of pasta pressed between two carved wooden stamps, so each coin carries a coat of arms on one side and a flower on the other. Corzetti is a letterpress system: debossed type, embossed surfaces pressed into the paper, round medallion badges, navy ink and a seal red on cream.
Design language
Corzetti is letterpress. Discs of pasta pressed between carved wooden stamps become a system where surfaces are pressed into the paper (inset light and shade) or raised off it, type is debossed and set in small capitals, badges and avatars are round medallions with a stamped double ring, navy ink and a seal red on warm laid paper.
Principles
- Pressed or raised: containers and controls use --cz-raise; wells, tracks and trays use --cz-press. Never a floating drop shadow.
- Stamp the type: headings and labels in small capitals with a 1px debossed highlight.
- Medallions: round badges and avatars with a double ring.
- Laid paper (--cz-laid) under surfaces, navy ink, a seal red accent.
Shape
6px controls, 10px containers, round medallions.
Surface
Warm laid paper; raised panels and pressed-in fields and tracks.
Colour
Navy ink (#1e3a5f), seal red (#8c2f1b), cream paper.
Type
Book serif, small capitals for labels, headings and buttons; debossed.
Motion
corzetti-in: pressed down from 103% with a hint of blur; the spinner turns and presses like a stamp.
Data
Rounded columns with an embossed edge; pressed tracks; a 26% donut.
Designing new components in Corzetti
MIAN does not ship every component you will need. To make a new one that belongs in Corzetti, build it from --mn-* tokens inside [data-noodle="corzetti"] and follow these rules.
Do
- Raised: box-shadow: var(--cz-raise); pressed: box-shadow: var(--cz-press).
- Paper: background: var(--cz-laid), var(--mn-surface).
- Labels: font-variant-caps: small-caps; letter-spacing: .04em; text-shadow: var(--cz-deboss).
Avoid
- Floating drop shadows
- Glossy gradients
- Neon or saturated colour
Recipe: a selectable tile
[data-noodle="corzetti"] .tile { padding: 12px 16px; border: 1px solid var(--mn-border); border-radius: 10px; background: var(--cz-laid), var(--mn-surface); box-shadow: var(--cz-raise); font-variant-caps: small-caps; }
[data-noodle="corzetti"] .tile:active, [data-noodle="corzetti"] .tile[aria-selected="true"] { box-shadow: var(--cz-press); background: var(--mn-surface-2); }The same guide, for AI tools: /ai/noodles/corzetti.md · MCP tool get_design_language.
Colour, type and brand
What Corzetti 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
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 · Red
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 · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
Blue against red, close to complementary: strong contrast, so the accent must stay rare. The page itself is warm.
Type
One voice throughout: book serif (old-style and transitional). Headings are semibold, which reads as confident without shouting. Considered, literate, established. The voice of books and long reading.
Personality
Reads as stamped, crafted, heritage, tactile, elegant. Intensity 2 of 5.
Suits
heritage brands, wine, bakeries, crafts, museums. Less suited to developer tools.
Tone of voice
Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
Logo
A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles. Set the wordmark in a serif to match the headings.
Inspired by the noodle
- Pressed between carved stamps→debossed text and embossed surfaces instead of shadows
- Round coins→round medallion badges, avatars and a spinner that turns like a stamp
- A family crest→navy ink, a seal red, small capitals
- Genoese paper→warm cream with a faint laid texture
Specimen
The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
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
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
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
This palette on Corzetti. Load it after mian.css and put data-brand on the same element as data-noodle.
Use it
<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="corzetti">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/corzetti.css">
<!-- or scope it to one element -->
<section data-noodle="corzetti" 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.
Typography & shape
| --mn-font | "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif |
| --mn-font-heading | "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif |
| --mn-radius-field / box / badge | 6px · 10px · 999px |
| density | default |
| shadows | subtle |