Designing websites

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.

Three layers

MIAN gives you three layers for a whole website: components (buttons, fields, tables, dialogs), sections (hero, bento, pricing, footer and more, the pieces pages are made of) and noodles (complete design languages). This guide is how to put them together into a site that looks designed by a person with taste: a clear brief, the right noodle, pages built from sections in a deliberate rhythm, real words, honest imagery, and a check before launch.

Components: 105 controls and displays: buttons, fields, tables, charts, dialogs.
Sections: 30 building blocks of pages: hero, bento, pricing, footer.
Templates: 24 whole websites to start from.

From brief to launch

Write the brief in three lines. Who the site is for, what they need to decide, and the one action you want them to take. Every later choice is checked against these three lines.
Choose the noodle from the character, not the colour. A law firm is Elegant or Minimal, a toy shop Rounded, a developer tool Linear, a festival Bold, a weather app Glass. Read the noodle’s design language before building; colours can be changed later, character cannot.
List the pages and give each one job. Home persuades, pricing decides, docs teach, product sells one thing, contact reassures. A page with two jobs does neither.
Outline each page as sections. Write the sequence before any markup: hero → proof → how it works → details → objections → action. Use the page anatomies below; vary the rhythm so no two neighbouring sections look alike.
Write the real words first. Headlines are claims in the reader’s language; every number has its context; buttons say what happens. Never lay out lorem ipsum: layout follows content, not the other way round.
Compose with sections, then extend. Build pages from MIAN sections and components only. When something is missing, design it in the noodle’s language (its extension rules and recipe) with --mn-* tokens, scoped to [data-noodle].
Choose imagery honestly. Your product’s real interface (built from components), then real photography, then illustration drawn with tokens. Where a photo is still missing, use a placeholder that describes the shot.
Check it like a user. Phone to wide screen, light and dark, keyboard only, a screen reader pass, slow network. Run the launch checklist at the end of this guide.

Principles

One idea per section, one primary action per page. Everything else supports them.
Hierarchy comes from size and space before boxes and colour. A bigger headline and more air beat another border.
Rhythm: alternate density (a dense bento, then a quiet quote), alignment (split, then centred), and background (plain, muted, bordered). Repetition of the same block is what makes pages look generated.
Specific beats impressive. “Closes the books in four days” beats “blazing fast”; “84 ms p99, last 30 days” beats “lightning quick”.
Colour carries meaning. Keep a neutral canvas and let the noodle’s accent mark the one thing that matters; status colours only for status.
Structure shows through. Tabular data is a table, steps are an ordered list, a menu has prices that line up. The markup and the layout tell the same story.
Detail at small scale is what reads as craft: tabular figures, units, dates in <time>, captions under images, a hint under a field.
One system, applied without exceptions. One radius, one shadow scale, one motion curve: the noodle provides them; do not add your own.

Why sites look generated

The patterns that make a page look machine-made, and what a designer would do instead.

