Guidelines

Button hierarchy

Every view should have one obvious next step. Pick the variant by importance, not by looks.

• Primary: the main action. Use at most one per view.

• Secondary: alternatives next to the primary action, like Cancel or Back.

• Tertiary: low-emphasis or repeated actions, like "View all" links or per-row actions in a list.

• Danger: only for actions that delete or can't be undone.

Use the accent color sparingly

Purple tells people where to look, so it only works when it's rare. Moth uses it for primary actions and for selected state (checked boxes, the active tab and nav item). Everything else is grayscale.

• Don't use the accent for decoration, icons, borders or section backgrounds.

• If a screen shows more than a few purple elements, demote some to secondary or tertiary.

• Status colors (success, warning, danger, info) are for status only, never for emphasis.

Focus

Every interactive element shows the same neutral focus outline (--m-color-focus-border) when reached with the keyboard, and form fields add a soft halo (--m-color-focus-ring). Keep focus visible: never remove an outline without replacing it.

Forms

Fields are deliberately quiet so the actions stand out. Choose where a form lives by what it is:

• On a card: self-contained tasks such as sign in, checkout steps, or a form among other content.

• Directly on the page: pages that are the form (settings), search and filter toolbars, and single-field sign-ups.

• Put hints under the field they describe. When there's an error, show it under the field and keep what the user typed so they can fix it.

• Fields and medium buttons share --m-control-height, so a field and its button line up without extra work.

Dark only

Moth is designed for dark interfaces and has no light theme. Build on --m-color-background, raise content onto --m-color-surface cards, and use --m-color-surface-raised for anything that sits on a card. See the color tokens.