# Orecchiette: a MIAN design language

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.

- Family: Rounded · Origin: Italy · Puglia · License: MIAN License (free to use)
- Traits: warm, friendly, soft, rounded, natural, calm · intensity 2/5 · contrast low · density comfortable. Good for: food, wellness, consumer apps, onboarding, local businesses, education. Less for: dense admin, developer tools.
- Use: `<html data-noodle="orecchiette">` (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/orecchiette.css
- Page: https://mian.ro/noodles/orecchiette

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #4f5d23: green (deep). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Accent** #a33b20: red (mid). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Page** #f6f3ec: brown and terracotta (pale). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Scheme.** Green with red: a contrasting pair that needs one of the two to dominate. The page is warm.
- **Type.** One voice throughout: rounded sans. Headings are semibold, which reads as confident without shouting. Friendly, soft, safe, young.
- **Reads as** warm, friendly, soft, rounded, natural (brand dimension: sincerity).
- **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.
- 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: "orecchiette").

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

## Designing new components in Orecchiette

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

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

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

## Tokens

- Fonts: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
- Heading font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
- Radius: field 14px, box 26px, badge 999px
- Density: comfortable · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #f6f3ec | #12140d |
| surface | #fbf9f4 | #1a1d14 |
| surface2 | #ece6da | #24281c |
| fg | #1e2216 | #f1f0e6 |
| muted | #595e4c | #b0b39c |
| border | #e1dbcd | #33382a |
| input | #c7bfae | #50573f |
| primary | #4f5d23 | #c3d38a |
| primaryFg | #ffffff | #1b2206 |
| secondary | #e6e9d6 | #2b3220 |
| secondaryFg | #2e3614 | #eef2da |
| accent | #a33b20 | #f08c6a |
| accentFg | #ffffff | #2a0a02 |
| ring | #4f5d23 | #c3d38a |
| 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 | #4f5d23 | #c3d38a |
| secondaryText | #6a6e5f | #86897b |
| accentText | #a33b20 | #f08c6a |
| successText | #167538 | #4ade80 |
| warningText | #a24d0b | #fbbf24 |
| dangerText | #c12524 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #4f5d23 | #c3d38a |