Instead of	Do this
Purple-to-blue gradients, glowing blobs and “aurora” backgrounds	Use the noodle’s palette. One accent, flat, or a texture the noodle defines (hatching, dots, grain, glass) used on purpose.
Every section centred	Left-align most copy and let splits create tension. Centre only a hero, a pull quote or a closing call to action.
Three identical cards with an icon: “Fast, Secure, Scalable”	Ruled features with specific claims, a bento showing real product states, or a band of figures with their context.
Emoji and mismatched icons as decoration	One stroke icon set at one size, only where an icon helps recognition, or no icons at all.
Gradient-filled headline text	Solid ink. Emphasis comes from size, weight and the words themselves.
Buzzwords: unlock, elevate, seamless, supercharge, revolutionise, “in today’s fast-paced world”	Concrete verbs and nouns from the customer’s own vocabulary, plus a number.
Anonymous five-star testimonials (“John D., CEO”)	Real names, roles and a specific outcome, with permission, or leave the section out.
Stock photos of people pointing at laptops	Your product, your people, your place. Until then, a placeholder that describes the photograph you need.
Every section the same height, padding and layout	Mix mn-section-sm and regular sections, muted and bordered bands, splits, grids and single statements.
Glass, blur and heavy shadows on everything	Depth only for things that float (menus, dialogs, sticky bars). In a glass noodle, glass is the material: keep text on solid enough surfaces to read.
A vague hero with “Get started” and “Learn more”	A claim, one line of proof, and a specific action: “Start free for 30 days”, “Book a seat”, “Read the quickstart”.
Numbers without context (“10× faster”, “99.9% happy”)	State the measure, the window and the source: “Median close 3.5 days, after three months”.
Everything fades and slides in on scroll	Motion for state changes only: opening, selecting, confirming. The noodle’s enter animation is enough, and it respects reduced motion.
Walls of bordered cards	Whitespace and hairlines for text; cards only for things that are objects: a plan, a product, a tile, a message.
Lorem ipsum, “Feature one”, “Company name”	Write the real words, or realistic ones for a demo, before the layout.
A footer with thirty links to pages that do not exist	Only pages that exist, grouped the way visitors think.
Dark mode as an inverted afterthought	Every noodle has a designed dark palette. Check both modes; use data-mode="dark" on a section for a deliberate dark band.
The same hero everywhere: badge, giant headline, paragraph, two buttons	Open with what this page is about. A statement headline alone, a split with the real product, a single figure, or, on inner pages, straight into the content. Badges only when there is news.
Cards used only to separate things	Whitespace, rules and background bands separate. Cards are for objects the visitor can pick: a plan, a product, a message, a project.
Three-column grid after three-column grid	After a grid, change the shape: a single statement, full-width media, a table, a split or a list.
Image left, image right, image left… all the way down	Use a split at most twice in a row, and not with the same ratio. Break the pattern with a full-width or centred section.
Pills and badges on every heading and card	Keep badges for status, counts and genuinely new things. An eyebrow label is enough to name a section.
Invented metrics, logos, testimonials, customer counts or awards	Only facts from the brief. If a section needs proof you do not have, leave it out or leave a clearly marked placeholder for the owner.
Ten sections because landing pages have ten sections	Most homepages need six to eight. Cut any section that repeats an earlier argument.
A formula filled in: hero → logos → features → testimonials → pricing → FAQ → CTA	Derive the order from the content: what does this visitor need to know first, what will they doubt, what do they do next?
A badge or pill directly above the headline	Start with the headline. News goes in a banner, in the line under the buttons, or in the first paragraph.
One neutral sans for every word, at one weight	Use the noodle’s own type. If it is a neutral sans, make hierarchy with weight and size; if the brand has a voice, give headings a second typeface with a job.
A serif italic word dropped into a sans headline	Emphasise with the words, or set the whole headline in the serif.
The fashionable type pair of the year	Choose type for what it says about this brand, not for what is on every other new site.
Em dashes in every sentence	Commas, colons and full stops. A dash is for a real break in thought, once on a page.
Buttons and links that only fade on hover	A hover state changes tone or shape in the noodle’s own way, and a press is felt. The components already do this: do not override them with opacity.
Cards with a thick coloured border down one side	Keep the side rule for one kind of callout. Cards differ by content, not by a coloured stripe.
A glow that follows the cursor, particles, a spotlight	No decoration that reacts to the pointer. Motion explains a change of state.
Low-contrast dark mode: grey text on near-black, dim borders	Every noodle’s dark palette is checked at 7:1 for body text. Use its tokens; never lower the opacity of text to make it “secondary”.
Grey text placed on a coloured background	On a colour, use that role’s own foreground token (for example --mn-primary-fg), never --mn-muted.
Pure black on pure white, untinted greys	Tint neutrals slightly toward the brand hue, or use a noodle whose neutrals already are. The studio does this for you.
Cards inside cards inside cards	One level of surface. Inside a card, separate with space and hairlines.
A rounded square with an icon above every heading	Headings do not need an icon. Use one only where it helps people find a thing they already know.
Spacing that changes from section to section for no reason	Use mn-section and mn-section-sm and the gap utilities; do not add your own padding.
A component kit used with its default theme	Choose a noodle for its character, then put the brand’s own colour on it. Defaults are a starting point, not an identity.
Bounce and elastic easing on everything	Overshoot belongs to playful noodles, which already have it. Elsewhere use the noodle’s own easing.
Every block the same shape and weight	Give the page one loud moment (a display headline, a dark band, a big figure) and keep the rest quieter. Vary geometry: one grid, one split, one full-width, one list.

Foundations

Typography

