Lasagne
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.
Design language
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.
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.
Designing new components in Lasagne
MIAN does not ship every component you will need. To make a new one that belongs in Lasagne, build it from --mn-* tokens inside [data-noodle="lasagne"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/lasagne.md · MCP tool get_design_language.
Colour, type and brand
What Lasagne 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 · 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).
Accent · Green
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
Page · Orange
Warmth, friendliness, appetite, affordability. Active like red, without the alarm.
Watch for: Can read as cheap when saturated across large areas; text on orange rarely passes contrast, so use it for fills with dark text or for accents.
Red with green: a contrasting pair that needs one of the two to dominate. The page itself 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.
Personality
Reads as flat, layered, structured, warm, playful. Intensity 3 of 5.
Suits
education, food, public services, consumer brands. Less suited to quiet luxury, dense data.
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.
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
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 Lasagne. 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="lasagne">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/lasagne.css">
<!-- or scope it to one element -->
<section data-noodle="lasagne" 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 | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-font-heading | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-radius-field / box / badge | 6px · 10px · 6px |
| density | default |
| shadows | none |