What are the key design rules for building a user interface?

A user interface must be consistent.

It must follow specific rules for how things look and act. These rules make the interface easy to understand and use.

Do not use standard browser pop-up boxes like `confirm()`, `alert()`, or `prompt()`. Instead, use custom modal windows that match the application's design.

Buttons should only be as wide as their text. They must not stretch across the whole screen. This keeps buttons looking neat and proportional.

Do not use emoji as the main pictures for icons. Use custom-drawn SVG images inside colored circles. Emoji are only for small labels like tooltips or topic tags.

Headings must be a specific size. Hero headings, panel headings, and modal titles have set size limits. This prevents text from looking too big or out of place.

Avoid using cool colors like light greys, blues, or purples for the main parts of a page. These colors are only allowed for specific accent elements.

Design the interface for mobile phones first. All layouts must look good and fit on small screens without scrolling sideways. This ensures a good experience for all users.

Respect user settings for reduced motion. Any animation in the interface must have an option to turn it off. This helps users who prefer less movement on screen.

A developer is building a new feature. The developer wants to use a standard `alert()` box to show a message. The design rules state that custom modal windows must be used instead. The developer creates a custom modal to match the application's style.

More from the same record, pulled by shared topic — not written new for this page.

A user interface must be consistent. It must follow specific rules for how things look and act. These rules make the interface easy to understand and use.