# Corzetti: a MIAN design language

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.

- Family: Elegant · Origin: Italy · Liguria · License: MIAN License (free to use)
- Traits: stamped, crafted, heritage, tactile, elegant · intensity 2/5 · contrast medium · density default. Good for: heritage brands, wine, bakeries, crafts, museums. Less for: developer tools.
- Use: `<html data-noodle="corzetti">` (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/corzetti.css
- Page: https://mian.ro/noodles/corzetti

## Design philosophy

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.

## The language

- **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.

## Colour, type and brand

- **Primary** #1e3a5f: blue (deep). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #8c2f1b: red (mid). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Page** #f6f1e6: brown and terracotta (pale). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Scheme.** Blue against red, close to complementary: strong contrast, so the accent must stay rare. The page 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.
- **Reads as** stamped, crafted, heritage, tactile, elegant.
- **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.
- 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: "corzetti").

## 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

## Designing new components in Corzetti

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

- 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 in this language:

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

## Tokens

- Fonts: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif
- Heading font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif
- Radius: field 6px, box 10px, badge 999px
- Density: default · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #f6f1e6 | #0f141c |
| surface | #fbf7ee | #161d28 |
| surface2 | #ede5d3 | #1f2835 |
| fg | #1c2533 | #efe8d8 |
| muted | #5c6474 | #a9a597 |
| border | #e0d6c0 | #2a3443 |
| input | #c6b99c | #465368 |
| primary | #1e3a5f | #a9c1e6 |
| primaryFg | #ffffff | #0d1a2d |
| secondary | #ede5d3 | #1f2835 |
| secondaryFg | #1c2533 | #efe8d8 |
| accent | #8c2f1b | #e58a70 |
| accentFg | #ffffff | #2a0a02 |
| ring | #1e3a5f | #a9c1e6 |
| 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 | #1e3a5f | #a9c1e6 |
| secondaryText | #6b6e70 | #878887 |
| accentText | #8c2f1b | #e58a70 |
| successText | #16733c | #4ade80 |
| warningText | #a24d0e | #fbbf24 |
| dangerText | #bd2628 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1e3a5f | #a9c1e6 |