Use the noodle’s heading and body fonts; do not add web fonts unless the brand requires one, then set --mn-font-heading.
mn-display for the one hero headline per page, mn-title for section headings (<h2>), mn-subtitle for sub-sections, mn-intro for lead paragraphs.
Headlines up to about ten words, in sentence case. text-wrap: balance is already on.
Body text 60–75 characters per line: mn-intro is 38em, mn-article-body 42rem.
Numbers that compare (prices, stats, tables) use tabular figures: MIAN sets them on figures, prices and .mn-num cells.

Layout

Put every band in mn-section with an mn-container inside. Sections are containers, so layouts adapt to their width, not the window.
Use splits for text beside media (mn-split-start or -end for 1.3 : 1), mn-cols for peers, mn-bento for mixed sizes.
Keep one left edge per page; let media bleed or break wider (mn-article-wide), never the text.
Vary section size: mn-section-sm for logos, figures and small calls to action; regular for main arguments.
Long pages benefit from one sticky element at most (the header, or an FAQ heading), never several.

Colour

The canvas is --mn-bg; mn-section-muted gives a second surface for alternating bands.
A band with data-mode="dark" is the strongest contrast move available: use it once or twice per page.
The accent (--mn-accent) marks one thing per view. Primary buttons already use --mn-primary.
Never set text colours by hand; use --mn-fg, --mn-muted and the -text variants, which are verified for contrast.

Imagery

Order of preference: the real product (built from MIAN components inside mn-mockup frames) → real photography → illustration drawn with tokens → a described placeholder (mn-media-placeholder).
Keep one aspect ratio per group (--ratio on mn-media) and consistent lighting and background across product photos.
Alt text says what the image shows and why it is there; decorative images use alt="".
Put captions under images that carry information (mn-caption).

Copy

Headline: the benefit as a claim the reader can check. Intro: how, with one concrete detail.
Buttons: verb + object (“Book a seat”, “Download the zip”), never “Submit” or “Click here”.
Every number with its unit, window and, where it matters, its source.
FAQ answers real objections (price, risk, effort, lock-in), in one or two sentences each.
Hints and errors sit next to the field they belong to.

Motion

Rely on the noodle’s enter animation and transitions; they already vary by design language.
Animate state changes (open, select, confirm), not scrolling.
MIAN sets durations to zero under prefers-reduced-motion; do the same for anything you add.

Responsive

Check 320, 390, 768, 1024 and 1440 px wide. Nothing may scroll sideways except tables (mn-table-wrap) and code.
Tap targets at least 44 px; the site header collapses to a native <details> menu on narrow screens.
Test inside narrow containers too: sections query their own width.

Accessibility

Landmarks: <header>, <main id="main">, <footer>; a skip link (mn-skip) first in <body>.
One <h1> per page and heading levels in order.
Label every control; icon-only buttons need aria-label.
Never use colour alone: badges have words, charts have labels, required fields say so.
Contrast is verified for every noodle; keep it by using tokens rather than custom colours.

Performance and search

One stylesheet and, only if needed, one deferred script. No framework, no web fonts by default.
Give images width and height (or an mn-media ratio) and loading="lazy" below the fold.
Unique <title> (≤ 60 characters) and meta description per page; canonical URLs; an Open Graph image.
Structured data that matches the page: Organization, Product, Event, Article, FAQPage, BreadcrumbList.
Semantic HTML is also what answer engines and AI assistants read: publish llms.txt for larger sites.

Composition

How sections are put together: order, rhythm, density, cards, asymmetry, width, prominence and contrast, and when to stop.

Ordering

Order sections by the visitor’s questions: what is it → is it for me → how does it work → can I trust it → what does it cost → what do I do now.
Put proof next to the claim it supports, not in a separate “testimonials” zone.
The last section asks for the same action as the hero.

Rhythm

Alternate density: after a dense section (bento, grid, table) place a quiet one (a statement, a quote, a single figure).
Vary section size: mn-section-sm for logos, figures and small asks; regular sections for arguments; one large moment per page.
Change background at most every two or three sections (plain → muted → plain, or one data-mode="dark" band).

Density

Marketing pages: low to medium density, one idea per section.
App screens: high density is fine, but only one dense region per view, the rest supports it.
Do not put two dense sections next to each other.

Cards

Cards are for objects the visitor can pick or open. Text that is read, not picked, sits on the page.
In one view, use one card style. Do not nest cards in cards.
A page with restrained card use: ruled features (mn-features-ruled), lists and splits instead of card grids.

