# metroweb

> Windows Phone 8's Metro design for React. metroweb is an npm package of the phone's controls, page transitions, themes and type ramp, with the values taken from the phone itself. Its design docs are the spec, and https://wp8.vercel.app is a whole phone built with it.

- Install it with `npm install metroweb` (it needs React 19), import `metroweb/styles.css` once, and render a `PhoneFrame` as the app's root. The starter is the quickest way in: `npx degit ImperialBebek/metroweb/templates/starter my-app`.
- The phone wins: where the phone and a web convention disagree, the docs and the package follow the phone. The exceptions are listed on the web and accessibility page.
- Every value in the docs carries a source label: Decoded (read from the emulator image), Toolkit (the Windows Phone Toolkit's source), Fitted (measured from footage), Estimated (matched by eye, or chosen) or Verified (checked on a device).
- Coding agents can install the metro-ui skill, with the steps, the rules and a checker script: `npx skills add ImperialBebek/metroweb`.

## Package

- [metroweb README](https://raw.githubusercontent.com/ImperialBebek/metroweb/main/packages/metroweb/README.md): installing, pages and navigation, every component, the theme variables and the rules that keep an app Metro
- [metro-ui skill](https://raw.githubusercontent.com/ImperialBebek/metroweb/main/skills/metro-ui/SKILL.md): how a coding agent builds and checks an app on the package
- [DESIGN.md](https://raw.githubusercontent.com/ImperialBebek/metroweb/main/DESIGN.md): the design tokens in Google's DESIGN.md format
- [Starter](https://github.com/ImperialBebek/metroweb/tree/main/templates/starter): a small to-do app on the package

## Design docs

- [Metro design system](https://wp8.vercel.app/design.md): how to read the pages, the source labels and the version baseline
- [Principles](https://wp8.vercel.app/design/principles.md): where Metro comes from, what it is for, how to check a screen against it, and the rules this project adds.
- [Canvas](https://wp8.vercel.app/design/canvas.md): the 480 px logical screen, its regions, scaling and safe areas.
- [Layout](https://wp8.vercel.app/design/layout.md): the 12 px grid, margins and component metrics.
- [Typography](https://wp8.vercel.app/design/typography.md): Segoe WP, the type ramp and text styles.
- [Colour and theme](https://wp8.vercel.app/design/colour-and-theme.md): light and dark palettes and the 20 accents.
- [Iconography](https://wp8.vercel.app/design/iconography.md): glyph sizes, rings and the Phosphor substitute.
- [Motion](https://wp8.vercel.app/design/motion.md): turnstile, feather, continuum, hub intro, tilt, live tile flips.
- [Navigation model](https://wp8.vercel.app/design/navigation.md): Start, apps, page stacks, Back and Start.
- [Components](https://wp8.vercel.app/design/components.md): pivot, panorama, lists, toggles, pickers, app bar, message box.
- [Start and live tiles](https://wp8.vercel.app/design/start-and-live-tiles.md): the tile grid, templates and live behaviour.
- [System UI](https://wp8.vercel.app/design/system-ui.md): system tray, navigation bar, volume band, desk controls.
- [Writing](https://wp8.vercel.app/design/writing.md): casing, voice, dates and times.
- [Web and accessibility deviations](https://wp8.vercel.app/design/web-and-accessibility.md): where the recreation departs from the phone, and why.
- [Evidence appendix](https://wp8.vercel.app/design/evidence.md): sources, open questions and what still needs a device.

## Optional

- [Everything in one file](https://wp8.vercel.app/llms-full.txt): the package README and every page of the design docs