Restore to commit 74e578279624c6045ca440a3459ebfa1f8d54191

app-design.md

@@ -0,0 +1,122 @@
+# 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