'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(265%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(265%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E)
'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(200%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(200%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E)
'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(40%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(40%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E)
Ledger
SaaS productA B2B software site: product home, pricing with a plan comparison, and sign-in.
Interfaces cooked differently.
面 (miàn) means noodle. From flour, water and salt come thousands of noodles; from one set of 135 accessible components come 67 complete design languages and 24 whole websites. Plain HTML, CSS and one small script: it works in every stack.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
Building with an AI coding agent? Point it to mian.ro/ai: machine-readable docs, a site planner and an MCP server. Free to use under the MIAN License.
Start from what you have
Have a website?
Paste its address. MIAN scores its design language, finds the noodles closest to it and shows it restyled.
Have a brand colour?
Put it on any noodle. You get a stylesheet for light and dark with every text pair checked for contrast.
Choosing a look?
What colours, typefaces, logos and motion say to people, and how to choose them on purpose. Every noodle page explains its own.
Read the design guidesSame markup. 67 design systems.
Pick a noodle and this dashboard re-cooks in place: shape, depth, texture, motion, charts and tables. Nothing is re-rendered; the markup never changes.
Minimal
Flat
Pixel
Linear
Thin
Glass
Textured
Bold
Elegant
Rounded
Create an account
Enter your email below to create your account.
or continue with
Revenue
January – December 2026
Total revenue€45,231 20.1%
Subscriptions+2,350 18%
Churn3.2% 0.4
Payments
Manage your recent payments.
| Status | Amount | Actions | |
|---|---|---|---|
| Paid | [email protected] | €316.00 | |
| Pending | [email protected] | €242.00 | |
| Processing | [email protected] | €837.00 | |
| Failed | [email protected] | €721.00 |
Team members
Invite your team to collaborate.
Notifications
Choose what you want to be notified about.
Getting started
2 of 4 steps complete.
- Create workspace
- Pick a noodle
- Invite your teamShare a link or send invites by email.
Tip
Every card on this page is plain MIAN markup.
Whole websites, in any noodle
24 complete templates, a SaaS site, developer docs, a restaurant, a magazine, a shop, a dashboard and more, built only from MIAN sections and components, with a written guide to designing sites that do not look generated.
Pipeline
CRM & sales appA sales app: a dashboard with target, funnel, leaderboard and revenue, a deals board, and an invoice with its history.
Quanta
Finance adminA conservative back-office app: an invoice list with a filter bar, bulk actions, a dense table and pagination, and an invoice page with its activity.
10 families of noodles
Each noodle is a complete design language inspired by a real noodle, its shape, texture and the way it is made, with its own written philosophy, tuned for light and dark and checked for contrast at build time.
Minimal
Mian
The noodle itself. Black, white, nothing else.
Flat
Fettuccine
One sheet, many ribbons. Tonal and friendly.
Pixel
Yinzhen
Silver needles. A system made of dots.
Linear
Kalguksu
Knife-cut, precise, clean.
Thin
Somen
Hair-thin, white, served on ice.
Glass
Kuzukiri
Clear glass in ice water. Black and white.
Textured
Cha Soba
Matcha, calm, considered.
Bold
Ramen
Bold, loud, high contrast.
Elegant
Soba
Earthy, editorial, restrained.
Rounded
Udon
Thick, soft, warm.
Why MIAN
面 (miàn) is the Chinese word for noodle. It also means face and surface, and an interface, in Chinese, is 界面 (jièmiàn), a “bounded surface”.
Noodles have been made for at least four thousand years from a handful of ingredients: flour, water, salt, sometimes egg or alkali. What changes everything is the hands, pulled, cut, shaved, rolled, extruded, dried, and the bowl it is served in. Interfaces are the same: a few primitives, endless languages.
Read the storyWhat you get
- No framework required
- Classes on semantic HTML. Drop it into React, Vue, Svelte, Laravel, WordPress or a static page.
- Accessible by default
- Native elements first: dialog, popover, details. Keyboard support, focus management and ARIA are built in and documented, and every noodle is checked for contrast when the site is built.
- Themeable to the core
- Noodles are CSS variables plus a skin. Scope one to any element, nest them, put your brand’s colours on top, or write your own.
- Built for AI agents
- llms.txt, a written design language for every noodle, a web design guide, templates, a JSON registry, an HTTP API and an MCP server that can plan a site, make a noodle from brand colours and check markup.
- Small
- 99.9 KB of CSS and 22.3 KB of JavaScript, compressed, for every component and all 67 noodles. No web fonts, no runtime. Load one noodle and it is far less.
- Yours to override
- Everything sits in CSS cascade layers, so your own styles win without !important.
Questions
What is MIAN?
MIAN is a UI library for the web: 135 accessible components written as semantic HTML with mn- CSS classes, and 67 complete design systems called noodles. It is one stylesheet and one small script, with no framework and no build step.
How do I install MIAN?
Add <link rel="stylesheet" href="https://mian.ro/dist/mian.css"> and, for interactive components, <script src="https://mian.ro/dist/mian.js" defer></script>. Components and noodles can also be copied into a project as registry items from /r/<id>.json.
What is a noodle?
A noodle is a whole design language over the same markup: light and dark palettes, radius, typography, density and depth, plus a skin that changes how buttons, fields, switches, tables, charts and animations are built. Each is inspired by a real noodle. Switch with data-noodle on any element. The default is Mian.
Does MIAN work with React, Vue, Svelte or WordPress?
Yes. MIAN is classes on HTML, so it works in any framework or CMS. mian.js watches the DOM and initialises components that are rendered later.
Is MIAN accessible?
MIAN uses native elements first (dialog, popover, details, real form controls) and WAI-ARIA patterns where the platform has none. Every noodle is checked for WCAG contrast when the site is built: 7:1 for body text, 4.5:1 for secondary and on-colour text, 3:1 for focus rings.
Can AI coding agents use MIAN?
Yes, and they can start at mian.ro/ai. MIAN publishes llms.txt, a written design language for every noodle, a JSON registry, a read-only HTTP API and an MCP server at https://mian.ro/mcp.
Does MIAN have website templates?
Yes. 24 complete, multi-page templates: saas product, crm & sales app, finance admin, analytics dashboard, developer platform, agency, bento studio site, cinematic studio site, hotel booking, appointment booking, real estate, restaurant, online shop, fashion shop, social network, magazine, online course, web app dashboard, company website, portfolio, presentation, hardware launch, mobile app, event: built only from MIAN sections and components. Each works in every noodle, downloads as a zip, and comes with design notes. See the templates and the guide to designing websites.
Is MIAN free to use?
Yes. Under the MIAN License it is free for personal, commercial, client, SaaS and internal projects, including sites and apps generated by AI, with no fee, no sign-up and no credit needed on your site. MIAN itself may not be sold or traded, and sharing it requires a credit and a link to mian.ro.
Can I use my own brand colours?
Yes. The noodle studio takes a brand colour and returns a stylesheet that puts it on any noodle, in light and dark, with every text pair checked for contrast. AI agents can do the same with POST /api/v1/noodles/create or the MCP tool create_noodle. If you already have a site, the site inspector finds the noodles closest to it.
Why is it called MIAN?
面 (miàn) is the Chinese word for noodle, and it also means face or surface; an interface in Chinese is 界面 (jièmiàn). A few ingredients make thousands of noodles: a few primitives make every interface. Read the story.
Who makes MIAN?
MIAN is made by BTN GROUP SRL. You can reach the team through the contact form.