Asymmetry

Splits at 1.3 : 1 (mn-split-start or -end) create tension; 1 : 1 splits are for comparisons.
Bento and work grids should mix tile sizes; equal tiles are a feature grid.
Left-align by default; centre only the hero, a pull quote or the closing ask.

Width

Reading text stays near 65 characters (mn-intro, mn-article-body). Media and grids can go wider; text never does.
One left edge per page.

Prominence

One primary action per page, repeated at most in header, hero and closing section.
One display headline (mn-display) per page; section headings use mn-title.
High-prominence sections (hero, bento, pricing, cta): no more than three on a page.

Contrast

Introduce contrast (a dark band, a big figure, a colour ribbon) once or twice per page, where the argument turns.
Never raise contrast on two neighbouring sections.

Restraint

Do not add a section because a formula has it. Every section must answer a question the visitor has.
Do not add statistics, logos, testimonials, awards or team members that are not in the brief.
Stop when the argument is complete. A shorter page with real content beats a long page with filler.

Principles for application UI

For dashboards, settings and flows, where people operate rather than read.

State first: every screen answers where am I, what changed and what should I do next.
One primary action per view. Destructive actions are separated, named precisely (“Delete 3 invoices”) and confirmed, or better, undoable.
Forms: labels above fields, hints before errors, validate on blur, keep what was typed, errors next to the field.
Feedback within a tenth of a second: pressed states, inline progress, a toast for background success, inline alerts for errors.
Empty states teach the first action; loading states have the shape of the content (skeleton), not a lone spinner.
Tables: text left, numbers right with units in the header, tabular figures, sortable only where it helps, bulk actions in a bar.
Density matches the task: dense for monitoring and operations, comfortable for onboarding and settings. Do not mix densities in one view.
Navigation: at most seven top-level items; the current place is always visible (aria-current, breadcrumbs, page title).
Keyboard: everything reachable, focus always visible, Escape closes, shortcuts shown with kbd.
Colour is never the only signal: statuses have words, charts have labels, errors have text.
Numbers carry units and time windows; dates are absolute when they matter (“25 Sep 2026”), relative when recency matters (“2 h ago”).
Do not hide critical information behind hover, and do not rely on hover on touch screens.
Motion explains a change of state and nothing else; it respects reduced motion.

Rules for AI agents

What a coding agent must do to build with MIAN correctly. The same rules are in llms.txt, AGENTS.md and the MCP server.

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.
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.
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.
Copy component markup from its examples, including ARIA attributes; change the words, not the structure.
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.
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.
Never invent testimonials, client logos, metrics, prices, awards or people. Use the brief’s facts or clearly marked placeholders.
Keep the page working when data-noodle changes: no hard-coded colours or fonts.
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).

Page anatomies

The sections of common pages, in order, with the MIAN classes to use. Each links to a template that follows it.

Landing page (product or SaaS)

Job: Persuade a qualified visitor to start a trial or book a demo.

Site header (mn-header) with one primary button
Hero (mn-hero): claim, one line of proof, primary + secondary action, the real product UI as media
Logo cloud (mn-logos), small and quiet
What it does: split section head + bento (mn-bento) of real product states
Figures band (mn-figures) with context, muted background
How it works (mn-process)
One long customer quote (mn-quote)
FAQ (mn-faq) answering objections
Call to action (mn-cta)
Footer (mn-footer)

Avoid: More than one primary action; A feature grid of adjectives; Testimonials without names.

See it in the Ledger template

Pricing

Job: Help the visitor choose a plan without talking to sales.

Headline that explains the pricing model
Billing switch and tiers (mn-plans, mn-pricing, mn-tier), one featured
Comparison table (mn-table) with row headers
Billing FAQ
Call to action

Avoid: Hiding the price behind “Contact us” on every tier; More than four tiers; Features listed only as icons.

See it in the Ledger template

Physical product

Job: Sell one product and answer what it is, what it does and what it costs.

Hero with the product large
Figures with everyday comparisons
Bento of what it does
Split story (materials, repair, origin)
Press quote
Buy block: price, options (mn-swatches), stock, delivery
Specs page (mn-dl groups, comparison table)

Avoid: Specs only as images; Countdown timers.

See it in the Dot One template

Documentation

Job: Get a developer from zero to a working result.

