This page records the pattern consistency across every screen in DomiDo. The examination evaluated navigation, buttons, cards, status badges, loading states, modals, destructive actions, forms, and empty states for cross-screen consistency. Every issue is resolved; the current design uses one canonical pattern per concept. The rule running through every section below is that the same visual element should always mean the same thing, the same action should always carry the same label, and the same kind of failure should always recover the same way — newcomers are spared the cognitive load of guessing whether a green badge means the same thing on My Designs as it does on My Orders, because it always does.
The bottom tab bar appears on every primary customer screen and is hidden only in full-screen contexts: the Assembly Viewer, the Stripe checkout, the onboarding carousel, the AI-mode projection workflow, the AI-mode 3D model preview, and the full-screen 3D viewer on Product Detail. The tab bar is binary — fully visible and interactive, or hidden — never dimmed or disabled. The same five tabs (Home, Create, Gallery, Cart, Account) appear everywhere with the same icons and the same labels. The back button follows the platform convention on every screen. The admin sidebar is the same on every admin screen. The "Back to App" affordance appears in the same place and uses the same icon. The admin-mode transition is signalled by a branded "Admin Mode" banner so the change of context is announced.
Six button variants cover every action: primary (sage on white text) for the dominant call-to-action; secondary (transparent with a sage border) for supporting actions; ghost (text-only) for tertiary actions; destructive (berry red) for delete and remove; premium (Regency Gold) for upgrade and Pro-tier; accent (terracotta) for warm calls. Every variant has the same three sizes (thirty-six, forty-four, and fifty-two pixels) and the same twenty-four-pixel pill radius. Every action button enters the same Submitted state on tap: the label is replaced with a sixteen-pixel inline spinner; pointer events are disabled; the state persists until the server responds. The same action uses the same label everywhere. Adding an item to the cart is always "Add to Cart — [price]"; checking out is always "Proceed to Checkout — [total]"; placing a pre-order is always "Pre-order This Kit — [price]" with a distinct visual treatment. The labels "Order This Kit", "Buy This Kit", and "Place Order" do not appear anywhere.
The badge palette has one canonical mapping across the whole application. Green is final positive (Ready, Delivered). Blue is active (Processing, Shipped). Amber is waiting (Pre-ordered, AI In Progress). Red is negative (Failed, Cancelled, Moderation Rejected). Purple is social (Published). Grey is neutral (Draft, Archived). Each badge carries colour, an icon, and text — triple-coded for accessibility. The same colour never means two different things in two screens, and the same status never carries two different colours.
Cards follow four variants with consistent geometry. Product cards (sixteen-pixel radius, shadow-defined) carry a hero image at seventy per cent of the area, a title, a price-and-status metadata row, and an action row. Design cards (sixteen-pixel radius) follow the same geometry with a status badge in the corner. Order cards (twelve-pixel radius, bordered) carry an order number, a date, a status badge, and a design thumbnail so a user recognises rather than recalls. Admin or data cards (twelve-pixel radius, bordered) carry a metric, a value, and a trend indicator. Hover and pressed states are the same across variants.
The four loading patterns appear in canonical contexts. The determinate progress bar appears during file upload. The twelve-stage stepper appears during pipeline processing. The staged-animation-with-elapsed-time pattern appears during AI generation, per-projection generation, and 3D model generation. The skeleton appears on initial page loads and infinite-scroll appends. No screen invents its own loading pattern. The skeleton shimmer is the same speed everywhere (one-and-a-half seconds, ease-in-out), the same direction (left to right), and the same colour (forty per cent white over the elevated surface). Pull-to-refresh uses the same indicator across every list. The branded loading screen for the Stripe transition is the same across both fresh sessions and the phantom-payment resume path.
Three modal types cover every overlay: bottom sheet for selection and filter contexts; dialog for confirmations; full-screen for forms requiring extensive input. Each type has the same dismissal pattern (Escape to dismiss, tap outside to close where applicable), the same focus-trap behaviour, and the same animation (slide up for bottom sheet, scale-and-fade for dialog).
The three-tier destructive pattern applies consistently. Low-impact reversible actions (remove from cart, remove from collection, dismiss notification) use swipe-with-undo: a five-second toast cancels the operation. Medium-impact actions (cancel pre-order, archive order, refund) use a confirmation dialog with the action named. High-impact irreversible actions (delete account, delete design) use a typed confirmation.
Every form field uses the same input variant from the design system: ten-pixel radius, forty-four-pixel height, a sage-green focus ring, a visible label above the field, and an inline error message below. Required fields are marked with both an asterisk and the word "required". Validation timing is the same everywhere: on blur initially, then on every keystroke after a failure, and again on submit. Every empty state follows the same pattern: a friendly illustration, a brief explanation, and one or two clear next steps. The "No Designs Yet" empty state matches the "No Orders Yet" empty state matches the "No Search Results" empty state structurally; only the illustration, the text, and the next steps differ.
The consistency examination identified twenty-three issues, two Critical and four Major. The Critical issues were the inconsistent purchase-call-to-action labels (three different labels for the same action) and the contradictory status-badge colour semantics across My Designs and My Orders. Both are resolved by the unified labels and the unified semantic palette. The Major issues — inconsistent loading patterns, inconsistent back-button availability during processing, the customer-to-admin paradigm shift, inconsistent destructive-action patterns — are all resolved by the canonical patterns documented above.