UI Foundations

UI Foundations is a library of 118 interactive examples across 24 categories, including typography, spacing, hierarchy, color, controls, and motion.

Explore a foundation

Browse all 118 examples in one grid or search for a detail such as line height, nested corners, contrast, or touch targets. Open a card to try its interactive preview in the UI Foundations configurator.

Open the foundation picker at the top of the canvas to search or browse categories and their examples in one panel. Adjust a slider to see its selected value in a tooltip. The eye control at the bottom left toggles measurement guides.

Each example has controls suited to the principle. Compare before and after states, adjust the available values, and toggle measurement guides to see the effect in context. These are teaching examples; their sample content and numeric settings are not universal defaults for your own interface.

Configure your prompt

Open the settings button beside Use prompt on the canvas, then choose your task:

• Improve existing UI: inspect the supplied interface and correct confirmed issues.
• Review only: report findings and recommended corrections without editing the project.
• Build new UI: use the principle while building the interface you request.

The prompt preserves your design system and technology stack and includes the foundation's applicability, implementation guidance, and verification checks.

Use your prompt

Sign in with TypeUI Creative or All-access, then open Use prompt on the canvas. Choose Use with Claude, Use with OpenAI, Use with Cursor, or Copy prompt. Public browsing and interactive previews do not require a subscription.

Paste the prompt into Claude, Codex, Cursor, or another AI coding tool, together with the component, page, or brief you want it to work on. The prompt does not send your project to TypeUI or run changes automatically.

The AI tool options also copy the prompt to your clipboard so you can paste it if your browser cannot open the app.

Download all rules

Choose Download all rules at the bottom right of the configurator to get a ZIP containing all 118 Markdown rules, organized by category, plus a README with a starting prompt and an index. This download requires TypeUI Creative or All-access.

Extract the ZIP and give your AI coding tool access to the folder alongside your project. These rules are set up to improve the whole project: inventory relevant surfaces, apply the rules that fit, preserve your existing design system, and verify changes in focused batches.