Fusilli
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.
Design language
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.
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.
Designing new components in Fusilli
MIAN does not ship every component you will need. To make a new one that belongs in Fusilli, build it from --mn-* tokens inside [data-noodle="fusilli"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/fusilli.md · MCP tool get_design_language.
Colour, type and brand
What Fusilli 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 · White and paper
Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
Watch for: Empty is not the same as calm: white space needs a grid behind it.
Green with red: 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 expressive, playful, energetic, unusual, springy. Intensity 4 of 5.
Suits
creative agencies, studios, portfolios, startups, communities. Less suited to finance, legal, healthcare.
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.
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
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 Fusilli. 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="fusilli">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/fusilli.css">
<!-- or scope it to one element -->
<section data-noodle="fusilli" 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 Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif |
| --mn-font-heading | ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif |
| --mn-radius-field / box / badge | 14px · 20px · 999px |
| density | default |
| shadows | soft |