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

More: https://mian.ro/ai (start page) · https://mian.ro/llms.txt · https://mian.ro/ai/components.md · https://mian.ro/ai/noodles.md · https://mian.ro/ai/templates.md