# Lasagne: a MIAN design language

Flat sheets, stacked in layers. Lasagne are the flattest pasta there is, and the dish is built by stacking them: sheet, ragù, béchamel, sheet. Lasagne is a flat, layered system: solid colours with no gradients or blur, and surfaces stacked on visible offset layers of pasta yellow and ragù red.

- Family: Flat · Origin: Italy · Emilia-Romagna · License: MIAN License (free to use)
- Traits: flat, layered, structured, warm, playful · intensity 3/5 · contrast medium · density default. Good for: education, food, public services, consumer brands. Less for: quiet luxury, dense data.
- Use: `<html data-noodle="lasagne">` (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/lasagne.css
- Page: https://mian.ro/noodles/lasagne

## Design philosophy

Lasagne is flat and layered. The dish is built by stacking flat sheets, pasta, ragù, béchamel, pasta, so surfaces are flat solid colour with a 2px ink edge, sitting on offset layers you can count: pasta yellow, then ragù red. Pressing a button drops it onto its layer. No gradients, no blur, no soft shadows.

## Principles

- Flat colour only; depth is made of offset solid layers (--ls-layers), never blur.
- Two layers for containers (yellow 4px, red 8px), one layer for controls (yellow 3px).
- A 2px ink edge on everything you can touch.
- Press = the element moves onto its layer and the layer disappears.

## The language

- **Shape.** 6px controls, 10px containers; square-ish, cut from a tray.
- **Surface.** Cream sheets with 2px ink edges on stacked yellow and red offset layers.
- **Colour.** Béchamel cream, ragù red, pasta yellow, basil green.
- **Type.** Sans at 700–800 for headings, controls and table heads.
- **Motion.** lasagne-in: layers slide in from the top left with a small overshoot; presses take 90ms.
- **Data.** Columns stacked from sheets (repeating 10px bands), a red highlight, a thick 30% donut.

## Colour, type and brand

- **Primary** #b8322a: red (mid). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Accent** #2e6b3a: green (mid). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #fbf4e4: orange (pale, saturated). Warmth, friendliness, appetite, affordability. Active like red, without the alarm.
- **Scheme.** Red with green: a contrasting pair that needs one of the two to dominate. The page is warm.
- **Type.** One voice throughout: neutral sans. Headings are heavy, which reads as loud and direct. Clear, modern, impartial. The voice of software and signage.
- **Reads as** flat, layered, structured, warm, playful.
- **Tone of voice.** Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
- **Logo.** A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles.
- 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: "lasagne").

## Inspired by the noodle

- Flat sheets → flat solid colour: no gradients, no blur, no soft shadows
- Built in layers → cards and buttons sit on offset layers of pasta yellow and ragù red that you can count
- Béchamel, ragù, basil → a cream page, tomato-red action and basil-green accent
- Cut into squares from the tray → firm 6px corners and a press that drops a layer

## Designing new components in Lasagne

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

- border: 2px solid var(--mn-fg); box-shadow: var(--ls-layers) for containers, var(--ls-layer) for controls.
- Selected: background var(--ls-sheet); color #2a160f; inset 0 0 0 2px var(--mn-fg).
- :active { transform: translate(3px, 3px); box-shadow: none; }

Avoid:

- Gradients or blur
- Soft shadows
- Hairline borders

Recipe: a selectable tile in this language:

```css
[data-noodle="lasagne"] .tile { padding: 12px 16px; border: 2px solid var(--mn-fg); border-radius: 10px; background: var(--mn-surface); box-shadow: var(--ls-layer); transition: transform 90ms, box-shadow 90ms; }
[data-noodle="lasagne"] .tile:active { transform: translate(3px, 3px); box-shadow: none; }
[data-noodle="lasagne"] .tile[aria-selected="true"] { background: var(--ls-sheet); color: #2a160f; box-shadow: var(--ls-layers); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 6px, box 10px, badge 6px
- Density: default · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #fbf4e4 | #1a110c |
| surface | #fffaf0 | #22160f |
| surface2 | #f3e7cc | #2e1e15 |
| fg | #2a160f | #fbefdc |
| muted | #6e5446 | #c3a993 |
| border | #ead9b8 | #3a281d |
| input | #d8c29a | #5a4130 |
| primary | #b8322a | #ef6b5f |
| primaryFg | #ffffff | #2a0703 |
| secondary | #f3e7cc | #2e1e15 |
| secondaryFg | #2a160f | #fbefdc |
| accent | #2e6b3a | #7cc48a |
| accentFg | #ffffff | #0b2410 |
| ring | #b8322a | #ef6b5f |
| 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 | #b8322a | #ef6b5f |
| secondaryText | #7a6a5b | #908275 |
| accentText | #2e6b3a | #7cc48a |
| successText | #177538 | #4ade80 |
| warningText | #a64d0a | #fbbf24 |
| dangerText | #c32423 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #b8322a | #ef6b5f |