shopify-ai-backup/app-design.md

App Design Guidelines

Based on the codebase analysis, here are the key design patterns and colors used across the application:

Color Palette

Primary Green: #008060 (shopify green, primary actions, buttons) Dark Green: #004c3f (hover states, darker variations) Light Green: #e3f5ef (background accents)

Text Colors:

• Primary: #0f172a (dark text)
• Secondary: #6b7280 (muted text)
• Success: #10B981 or #059669
• Error: #EF4444 or #b91c1c

Background Colors:

• Primary: #ffffff (white)
• Secondary: #f8fafc (light gray)
• Input focus border: #008060

Border Colors:

• Primary: #e5e7eb
• Secondary: #d1d5db

Typography

Font Families:

• Primary: 'Inter', system-ui, -apple-system, sans-serif
• Accent: 'Space Grotesk' (used in topup.html)

Font Sizes:

• Body: 14px
• Button: 14px
• Small text: 12px, 13px
• Titles: 18px, 24px, 28px

Border Radius

• Cards: 12px
• Buttons: 8px
• Small elements: 6px
• Pills/Badges: 999px (fully rounded)

Shadow & Elevation

Box Shadows:

• Card: 0 1px 3px rgba(0, 0, 0, 0.05)
• Modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
• Primary button hover: 0 6px 16px rgba(0, 128, 96, 0.25)

Backdrops:

• Modal overlay: rgba(15, 23, 42, 0.7) with backdrop-filter: blur(8px)
• Glass effect: backdrop-filter: blur(12px)

Button Styles

Primary Button:

• Background: --green (#008060)
• Color: White
• Hover: --green-dark (#004c3f)
• Shadow: 0 4px 12px rgba(0, 128, 96, 0.15)

Secondary Button:

• Background: White
• Border: --border (#e5e7eb)
• Hover: #f8fafc

Card & Panel Styles

Cards:

• Background: White
• Border: 1px solid var(--border)
• Border-radius: 12px
• Padding: 24px
• Shadow: 0 1px 3px rgba(0, 0, 0, 0.05)
• Footer border: 1px solid var(--border) with margin-top: 20px

Input Styles

Text Input & Select:

• Border: 1px solid var(--border) (#e5e7eb)
• Border-radius: 8px
• Padding: 10px 14px
• Font-size: 14px
• Focus: Border color becomes --green (#008060)
• Focus box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.1)

Modal Styles

Overlay:

• Background: rgba(15, 23, 42, 0.7) with backdrop-filter: blur(8px)
• Z-index: 100000

Modal Container:

• Background: #fff
• Border-radius: 16px
• Max-width: 500px
• Padding: 24px
• Shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)

Spacing & Layout

• Card gap (grid): 24px
• Button gap: 12px or 8px
• Field gap: 8px
• Card padding: 24px
• Shell/container padding: 32px 20px 48px

Application Pages

The inline checkout theming should align with these app design principles across:

1. select-plan.html - Plan selection with inline checkout
2. settings.html - Account settings with subscription management
3. topup.html - Token top-up purchases

All implementations use consistent styling including:

• Same green color scheme (#008060)
• Inter font family
• 8px border radius for consistency
• Consistent spacing and shadows
• Glass morphism effects with backdrop filters