Site header
Docs layout (mn-docs): navigation, reading column, on-this-page list
Title and one-sentence outcome
Numbered steps with code (mn-pre), warnings (mn-alert), parameter tables
Next steps and previous/next pagination

Avoid: Code as screenshots; Walls of text without headings.

See it in the Relay template

Article or blog post

Job: Be read to the end.

Article head (mn-article-head): kicker, headline, intro, byline
Wide lead figure with caption
Reading column (mn-article-body mn-prose) with drop cap, figures, pull quote
Author note
Read next (mn-story grid)

Avoid: Lines longer than 75 characters; Ads or pop-ups inside the text.

See it in the Field Notes template

Magazine or blog front page

Job: Show the best story first and make browsing easy.

Lead story (mn-story-lead) clearly larger than everything else
Latest (mn-story grid)
Archive + most read (mn-agenda as a numbered list)
Newsletter (mn-cta with mn-subscribe)

Avoid: Every story the same size; Infinite scroll without an archive.

See it in the Field Notes template

Restaurant or café

Job: Get a booking or a visit.

Header with “Book” as the primary action
Hero: the dish, hours in the note
The one story that makes the place different
This week’s dishes (mn-pricelist)
Critic quote
Address, hours and accessibility as text
Booking call to action; menu and reservation pages

Avoid: Menus as PDFs or images; Hours only on a map.

See it in the Hana template

Shop home

Job: Get visitors into a product page.

Hero with the collection
Product grid (mn-products)
Maker story (split + mn-process)
Newsletter

Avoid: Fake scarcity; Carousels as the only navigation.

See it in the Kiln template

Product detail page

Job: Answer every question that stops a purchase.

Breadcrumbs
Gallery beside a sticky buy box: name, price with VAT, options, quantity (mn-number), add to cart, stock and delivery
Accordion: details, care, shipping and returns
More from the same collection

Avoid: Hiding shipping costs until checkout; Options without names.

See it in the Kiln template

Cart and checkout

Job: Finish the purchase with no surprises.

Line items with quantity and remove
Summary card: subtotal, shipping, tax, total
Gift card field
One checkout button and a reassurance line

Avoid: Upsells between the cart and payment; A total that changes at the last step.

See it in the Kiln template

App dashboard

Job: Tell the user where they stand and what to do next.

App shell (mn-shell) with sidebar and drawer on small screens
Page head (mn-shell-head) that states the user’s situation
Headline stats (mn-stats)
Charts, each titled with its conclusion
Latest activity table
Progress toward a goal

Avoid: Charts without a question; More than one accent colour for data.

See it in the Pace template

Settings

Job: Change things safely.

Tabs for groups
Forms in cards with save and cancel
Switches with a one-line consequence each
Destructive actions last, behind a confirm dialog

Avoid: Saving silently; Switches without explanations.

See it in the Pace template

Portfolio or agency

Job: Get the right client to write to you.

Statement headline, no hero image
Four large work tiles
Services (ruled features)
Outcomes (mn-figures)
Clients and team
One-sentence contact

Avoid: Twelve small thumbnails; Vanity metrics.

See it in the Studio Ito template

Case study

Job: Prove you can do it again.

Title and fact box (mn-dl)
Wide image
Problem
Process (mn-process)
Images
Results (mn-figures)
Next project

Avoid: Process without results; Unapproved client numbers.

See it in the Studio Ito template

Event or conference

Job: Sell tickets and answer logistics.

Name, date and city as the hero
Format figures
Speakers (mn-people)
Agenda preview (mn-agenda)
Tickets (mn-pricing) with real availability
Venue and access
Partners

Avoid: Fake countdowns; Accessibility buried in the footer.

See it in the Signal 26 template

Mobile app launch

Job: Get the app installed.

Split hero with the app on a phone (mn-mockup-phone) built from components
Bento of what it does
Privacy band
Figures and reviews
FAQ
Store buttons again

Avoid: Screenshots with unreadable text; Store badges repeated in every section.

See it in the Mist template

Hotel or rental booking

Job: Turn a visit into a reservation request.

Hero with the place and a Reserve action
Booking bar (range calendar in a popover, guests, one button) right under the hero
Rooms as cards with size, view and “from” price
Food, place or experience band
Press quote
Reservation page: steps, range calendar, room option cards (mn-choices), extras, details, a sticky summary with every line of the price

