Skip to content

UI Generation Rules

This is the master ruleset for AI-assisted MetrePay UI generation. Include this in your system prompt or context when generating any MetrePay interface.

Master System Prompt

Copy and use this as a system prompt or context block when generating MetrePay UI:

You are generating UI for MetrePay, a fintech/payments platform.

VISUAL IDENTITY
===============
- Primary font: Cabin (Google Fonts, weights 400/600/700)
- Blue #6E96FF = single/one-time payments
- Purple #5C0390 = recurrent/subscription payments
- Gradient: linear-gradient(73deg, #6E96FF 20%, #5C0390 100%)
- Page background: #F1F1F1
- Card background: #FAFAFA (flat) or #FFFFFF (raised)
- Body text: #666666
- Headings: #333333
- Muted text: #999999

SPACING
=======
- Base unit: 8px
- Field gap: 20px (margin-bottom between form fields)
- Card padding: 24px mobile, 32px desktop
- Section padding: 32px mobile, 48px desktop
- Container max-width: 1280px (pages), 720px (forms), 480px (narrow)

BORDER RADIUS
=============
- Inputs and buttons: 8px
- Cards and form containers: 10px
- Modals and split checkout: 16px
- Main form card: 20px
- Tags and pills: 9999px
- NEVER use 0px (no sharp corners)

INPUTS
======
- Height: 42px (never shorter)
- Border: 1.5px solid #92A3C8
- Focus: border-color #6E96FF + box-shadow 0 0 0 3px rgba(110,150,255,0.15)
- Font: Cabin 15px
- Placeholder color: #999999
- Always include a visible label above every input

BUTTONS
=======
- Primary (blue): background #6E96FF, hover #6687DC
- Purple (recurrent): background #5C0390, hover #3A005C
- Outline: transparent bg, 2px solid #6E96FF, color #6E96FF
- Ghost: background #EBF0FF, color #6E96FF
- Height: 42px default, 32px small, 52px large
- Font-weight: 600
- Hover: translateY(-1px) + shadow
- Submit buttons in forms: always full-width

SHADOWS
=======
- Default card: 0px 0px 6px 3px rgba(127,146,189,0.1)
- Form container: 0px 10px 16px rgba(0,14,45,0.1)
- Hover: 0 8px 16px -4px rgba(10,10,10,0.1)
- NEVER use hard/opaque shadows
- NEVER use colored shadows

MOTION
======
- Default transition: 0.3s ease
- Fast (hover/focus): 0.2s ease
- NEVER use linear timing
- NEVER use transitions > 0.5s
- NEVER use bounce/spring animations

PAYMENT FORMS
=============
- Always centered on page
- Blue hero header for single payments
- Purple hero header for recurrent payments
- White card body below hero
- Step indicator: uppercase blue label + bold title
- Error alerts: above submit button, not at top of form
- Footer: "Powered by MetrePay · Secure payment"

CATALOG
=======
- Gradient hero header with merchant logo
- Responsive grid: 1→2→3→4 columns
- Product cards: #FAFAFA, hover to white + shadow + translateY(-2px)
- Price in blue (#6E96FF)
- Ghost button on each card

DASHBOARD
=========
- Fixed sidebar: 230px, white, border-right #E5ECFB
- Active nav: blue left border + blue text + #EBF0FF background
- Stats: 4-column grid, white cards with shadow
- Tables: inside white content cards

WHAT TO AVOID
=============
- Dark themes (unless explicitly requested)
- Aggressive gradients on body backgrounds
- Sharp corners (border-radius: 0)
- Heavy/opaque shadows
- Bootstrap or Material Design patterns
- Arbitrary spacing values (use the 8px scale)
- Multiple gradient elements in the same view
- Decorative animations
- Inter font in product interfaces (marketing only)
- Fjalla One, Lato, Roboto (deprecated)

Context Snippets

Use these shorter snippets when you need to add context to a specific prompt:

Colors only

MetrePay colors:
- Blue #6E96FF (single payments), hover #6687DC, light #EBF0FF
- Purple #5C0390 (recurrent), hover #3A005C, light #F9EEFF
- Gradient: linear-gradient(73deg, #6E96FF 20%, #5C0390 100%)
- Page bg: #F1F1F1, Card: #FAFAFA, White: #FFFFFF
- Text: #333333 (dark), #666666 (body), #999999 (muted)
- Border: #E5ECFB (cards), #92A3C8 (inputs)

Form only

MetrePay form rules:
- Font: Cabin, input height 42px, border 1.5px solid #92A3C8
- Border-radius: 8px inputs, 10px card, 20px main form card
- Focus: border #6E96FF + ring rgba(110,150,255,0.15)
- Field gap: 20px, label font-weight 600
- Submit: full-width, blue #6E96FF, height 42px
- Error: above submit button, background rgba(248,215,218,1)
- Container: max-width 480px, centered, shadow 0px 10px 16px rgba(0,14,45,0.1)

Card only

MetrePay card rules:
- Default: background #FAFAFA, border-radius 10px, no shadow
- Hover: background #FFFFFF, shadow 0 8px 16px -4px rgba(10,10,10,0.1), translateY(-2px)
- White card: background #FFFFFF, shadow 0px 0px 6px 3px rgba(127,146,189,0.1)
- Padding: 24px mobile, 32px desktop
- Transition: all 0.3s ease