Visual Constraints¶

A definitive list of visual do's and don'ts for MetrePay UI. Use this as a checklist when reviewing AI-generated or manually created interfaces.

Colors¶

✅ DO	❌ DON'T
Use `#6E96FF` for single payment CTAs	Use arbitrary blues not in the palette
Use `#5C0390` for recurrent/subscription CTAs	Mix blue and purple in the same form
Use `#F1F1F1` as page background	Use white as the page background
Use `#FAFAFA` for flat cards	Use grey cards with heavy borders
Use the gradient only in hero sections	Use the gradient as a page background
Use semantic colors for status (green/amber/red)	Use blue for error states
Use `#E5ECFB` for card borders and dividers	Use `#CCCCCC` or `#DDDDDD` for borders

✅ DO	❌ DON'T
Use Cabin for all product UI	Use Inter, Roboto, or Lato
Use font-weight 700 for headings	Use font-weight 400 for headings
Use font-weight 600 for labels and buttons	Use font-weight 500 for labels
Use font-weight 400 for body text	Use font-weight 300 (too light)
Use `#333333` for headings	Use pure black `#000000`
Use `#666666` for body text	Use `#444444` or `#555555` for body
Use `#999999` for muted/secondary text	Use `#AAAAAA` or `#BBBBBB`
Use `letter-spacing: 0.08em` for uppercase labels	Use uppercase labels without letter-spacing

✅ DO	❌ DON'T
Use multiples of 8px for all spacing	Use arbitrary values (13px, 17px, 22px)
Use `20px` gap between form fields	Use `16px` or `24px` between fields
Use `24px` card padding on mobile	Use `16px` card padding (too tight)
Use `32px` card padding on desktop	Use `40px` card padding (too loose)
Use `32px` section padding on mobile	Use `20px` section padding
Use `48px` section padding on desktop	Use `60px` section padding

✅ DO	❌ DON'T
Use `8px` for inputs and buttons	Use `4px` (too sharp)
Use `10px` for cards	Use `12px` or `14px` (inconsistent)
Use `16px` for modals and split checkout	Use `24px` (too round)
Use `20px` for main form cards	Use `30px` (too round)
Use `9999px` for tags and pills	Use `4px` for tags
Never use `0px`	Never use `0px`

✅ DO	❌ DON'T
Use `0px 0px 6px 3px rgba(127,146,189,0.1)` for cards	Use `0 2px 4px rgba(0,0,0,0.3)` (too dark)
Use `0px 10px 16px rgba(0,14,45,0.1)` for form containers	Use `0 4px 6px rgba(0,0,0,0.5)` (opaque)
Use `0 8px 16px -4px rgba(10,10,10,0.1)` for hover	Use colored shadows
Keep shadows soft and blue-tinted	Use black shadows
Use shadows to indicate elevation	Use shadows decoratively

✅ DO	❌ DON'T
Use blue for single payment CTAs	Use green for payment CTAs
Use purple for subscription CTAs	Use orange or red for CTAs
Use ghost/outline for secondary actions	Use primary button for secondary actions
Use full-width buttons in forms	Use narrow buttons in forms
Use `height: 42px` for default buttons	Use `height: 36px` for default buttons
Use `font-weight: 600` on buttons	Use `font-weight: 400` on buttons
Use `translateY(-1px)` on hover	Use `scale(1.05)` on hover

✅ DO	❌ DON'T
Always show a label above every input	Use placeholder as label substitute
Use `height: 42px` for inputs	Use `height: 36px` or `height: 40px`
Use `border: 1.5px solid #92A3C8`	Use `border: 1px solid #ccc`
Show field errors below the field	Show all errors at the top of the form
Show form errors above the submit button	Show form errors at the top of the form
Use blue focus ring on inputs	Use no focus indicator
Center forms on the page	Left-align forms on the page

✅ DO	❌ DON'T
Use `#F1F1F1` as page background	Use white as page background
Center payment forms (max-width 480px)	Full-width payment forms
Use gradient hero at top of payment flows	Use plain white header
Use sidebar layout for dashboards	Use top-nav-only dashboards
Use responsive grid for catalogs	Use fixed-width catalog layouts

✅ DO	❌ DON'T
Use `transition: all 0.3s ease`	Use `transition: all 0.1s linear`
Use `translateY(-1px)` on button hover	Use `scale(1.1)` on button hover
Use `translateY(-2px)` on card hover	Use `rotate` or `skew` animations
Use opacity transitions for show/hide	Use slide-in animations for alerts
Keep animations subtle and purposeful	Use decorative animations