Pages and apps

58 page templates, seven packs and nine demo apps (Wallet, Trips, and each pack with its own welcome screen), built only from the kit's components. Open one, change the words and pictures, and keep the structure.

Page templates

Page	Built from
Splash	`mk-splash`, wordmark, spinner; goes on to onboarding after 2.6 seconds
Onboarding	Cover carousel, steps, Skip and Next
Sign in, sign up, forgot password, verify	`mk-auth` hero with the curve, form card, fields, steps, one-time code with resend timer
Profile, edit profile	Avatar, stats, lists, sign-out dialog, form
Settings	Accent, mode and depth pickers, switches, lists
Notifications	Filter chips, lists grouped by day, unread dots
Plans	`mk-plan` cards, monthly or yearly switch
Chat	Bubbles, day separator, curved composer
Activity, calendar	Pill tabs and timeline; month grid with event dots and agenda
Help, contact, about, terms	Searchable accordion, contact list and form, cover and team, sections with an index
404, offline, maintenance	`mk-state` full-screen states; the offline page is also the service worker's fallback
Splash with photo, minimal splash, pick your interests	Photo cover under the curve; wordmark only; interest chips that unlock Continue at three
Creator profile, language and region, compare plans	Curved hero, follow toggle, tabs and gallery; language list that switches direction live; comparison table with a sticky first column
News, article, immersive story, reader	`mk-article`, `mk-quote`, `mk-figure`; cover with a curved corner; articles in a full-height sheet with a text size control
Feed	One feed shown as cards, a grid or a list; the choice is remembered and animates with the View Transitions API
Events, event details	`mk-date` tiles, filter chips, ticket sheet
App landing, product landing, cover, coming soon	Curved hero, `mk-store-badges`, `mk-features`, how it works, FAQ; `mk-countdown`
Services, team, careers	Numbers that count up, team grid, job list with an apply sheet and file upload
People lists, business card	Four list styles; `mk-vcard` that downloads a real `.vcf` contact
Tasks, projects, data table, system status	`mk-task` and `mk-priority` with add, tick and a progress ring; project cards; `mk-table` with sorting and search; `mk-status` and `mk-uptime` bars
Gallery, map, embeds	Gallery with chip filter and view switch; `mk-map` pins that open a place sheet; `mk-embed` videos and maps that load only when tapped
Payment methods, addresses, security, notification settings, privacy and data	Bank card, default radio list and an add-card sheet; addresses with a menu per row, Undo and "use my location"; password change with a strength meter, two-step switch, devices and sign-out dialog; push, email or SMS chips per topic with quiet hours (security alerts stay on); data download, choices, cookies and a delete dialog. Linked from Settings.
Messages, invoice, exchange	Inbox with search, filter chips, unread counts and swipe to archive; tax invoice with VAT, a QR code and print or save as PDF (the bars don't print); currency converter with swap, rate and a 7-day `MKChart.line`.

Packs

Two small apps that show the kit in other industries. Each has its own bottom bar and accent theme.

Smart home (midnight): my home with scenes and device tiles that light up when on; room with a thermostat dial and brightness; energy with a kWh chart and the devices using the most.
Fitness (sunset): today with activity rings, steps and water; workout timer with play and pause; progress with a minutes chart, streak, personal bests and badges.
Shop (rose, 8 screens, its own bottom bar with a cart count): home with offers, categories and a deal countdown; browse with filters, sorting and grid or list; product with colour, quantity, details and reviews; cart with quantities, swipe to remove, a free-delivery meter and a promo code (WELCOME10); checkout; order placed with tracking; wishlist; orders. The cart and wishlist really work, kept on the device by docs/assets/shop.js: swap its CATALOG and storage for your API. Products have real public-domain photos (CC0, free for commercial use, no credit needed) in docs/assets/photos/products, with their sources in CREDITS.txt; each tile keeps its icon underneath as a fallback.
Food (forest, 5 screens, its own bottom bar): home with the delivery address, offers, cuisine filters and restaurants; restaurant menu with opening hours, section chips that follow the scroll and a basket bar; dish with extras, a note for the kitchen and a live price; basket with delivery or pickup, rider tip and payment; order tracking with a rider moving along the route, arrival time, steps and a rating. The basket really works, kept on the device by docs/assets/food.js. Restaurants and dishes have public-domain photos in docs/assets/photos/food.
Learning (violet, 5 screens, its own bottom bar): home with continue learning, streak and course topics; course with a trailer, your progress and lessons in modules (done, up next, locked); lesson with a player face (play, seek, back 10 s, captions, speed, full screen), notes, files and "Done, next lesson"; quiz that checks and explains each answer and scores you; progress with a streak grid, hours chart, certificates and badges. Progress is kept on the device by docs/assets/learn.js; put your <video> inside .mk-player for real lessons. Courses have public-domain photos in docs/assets/photos/learn.
Health (lagoon, 5 screens, its own bottom bar): home with the next visit, quick actions, today's readings and doctors by specialty; doctor profile; book a visit with a 14-day strip (Fridays closed), time slots (taken ones crossed out), clinic or video and the reason; visits with directions or join call, cancel with Undo, past visits and medicines with refill; records with readings and trend lines, lab results against normal ranges, allergies and documents. Bookings are kept on the device by docs/assets/health.js. All health data is sample data.
Insurance (ocean, 5 screens, its own bottom bar): home with the policy card, quick actions, renewal notice, no-claims discount and a roadside-help sheet; quote that prices third-party or comprehensive cover live from the car value, driver age, add-ons and deductible; policy with a digital card, what it covers, drivers and documents; claim form with what happened, photos and the other car; and claims tracking with steps, adjuster, garage and payout. Its data lives in docs/assets/insure.js.

Wallet (finance, 14 screens)

Open apps/wallet. Violet theme.

Welcome with Face ID sign-in; two home layouts: balance hero with quick actions, cards and goals; or spending ring, budgets and upcoming bills.
Cards: card carousel, freeze switch, PIN and limit sheets, card controls.
Transfer: contact chips, amount keypad, review sheet, then transfer complete with a receipt.
Request with a code to scan, bills with pay and autopay, statements with two Chart.js charts, activity with search and category chips, payment detail, goals with progress rings, notifications and profile.

Trips (travel, 12 screens)

Open apps/trips. Lagoon theme.

Welcome, explore (hero search, categories, featured carousel, deals), search (flights and stays tabs, dates, travellers), results with route lines.
Destination with photo viewer, amenities and itinerary; booking and checkout with steps; boarding pass.
My trips (upcoming with a checklist, past with ratings), saved, travel adviser chat and profile.

Making a page yours

Copy the page and keep the <head> as it is (fix the relative paths if you move it).
Change the words. If you don't need Arabic, remove the data-mk-ar attributes; if you do, serve your own translations.
Replace the demo pictures with your own: photos are in docs/assets/photos, drawings (avatars, map) in docs/assets/img. Keep the file names and nothing else needs to change.
Set the theme on <html> (data-mk-accent) or make your own with the theme builder.
Keep the curved bars. They are what makes an app built with this kit recognisable.

The page generator

Every page is generated from a short fragment in src/site/ with a settings comment at the top:

<!--mk {"title":"Bills","titleAr":"الفواتير","layout":"app","app":"wallet","tab":"home","back":"home.html"} -->
<section class="mk-card">…</section>

Layouts: component (kit demo pages), app (demo-app screens with their own bottom bar), bare (full-screen pages) and docs. Run npm run pages to regenerate. The finished HTML is plain, so you can also stop using the generator and edit pages directly.