Orecchiette
Little ears, pressed with a thumb. Orecchiette, “little ears”, are pressed from a disc of dough with the thumb, leaving a smooth cup and a rough rim. Orecchiette is a concave system: controls are cups pressed into the surface, round shapes, olive green and a tomato accent on warm white.
Design language
Orecchiette is concave: surfaces are cups pressed into the page rather than objects floating above it. Pressing deepens the cup; choosing fills it with olive green. Round, warm and generous: friendly without being childish.
Principles
- Press in, not out: depth is inset; nothing floats except dialogs and menus.
- Round with a rim: round shapes with a slightly heavier edge.
- Warm and generous: comfortable spacing, rounded type.
- Olive for action, tomato for attention.
Shape
14px fields, 26px surfaces, round badges, round switch knobs.
Surface
Warm white; controls and cards are gently inset (inner shadow) on a slightly darker rim.
Colour
Olive green (#4f5d23), tomato brick accent, warm neutrals.
Type
Rounded sans at 700 for headings.
Motion
orecchiette-in: a soft scale-in; presses deepen the inset.
Data
Round-ended bars, olive fills.
Designing new components in Orecchiette
MIAN does not ship every component you will need. To make a new one that belongs in Orecchiette, build it from --mn-* tokens inside [data-noodle="orecchiette"] and follow these rules.
Do
- Surfaces: box-shadow: inset 0 2px 6px color-mix(in srgb, var(--mn-fg) 10%, transparent); border: 1px solid var(--mn-border).
- Pressed: inset shadow doubles; chosen: background var(--mn-primary) with var(--mn-primary-fg).
- Radius: var(--mn-radius-box) for surfaces, 999px for small controls.
Avoid
- Raised drop shadows on cards
- Sharp corners
- Cold greys
- Dense layouts
Recipe: a selectable tile
[data-noodle="orecchiette"] .tile { padding: 16px; border-radius: 26px; background: var(--mn-surface-2); box-shadow: inset 0 2px 6px color-mix(in srgb, var(--mn-fg) 10%, transparent); }
[data-noodle="orecchiette"] .tile:active { box-shadow: inset 0 4px 10px color-mix(in srgb, var(--mn-fg) 16%, transparent); }The same guide, for AI tools: /ai/noodles/orecchiette.md · MCP tool get_design_language.
Colour, type and brand
What Orecchiette 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 · 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.
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.
Green with red: a contrasting pair that needs one of the two to dominate. The page itself is warm.
Type
One voice throughout: rounded sans. Headings are semibold, which reads as confident without shouting. Friendly, soft, safe, young.
Personality
Reads as warm, friendly, soft, rounded, natural. Intensity 2 of 5. Brand dimension: sincerity.
Suits
food, wellness, consumer apps, onboarding, local businesses. Less suited to dense admin, developer tools.
Tone of voice
Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
Logo
Round marks fit: a circular symbol or a soft, lowercase wordmark.
Inspired by the noodle
- Pressed with a thumb→concave, inset surfaces instead of raised ones; pressing deepens the cup
- Round with a rough rim→round shapes with a slightly heavier edge
- Cime di rapa and tomato→olive green primary, tomato-brick accent
- Made by hand on a board→comfortable, generous spacing
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 Orecchiette. 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="orecchiette">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/orecchiette.css">
<!-- or scope it to one element -->
<section data-noodle="orecchiette" 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-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif |
| --mn-font-heading | ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif |
| --mn-radius-field / box / badge | 14px · 26px · 999px |
| density | comfortable |
| shadows | soft |