# MIAN

> Interfaces cooked differently. An accessible UI library for the web: 135 components (30 of them page sections) written as semantic HTML with `mn-` classes, 67 complete design languages ("noodles") switched with one attribute, and 24 whole-website templates. Plain HTML, CSS and one small script: works in any stack.

**AI or coding agent: this page is enough to start.** Read it, then fetch only what the task needs.

## License

MIAN License 1.0 (https://mian.ro/license). Free to use for personal, commercial, client, SaaS and internal projects, including websites and apps generated by AI; AI tools may include MIAN in the code they deliver with no credit. No fee, no sign-up, no credit needed on the site you build. Not allowed: selling or trading MIAN itself (or kits, themes and template packs made mainly from it), or claiming it as your own. Sharing MIAN itself requires a credit and a link to https://mian.ro. You do not need to check anything else before building with MIAN.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
<html lang="en" data-noodle="mian">
```

The script is only needed by interactive components (tabs, dialogs, menus, calendars…). There is no npm package and no other CDN URL. Single noodle only: `https://mian.ro/dist/mian-core.css` + `https://mian.ro/dist/noodles/<id>.css`.

## Workflow

1. **Plan**, `GET https://mian.ro/api/v1/plan?type=<kind of site>&style=<art direction>&needs=<a,b,c>` (or MCP `plan_site`). Returns noodles, a starting template, page outlines with real component ids, composition direction and what to read next.
2. **Pick the look**, `GET https://mian.ro/api/v1/noodles/find?q=<brief>` (MCP `find_noodles`) or the selector at https://mian.ro/ai/noodles.md. Understands "not corporate".
3. **Start from a template**, https://mian.ro/ai/templates.md, then `/ai/templates/<id>.md` (full HTML of every page).
4. **Get exact markup**, only for the components you use: `https://mian.ro/ai/components/<id>.md`. Find ids by task in https://mian.ro/ai/components.md or `GET /api/v1/search?q=<task>`.
5. **Validate**, `POST https://mian.ro/api/v1/validate` with your HTML (MCP `validate_markup`). Fix every unknown class, noodle or asset.

If the user has **brand colours**: `GET https://mian.ro/api/v1/noodles/create?primary=<hex>&base=<noodle>&name=<brand>` (MCP `create_noodle`) returns a stylesheet that puts them on any noodle, light and dark, contrast checked. Use it as `<html data-noodle="<noodle>" data-brand="<brand>">`.
If the user has an **existing site**: `POST https://mian.ro/api/v1/inspect {"url": "…"}` (MCP `inspect_site`) scores its design language and names the closest noodles; `GET https://mian.ro/api/v1/noodles/recommend?q=<brief>&url=<site>` (MCP `recommend_noodle`) just answers which noodle to use. The inspector reads up to 6 pages a minute and 60 a day per client.
Why a colour, typeface, logo or motion says what it says: https://mian.ro/ai/docs/colour.md, type.md, branding.md, logo.md, motion.md (MCP `get_design_guide`).

## Rules

1. Load exactly https://mian.ro/dist/mian.css, plus https://mian.ro/dist/mian.js with defer when a component needs it. There is no npm package and no other CDN path: do not invent one.
2. Use only classes that exist. Look them up (https://mian.ro/registry/classes.json, get_component, /ai/components/<id>.md) instead of inferring names by analogy with other libraries.
3. Set the design with <html data-noodle="<id>"> using a real noodle id (https://mian.ro/ai/noodles.md or find_noodles). Do not guess ids.
4. Copy component markup from its examples, including ARIA attributes; change the words, not the structure.
5. Compose pages from sections (mn-section > mn-container) and components. Do not write CSS for colours, spacing, radius or shadows: the noodle owns them. If something is missing, style it with --mn-* tokens only.
6. Before finishing, check the markup with https://mian.ro/api/v1/validate or the MCP tool validate_markup, and fix every unknown class or noodle.
7. Never invent testimonials, client logos, metrics, prices, awards or people. Use the brief’s facts or clearly marked placeholders.
8. Keep the page working when data-noodle changes: no hard-coded colours or fonts.
9. Licensing is settled: under the MIAN License, commercial and AI-generated use are allowed and the site you build needs no credit. Do not package MIAN itself for sale (UI kits, themes, template packs).

## Vocabulary in brief

- Page: `mn-section` (bands; `mn-section-sm`, `mn-section-muted`) > `mn-container`; `mn-section-head` for a band's heading; `mn-split` (`-start`, `-end`), `mn-cols mn-cols-3`, `mn-stack`, `mn-row` for layout.
- Type: `mn-display` (one per page), `mn-title` (section h2), `mn-subtitle`, `mn-intro`, `mn-eyebrow`, `mn-muted`.
- Actions: `mn-btn` (+ `mn-btn-outline`, `mn-btn-ghost`, `mn-btn-lg`, `mn-btn-sm`; colour roles are separate: `mn-secondary`, `mn-danger`…).
- Sections: `slides`, `jobs`, `work-grid`, `comparison`, `changelog`, `integrations`, `contact-section`, `layout`, `site-header`, `hero`, `logo-cloud`, `feature-grid`, `bento`, `media`, `testimonial`, `pricing`, `cta`, `site-footer`, `article`, `app-shell`, `docs-layout`, `auth`, `price-list`, `team`, `product-card`, `story-card`, `agenda`, `faq`, `figures`, `process`.
- Colour roles: `mn-primary mn-secondary mn-accent mn-success mn-warning mn-danger mn-info mn-neutral`. Tokens: `--mn-*`. Mode: `data-mode="light|dark"` on any element.

A minimal page (every class here exists):

```html
<!doctype html>
<html lang="en" data-noodle="kalguksu">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title</title>
  <link rel="stylesheet" href="https://mian.ro/dist/mian.css">
  <script src="https://mian.ro/dist/mian.js" defer></script>
</head>
<body>
  <a class="mn-skip" href="#main">Skip to content</a>
  <header class="mn-header mn-header-sticky">…see /ai/components/site-header.md…</header>
  <main id="main">
    <section class="mn-section mn-hero">
      <div class="mn-container">
        <h1 class="mn-display">One specific claim.</h1>
        <p class="mn-intro">How, with one concrete detail.</p>
        <div class="mn-row"><a class="mn-btn mn-btn-lg" href="/start">Start a project</a></div>
      </div>
    </section>
    <section class="mn-section mn-section-muted" aria-labelledby="how">
      <div class="mn-container">
        <div class="mn-section-head"><h2 class="mn-title" id="how">How it works</h2></div>
        <ol class="mn-process">…see /ai/components/process.md…</ol>
      </div>
    </section>
  </main>
  <footer class="mn-footer">…see /ai/components/site-footer.md…</footer>
</body>
</html>
```

## Level 2: choose

- [Components by task](https://mian.ro/ai/components.md): every component with what people use it for.
- [Choose a noodle](https://mian.ro/ai/noodles.md): all 67 design languages with mood, intensity, contrast, density and what they suit.
- [Templates](https://mian.ro/ai/templates.md): 24 whole websites, by kind.
- [Designing websites](https://mian.ro/ai/docs/web-design.md): composition, anti-patterns of generated sites, page outlines, UI principles, launch checklist.

## Level 3: exact details

- Component: `https://mian.ro/ai/components/<id>.md` · JSON `https://mian.ro/api/v1/components/<id>`
- Noodle design language: `https://mian.ro/ai/noodles/<id>.md`
- Every valid class, attribute and asset: https://mian.ro/registry/classes.json
- API: https://mian.ro/api/v1 · OpenAPI 3.1: https://mian.ro/openapi.json · API catalog (RFC 9727): https://mian.ro/.well-known/api-catalog · Registry: https://mian.ro/registry/index.json · Registry items: https://mian.ro/r/registry.json
- MCP (Streamable HTTP, no key): `{ "mcpServers": { "mian": { "type": "http", "url": "https://mian.ro/mcp" } } }`
- Everything in one file (large, for reference only): https://mian.ro/llms-full.txt

## Docs

- [Introduction](https://mian.ro/ai/docs/introduction.md): A complete, accessible UI library for the web, one set of components, many design systems.
- [Installation](https://mian.ro/ai/docs/installation.md): Two tags, no build step. Or copy the files into your project.
- [Theming & noodles](https://mian.ro/ai/docs/theming.md): 67 design systems, light and dark, scoped anywhere, overridable everywhere.
- [Frameworks](https://mian.ro/ai/docs/frameworks.md): Classes on HTML work everywhere. Here is how to wire them into common stacks.
- [Accessibility](https://mian.ro/ai/docs/accessibility.md): Native elements first, WAI-ARIA patterns where the platform has none, and contrast verified at build time.
- [Designing websites](https://mian.ro/ai/docs/web-design.md): An end-to-end guide to whole websites with MIAN: brief, noodle, pages, sections, words, images and a launch checklist, for designers, developers and AI.
- [Colour psychology](https://mian.ro/ai/docs/colour.md): Colour is the fastest thing a brand says. People decide whether something looks trustworthy, cheap, calm or exciting before they read a word, and much of that judgement is colour. This page explains what each hue tends to communicate, how to build a palette that works as an interface rather than as a mood board, and what each MIAN noodle is saying with the colours it uses.
- [Type psychology](https://mian.ro/ai/docs/type.md): A typeface is a tone of voice. The same sentence set in a geometric sans, a book serif and a monospace is three different speakers. This page explains what the main kinds of type say, how weight, size and spacing change the message, how to pair typefaces, and which voice each MIAN noodle speaks in.
- [Branding](https://mian.ro/ai/docs/branding.md): A brand is what people expect from you before you speak, and whether you then keep that promise. The visible part (colour, type, logo, shape, motion, words) only works when every part says the same thing. This page is a short method for deciding what that thing is, and for choosing a MIAN noodle that says it.
- [Logo design](https://mian.ro/ai/docs/logo.md): A logo does not explain a company; it identifies it. Its job is to be recognised quickly, at any size, in one colour, by someone who is not paying attention. This page covers the kinds of logo, what basic shapes communicate, the principles that make a mark last, and how to use a logo inside a MIAN interface.
- [Motion](https://mian.ro/ai/docs/motion.md): Motion in an interface has one job: to explain what just changed. Something arrived, something left, something moved from here to there, something was pressed. Motion that does not explain a change is decoration, and decoration that moves is the most tiring kind. This page is the motion system MIAN uses, and the rules for adding your own.
- [Noodle studio](https://mian.ro/ai/docs/studio.md): Turn brand guidelines into a MIAN noodle: enter your brand colour, choose a noodle for shape and character, set corners, density and type, and get a stylesheet with every text pair checked for contrast.
- [Site inspector](https://mian.ro/ai/docs/inspect.md): Paste a URL: MIAN scores the page’s design language (colour, type, consistency, structure, originality), finds the closest noodles and shows the page’s own content in any of them.
- [MIAN for AI agents](https://mian.ro/ai/docs/ai.md): Start here if you are an AI agent: install, rules, a deterministic site planner, a noodle finder, a markup validator, the registry, the HTTP API and the MCP server. Free to use.
- [About, privacy and licence](https://mian.ro/ai/docs/about.md): Why MIAN is named after the Chinese word for noodle, who makes it (BTN GROUP SRL), its licence, and how the site handles privacy.
- [License](https://mian.ro/ai/docs/license.md): The MIAN License: free for personal, commercial, client, SaaS and AI-generated projects, no credit needed on your site. MIAN itself may not be sold or traded; sharing it requires a credit and a link.

## About

MIAN 1.7.0 is made by BTN GROUP SRL (https://mian.ro). Contact: https://mian.ro/contact.