Avoid: Hiding taxes until the last step; Unavailable rooms that simply disappear, show them disabled with the next free date.

See it in the Villa Orsola template

Appointment booking

Job: Book a service at a time in under a minute.

Home: what you do, for whom, plain prices (mn-pricelist), the team, reviews
Booking: three questions, what (option cards), when (calendar + mn-slots), who (name, phone)
A summary whose button repeats the chosen time (“Book for 17:30”)

Avoid: Account creation before booking; Time pickers that hide how full the day is.

See it in the Nido template

Sales or CRM app

Job: Show progress to target and the next action.

App shell
Page head that states progress to target
Headline stats
Funnel (mn-funnel) for drop-off and a leaderboard (mn-leaderboard) for people
Revenue over time
One alert for what needs a human
Deals board (mn-kanban) with stalled deals flagged
Invoice (mn-invoice) with activity

Avoid: Ten charts nobody asked for; Colour-only deal states.

See it in the Pipeline template

Shop category page

Job: Help people narrow down and open a product.

Breadcrumbs and a headline for the collection
Quick filter chips, a filter drawer (sizes as mn-choices-pills, categories, price slider), sort
A result line (“6 of 9 pieces · size M”)
Product grid
Delivery, returns and repair promises

Avoid: Filters that reload the page without saying what changed; Infinite scroll without a count.

See it in the Nove template

Checkout

Job: Collect only what delivery and payment need.

Steps
Email with the reason it is needed
Address with autocomplete attributes
Delivery option cards with dates and prices
A sticky summary with items, tax and total

Avoid: Forced account creation; Pre-ticked marketing consent.

See it in the Nove template

Presentation or pitch deck

Job: Tell one idea per screen, in order.

Deck (mn-deck, mn-slides) with a progress line and a counter
Title slide
Problem
What you do (mn-process)
Traction (mn-figures, a chart with a text description)
Why now
The ask
People and one action

Avoid: Slides that only work with a clicker; Paragraphs on slides.

See it in the Orto template

Company website

Job: Explain what the company does and route people to the right door.

Hero that says what you do for clients
Figures
Selected projects (mn-story)
Services (ruled features)
Clients
Call to action; about (timeline, how we work, partners), careers, contact pages

Avoid: Mission statements instead of work; Stock photos of handshakes.

See it in the Aldini template

Careers

Job: Get the right people to apply.

Headline and how many people you hire
Specific benefits (hours, mentoring, mobility)
Open roles (mn-jobs) with team, location and type
An invitation to write if no role fits

Avoid: “Rockstars” and “ninjas”; Roles without a location or remote policy.

See it in the Aldini template

Agency or studio homepage

Job: Make the right client want to start a project with you.

Site header (mn-header) with “Start a project” as the one primary action
Statement hero (mn-hero), what you make and for whom, in one sentence; no stock image
Selected work (mn-work) in mixed sizes, each tile the real project with client and outcome
Services as a ruled list (mn-features-ruled), specific deliverables not adjectives
How we work (mn-process), four steps at most
One attributed client quote (mn-quote) if you have one
FAQ about budget, timeline and team (mn-faq)
Contact section (mn-contact) with a short brief form and a direct email

Avoid: Twelve small thumbnails; Vanity metrics (“200+ happy clients”); Awards you did not win.

See it in the Forma template

Admin or back-office app

Job: Let an operator find, check and act on records quickly and safely.

App shell (mn-shell) with grouped sidebar navigation
Page head with the question the screen answers and one primary action
A few stats (mn-stats) only if they change decisions
Filter bar (mn-filterbar): search, filter chips, sort, result count
Dense table (mn-table mn-table-compact) with numeric alignment and row selection
Bulk actions bar (mn-bulkbar) that appears on selection
Detail drawer (mn-drawer) instead of a new page for quick checks
Pagination (mn-pagination)

Avoid: Marketing sections inside the app; Colour-only statuses; Destructive bulk actions without a confirm or undo.

See it in the Quanta template

Real estate or rentals

Job: Help people shortlist properties and book a viewing.

Header with “Book a viewing”
Search hero: place, type, budget (mn-input-group, mn-select), no slogan
Filter bar and result count
Listing grid (mn-listing) with price, size in m², rooms and energy class
Listing page: gallery (mn-gallery), facts (mn-dl), description, floor plan placeholder, map placeholder, agent card, viewing slots (mn-slots)

