01. Landing
Overview and entry point
Communicates what mini-TypeUI is, what changed, and where to go next.
From one showcase page to a small, shippable product shell.
mini-TypeUI now ships as a static site with a landing page, documentation, getting-started notes, and a reusable examples section — still monochrome, still lean, and still easy to extend.
Mini product structure
mini-typeui-showcase/
├─ index.html
├─ pages/
│ ├─ get-started.html
│ ├─ docs.html
│ └─ examples.html
├─ assets/
│ ├─ css/site.css
│ └─ js/site.js
├─ scripts/
│ ├─ serve.sh
│ └─ check.sh
└─ README.mdProduct surface
Four small pages are easier to scan, extend, and test than one long showcase document.
Core UI states are now visible by default
The examples page includes the real states you asked to keep in scope: loading, empty, error, success, and disabled.
Loading
Preparing content…
Skeletons and structure keep the page readable while data is pending.
Empty
Nothing to show yet
Empty states should explain the situation and suggest the next step.
Error
Could not sync changes
Error states are calm, readable, and actionable instead of loud.
Success
Saved successfully
Success feedback confirms the result without taking over the layout.
Disabled
Email address
Select plan
This control is unavailable until prerequisites are met.
Complete the required fields first
Disabled controls stay legible and intentional, not broken or invisible.
What to do next
The rest of the site provides the operational docs and examples you need to keep extending the product skeleton.
For implementers
Open the docs first
Read the file map and the rules before changing layout or adding new pages.
For design checks
Compare against the examples page
Use the examples page to confirm the shared styles, buttons, cards, and states still feel consistent.