Design standards
Mobile-first design
Touch targets
At least 44 × 44 px, with space between them.
Typography
Body text at least 16 px. Use your own font; system fonts load fastest.
Layout
One column, at most 420 px wide, usable at 360 px. No horizontal scroll.
Wallet integration UI
Identity
Greet users by their CrackPay handle (@sam), and fall back to a short
account address (0x2222…2222). Never show a "Connect wallet" button.
Connection states
| State | Show |
|---|---|
| Connecting | A short loading state |
| Not inside CrackPay | "Open this app from CrackPay" |
| Failed | A short message and a way to retry |
Transaction states
- Waiting: the button shows progress and is disabled. CrackPay is showing the user its own confirmation.
- Done: say so plainly. It is final; there is nothing more to wait for.
- Cancelled: "Cancelled." Not an error.
- Failed: say nothing moved, and let them try again.
Balance display
Dollars with two decimals: $12.50. Read USDC through its token contract with 6
decimals.
Color and theming
Dark mode
Support prefers-color-scheme: dark, and set
<meta name="color-scheme" content="light dark">.
Contrast
Meet WCAG AA for text and controls.
Your brand
Make it obvious the app is yours. Do not imitate CrackPay's own screens.
Accessibility
- Label icon-only buttons.
- Announce errors with
role="alert". - Keep focus visible.
Performance
- Show something within a second.
- Use skeletons or spinners while loading, never a blank screen.