Avoid: Prices “on request” everywhere; Photos without room names; Hiding fees until the viewing.

See it in the Casa template

Online course or school

Job: Get the right learner to enrol and then finish.

Hero with the outcome of the course and its length
Who it is for and what you will be able to do (mn-checklist)
Curriculum (mn-curriculum) with modules, lessons and durations
Teacher (mn-team or a split)
Price with what is included (mn-pricing or a single tier)
FAQ (time needed, refunds, certificates)
Learner area: progress, next lesson, notes

Avoid: Promised careers or salaries; Curricula without durations.

See it in the Lumen template

Contact

Job: Make writing to you feel safe and worthwhile.

Headline and what happens after sending
A short form (name, email, topic, message) with labels and hints
Alternatives: help articles, status, office hours

Avoid: Captchas that block people; Promising replies you cannot keep.

See it in the Aldini template

Composing by family

The same page anatomy reads differently in each family of noodles. Compose with the family, not against it.

Minimal: Let type and space carry everything. Large display headlines, generous section spacing, hairline rules instead of boxes, product UI as the only imagery. One accent at most. Good for software, finance, tools and studios.
Flat: Solid colour does the structuring: tonal bands instead of borders, wide ribbons for navigation and progress, no gradients, blur or soft shadows. Keep illustrations flat too. Good for consumer products, education, public services, food and playful brands.
Pixel: Everything sits on a matrix: dots, squares and cells. Use a visible grid or dot screen sparingly behind content, draw numbers and progress in cells, and let motion step rather than glide. Good for hardware, developer and data products, games and anything with a technical personality.
Linear: Build on a visible grid: aligned edges, rules, tabular figures, mono labels. Denser sections are welcome; splits and tables fit naturally. Good for developer tools, data products, logistics and engineering.
Thin: Everything light and exact: thin rules, light weights, lots of air, small type used with confidence. Few, large images. Good for studios, architecture, research, fashion and quiet luxury.
Glass: Glass needs something behind it: the noodle’s background image, a photograph or colour. Keep text on the more opaque surfaces, use blur for floating layers, and show the app or product through the glass. Good for consumer apps, weather, audio, wellness and media.
Textured: Texture is the brand: let it show on large surfaces and keep content areas calmer. Photography with natural materials suits it; illustrations should be drawn, not rendered. Good for crafts, food, outdoor, publishing and heritage.
Bold: Type is the artwork: huge headlines, heavy weights, strong colour bands, thick rules. Fewer, louder sections; one idea shouted clearly. Good for events, campaigns, youth brands, sport and music.
Elegant: Restraint and fine detail: serif or small-caps headings, narrow measures, centred statements used sparingly, gold or ink accents as punctuation. Good for law, hospitality, publishing, jewellery and culture.
Rounded: Soft and friendly: plump buttons, round images, warm colour, playful but clear copy. Keep layouts simple and spacing generous. Good for education, family, pets, food delivery and consumer onboarding.

Launch checklist

The brief’s one action is the primary button in the header, the hero and the last section.
Every page has one <h1>, headings in order, a skip link and landmarks.
No lorem ipsum, no placeholder brands, no invented testimonials left in.
Every number has a unit, a window and, where it matters, a source.
All photo placeholders replaced, with alt text; decorative images have alt="".
Nothing scrolls sideways at 320 px; tables and code scroll inside their boxes.
Light and dark both checked; data-mode bands still read well.
Keyboard only: every link, menu, dialog and form works and shows focus.
Forms: labels, autocomplete, errors next to fields, and a clear success state.
Titles, descriptions, canonical URLs, Open Graph image and structured data on every page.
Only one stylesheet and at most one deferred script; images sized and lazy-loaded.
Links in the footer and navigation all lead to pages that exist.

Using this guide with AI

Give an assistant this guide, a template and a noodle, and ask for pages built only from MIAN sections and components. The same guide is at /ai/docs/web-design.md and through the MCP tool get_site_guide (optionally for one page type and noodle); templates come from list_templates and get_template.

Build a website for <who it is for and what they should do> with MIAN
(https://mian.ro/llms.txt). Follow https://mian.ro/ai/docs/web-design.md,
start from the closest template, use only MIAN sections and components,
set <html data-noodle="<noodle>">, write real copy (no lorem ipsum),
and finish with the launch checklist.