# Fusilli: a MIAN design language

Twisted, springy, a little off-axis. Fusilli are strands wound around a thin rod into springs. Fusilli is an expressive system for creative work: italic heavy headings, surfaces that tilt a degree on hover, spiral spinners, a springy overshoot on every press, basil green with a tomato accent.

- Family: Bold · Origin: Italy · Campania · License: MIAN License (free to use)
- Traits: expressive, playful, energetic, unusual, springy, creative · intensity 4/5 · contrast medium · density default. Good for: creative agencies, studios, portfolios, startups, communities, product launches. Less for: finance, legal, healthcare, dense admin.
- Use: `<html data-noodle="fusilli">` (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/fusilli.css
- Page: https://mian.ro/noodles/fusilli

## Design philosophy

Fusilli is springy and a little off-axis, made for creative studios and people who want a page to feel alive without being noisy. Italic heavy headings lean forward, surfaces tilt one degree when pointed at, presses overshoot and settle, and a spiral spins while things load. Violet ink with a basil-green accent.

## Principles

- Lean forward: headings are italic and heavy; motion moves forward and up.
- Spring, then settle: every press overshoots slightly and returns; nothing jitters.
- One tilt at a time: only the element under the pointer leans, by one degree.
- Colour with intent: violet for action, green only for what is new or done.

## The language

- **Shape.** 14px fields, 20px surfaces, pill badges and chips.
- **Surface.** White with soft green-tinted shadows; tiles tilt 1° on hover.
- **Colour.** Violet primary (#5b2bd9), basil green accent, lavender tints.
- **Type.** Clean sans at 800, italic for display and titles.
- **Motion.** fusilli-in: a twisting rise; presses use an overshooting spring.
- **Data.** Rounded columns, basil-green highlight, spiral spinner.

## Colour, type and brand

- **Primary** #1f6b34: green (deep). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Accent** #b8361d: red (mid, saturated). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Page** #fbfaf5: white and paper (pale). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Green with red: 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** expressive, playful, energetic, unusual, springy.
- **Tone of voice.** Bold. Short claims, strong verbs, big numbers. Say one thing per screen and say it loudly.
- **Logo.** Round marks fit: a circular symbol or a soft, lowercase wordmark. Use a heavy wordmark; a thin one would vanish beside these 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: "fusilli").

## Inspired by the noodle

- Wound around a rod → italic, forward-leaning headings and a spiral spinner
- Springs → overshooting motion; pressed controls bounce back
- Never quite straight → cards and tiles lean one degree when you point at them
- Tossed with pesto and tomato → basil green with a tomato-red accent

## Designing new components in Fusilli

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

- Hover: transform: rotate(-1deg) translateY(-2px) with var(--mn-spring).
- Headings: font-style: italic; font-weight: 800; letter-spacing -.03em.
- Surfaces: border-radius var(--mn-radius-box); box-shadow: 0 10px 30px color-mix(in srgb, var(--mn-primary) 14%, transparent).
- Use the accent only for new/done states.

Avoid:

- Tilting several things at once
- Rotation on text blocks people read
- Hard black shadows
- Constant looping animation

Recipe: a selectable tile in this language:

```css
[data-noodle="fusilli"] .tile { padding: 16px; border-radius: 20px; background: var(--mn-surface); box-shadow: 0 8px 24px color-mix(in srgb, var(--mn-primary) 12%, transparent); transition: transform 320ms var(--mn-spring); }
[data-noodle="fusilli"] .tile:hover { transform: rotate(-1deg) translateY(-2px); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Radius: field 14px, box 20px, badge 999px
- Density: default · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #fbfaf5 | #0d120c |
| surface | #ffffff | #141b12 |
| surface2 | #eef2e6 | #1d271a |
| fg | #141a12 | #f0f5ea |
| muted | #565e50 | #a6b29c |
| border | #e2e6d8 | #2a3626 |
| input | #c3cab6 | #43523d |
| primary | #1f6b34 | #8fdc6a |
| primaryFg | #ffffff | #0d2204 |
| secondary | #e2efd9 | #22331c |
| secondaryFg | #14401f | #e6f5dc |
| accent | #b8361d | #ff8a6b |
| accentFg | #ffffff | #2a0a02 |
| ring | #1f6b34 | #8fdc6a |
| 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 | #1f6b34 | #8fdc6a |
| secondaryText | #6b7366 | #7d8877 |
| accentText | #b8361d | #ff8a6b |
| successText | #15783a | #4ade80 |
| warningText | #a74e0a | #fbbf24 |
| dangerText | #c82524 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1f6b34 | #8fdc6a |